Three.js 从 r125 开始彻底移除 Geometry 构造器,因其是 CPU 端对象,无法高效映射到 WebGL;必须改用 BufferGeometry,通过 Float32Array 和 BufferAttribute 手动构建顶点等属性。

Three.js 从 r125 开始已正式移除 Geometry 构造器,所有基于顶点/面的传统几何体必须改用 BufferGeometry;直接写 new Geometry() 会报 ReferenceError: Geometry is not defined 或静默失败。
为什么 new Geometry() 不再可用
Three.js 在底层全面转向基于 GPU 缓冲区的内存管理模型,Geometry 是 CPU 端对象,无法高效映射到 WebGL 上下文。官方自 r112 起弃用,r125 彻底删除——不是兼容性问题,是根本不存在了。
- 旧代码中类似
const geom = new Geometry(); geom.vertices.push(...)必须重写 -
Geometry的顶点、面、法线等属性在BufferGeometry中需手动构建Float32Array和BufferAttribute - 几乎所有内置几何体(如
BoxBufferGeometry、SphereBufferGeometry)都已是BufferGeometry子类,无需转换
如何用 BufferGeometry 手动定义一个立方体
若需完全控制顶点数据(比如导入自定义网格、程序化生成),必须用 BufferGeometry + BufferAttribute 组装:
const positions = new Float32Array([
// 前面(z = 1)
-1, -1, 1, 1, -1, 1, 1, 1, 1,
-1, -1, 1, 1, 1, 1, -1, 1, 1,
// 其他面……共 36 个值(12 个三角形 × 3 顶点 × 3 坐标)
]);
const geometry = new BufferGeometry();
geometry.setAttribute('position', new BufferAttribute(positions, 3)); // 3 表示 xyz
geometry.computeVertexNormals(); // 法线不自动计算,必须显式调用
- 顺序必须是每 3 个数为一个顶点(x, y, z),且三角形顶点顺序影响正面朝向(默认逆时针为正面)
- 没有
faces数组了:索引由setIndex()提供,或靠顶点顺序隐式构成三角形带 - 颜色、UV、法线等均需独立
setAttribute(),字段名必须匹配着色器预期(如'normal'、'uv')
Material 和 Mesh 的搭配要点
Material 类型决定光照响应方式,Mesh 是 BufferGeometry 和 Material 的绑定容器,二者必须语义匹配:
立即学习“前端免费学习笔记(深入)”;
-
MeshBasicMaterial不受光照影响,适合调试顶点位置,但vertexColors: true需提前在 geometry 中设置'color'attribute -
MeshStandardMaterial需要法线(geometry.computeVertexNormals())和至少一个DirectionalLight或AmbientLight才可见明暗 - 若 geometry 有 UV,
MeshStandardMaterial可配map(纹理);但MeshBasicMaterial也能用map,只是不响应光 - 透明需同时设
transparent: true和opacity: 0.5(或alphaMap),且注意渲染顺序:半透物体建议关depthWrite: false
常见报错与绕过方式
遇到白屏、黑块、或控制台报 THREE.WebGLRenderer: Texture is not ready,大概率是 geometry 或 material 配置断裂:
-
BufferAttribute长度不能为 0:检查positions数组是否为空或未赋值 - 材质用了
normalMap但 geometry 没法线 → 渲染为纯黑,加geometry.computeVertexNormals() - 用了
vertexColors: true但没设置'color'attribute → 控制台警告,颜色退为白色 - 使用
PointsMaterial却传入Mesh→ 应改用Points;反之亦然
真正麻烦的从来不是“怎么画出来”,而是“为什么看起来不对”——顶点顺序、法线方向、材质光照模型、渲染器 gamma 输出,四者只要一个没对齐,结果就不可预测。



















