Three.js如何创建自定义几何体？

在 Three.js 中，几何体是构建三维场景最根本的要素。尽管框架内置了立方体、球体、圆柱体、平面、环面等多种标准几何体，但在实际开发中，往往需要突破预设限制，设计符合特定视觉风格或功能需求的独特形态——比如抽象雕塑、数据可视化曲面、游戏中的特殊道具，或是具有品牌识别度的交互界面元素。本文将系统介绍如何从底层出发，在 Three.js 中自主创建并应用各类自定义几何体，涵盖原理理解、结构组织与实践技巧，助力开发者真正掌握三维建模的核心能力。
Three.js 提供两类核心几何体类：Geometry 与 BufferGeometry。前者是早期版本中采用的对象式结构，属性直观、易于理解，适合初学者建立空间概念；后者则采用基于缓冲区的内存布局，以 TypedArray 存储顶点、索引等数据，大幅提升了渲染性能与内存效率，已成为当前推荐且主流的实现方式。对于中大型项目或追求流畅体验的应用，BufferGeometry 是不二之选。
一个完整的几何体由多个关键组成部分协同构成：首先是顶点（Vertices），即空间中具有明确位置的点，每个顶点由一组三维坐标（x, y, z）唯一确定；其次是索引（Indices），用于按顺序指定哪些顶点组合成三角形面片，从而高效复用顶点、减少冗余；再次是法向量（Normals），可为每个顶点或每个面单独定义，直接影响光照计算结果，决定模型明暗过渡与立体感；最后是 UV 坐标，作为二维参数映射，将纹理图像精准包裹到三维表面上，实现材质细节呈现。
以最基础的平面为例，我们可完全手动构造其几何结构：先定义四个角点坐标，形成矩形轮廓；再通过两组三个顶点的索引序列，将其划分为两个共享边的三角形；随后为每个顶点赋予统一的法线方向（如指向观察者），并设置对应的 UV 值（如左下角为 (0,0)，右上角为 (1,1)），最终组装为具备完整渲染信息的 BufferGeometry 实例。这一过程清晰展现了几何体的本质——它并非某种实体，而是一组被逻辑组织起来的空间数据。
进一步拓展，我们可以生成更具表现力的形状。例如星形：利用极坐标变换公式，交替计算外尖与内凹顶点的位置，按顺时针或逆时针顺序排列所有顶点；再通过遍历顶点索引，以中心点或相邻三顶点为单元，动态构建三角面片序列，即可获得规则或变形的星状结构。该方法灵活可控，支持调节尖角数量、内外半径比及旋转偏移，轻松产出多样化变体。
更进一步，借助数学函数可生成连续变化的有机形态。例如波浪面：在规则网格基础上，对每个顶点的 y 值施加正弦或噪声函数扰动，形成周期性起伏；同步更新对应法线向量以匹配曲面斜率，并维持 UV 映射的连续性；最终生成兼具动态感与真实感的可渲染表面。此类技术广泛应用于地形模拟、音频可视化、流体效果等场景。
自定义几何体的构建本质是对空间数据的精确编程——它不依赖外部建模工具，而是在代码中定义点、连接关系与属性映射。只要理解顶点分布规律、索引组织逻辑、法线计算原理与 UV 映射机制，就能将任意二维图形延展为三维实体，或将抽象数学表达转化为可视化的立体结构。这种能力不仅拓展了创意边界，更深化了对 WebGL 渲染管线的理解。当你可以亲手捏造每一个顶点，三维世界的塑造权，便真正握于手中。