如何通过HTML的Three.js的Geometry Material Mesh创建三维物体

本篇文章向大家介绍《如何通过HTML的Three.js的Geometry Material Mesh创建三维物体》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

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 输出，四者只要一个没对齐，结果就不可预测。

理论要掌握，实操不能落！以上关于《如何通过HTML的Three.js的Geometry Material Mesh创建三维物体》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！