SuperAPI AI 工具集

threejs-geometry

设计与创作

查看项目

更新于 10-15 18:31

技能介绍

用途

本技能用于在 Three.js 中创建和管理几何体(Geometry),包括使用内置形状、构建自定义 BufferGeometry、处理顶点数据以及通过实例化高效渲染大量相同对象。适用于需要创建 3D 形状、操作顶点、构建自定义几何体或优化大量重复对象的场景。

主要能力

内置几何体

提供多种开箱即用的形状:

  • 基础形状:BoxGeometry、SphereGeometry、PlaneGeometry、CircleGeometry、CylinderGeometry、ConeGeometry、TorusGeometry、TorusKnotGeometry、RingGeometry。
  • 高级形状:CapsuleGeometry、DodecahedronGeometry、IcosahedronGeometry、OctahedronGeometry、TetrahedronGeometry、PolyhedronGeometry。
  • 路径类形状:LatheGeometry(旋转体)、ExtrudeGeometry(挤出)、TubeGeometry(管道)。
  • 文本几何体:通过 FontLoader 与 TextGeometry 加载字体并生成 3D 文字。

BufferGeometry

所有几何体的基类,以类型化数组存储数据以提升 GPU 效率。支持:

  • 自定义顶点、索引、法线、UV、顶点颜色等属性。
  • 多种 BufferAttribute 类型(Float32Array、Uint16Array、Uint32Array、Uint8Array)。
  • 修改顶点数据并标记 needsUpdate,重新计算法线、包围盒与包围球。
  • 交错缓冲区(InterleavedBuffer)以优化内存布局。

边线与线框

  • EdgesGeometry:仅生成硬边线条。
  • WireframeGeometry:生成所有三角形的线框。

点与线

  • Points:创建点云,支持尺寸衰减。
  • Line、LineLoop、LineSegments:创建连线、闭合环与线段对。

实例化

  • InstancedMesh:高效渲染大量相同几何体副本,支持逐实例变换与颜色。
  • InstancedBufferGeometry:支持自定义逐实例属性,可在着色器中使用。

几何体工具

通过 BufferGeometryUtils 提供:

  • mergeGeometries:合并几何体(可带分组以支持多材质)。
  • computeTangents:计算切线(法线贴图所需)。
  • interleaveAttributes:交错属性以提升性能。

常用模式

  • 居中几何体、缩放适配、克隆与变换。
  • 变形目标(Morph Targets)实现形状混合。

使用方式

通过 import 引入 Three.js 及所需模块。内置几何体直接实例化后与材质组合成 Mesh 加入场景。自定义几何体通过 BufferGeometry 设置属性。实例化使用 InstancedMesh 并设置每个实例的矩阵。文本几何体需先加载字体文件。

适用场景

  • 创建各类 3D 形状与模型。
  • 需要精细控制顶点数据的自定义几何体。
  • 大量重复对象的高效渲染(如粒子、森林、人群)。
  • 3D 文字、旋转体、挤出形状等特殊几何体。

限制

  • 合并几何体要求各几何体具有相同属性。
  • 索引使用 Uint16Array 时顶点数上限为 65535,更大网格需用 Uint32Array。
  • 修改顶点位置后需重新计算法线以保证光照正确。
  • 不再使用的几何体应调用 dispose() 释放资源。
  • 分段数越高越平滑但性能开销越大,需按需权衡。