修改几何体顶点创建Low Poly地形时出现黑色故障求助

嘿，我之前做Low Poly地形的时候也踩过这个坑！你遇到的黑色故障几乎可以肯定是顶点位置修改后没有更新法线导致的——Three.js的几何体默认不会自动重新计算法线，而光照效果完全依赖正确的法线数据，所以修改顶点后就会出现黑块、明暗异常这类“故障”。

下面是具体的解决步骤和优化建议：

• 第一步：修改完顶点后必须更新关键数据
  当你通过vertices数组修改顶点位置后，Three.js的缓冲区还保留着旧的顶点数据，同时法线也还是基于原始平面计算的，所以要执行：

  geomFloor.computeVertexNormals(); // 重新计算每个顶点的法线，让光照正确作用
  geomFloor.attributes.position.needsUpdate = true; // 通知引擎顶点位置已变更
  

• 第二步：用PlaneGeometry替代BoxGeometry（可选但推荐）
  你用的BoxGeometry是有厚度的3D几何体，而地形只需要一个平面，改用PlaneGeometry可以减少一半的顶点数量，提升性能，而且调整起来更直观：

  // 创建100x100大小、100x100分段的平面
  const geomFloor = new THREE.PlaneGeometry(100, 100, 100, 100);
  // 记得把平面旋转90度变成水平地面
  terrainMesh.rotation.x = -Math.PI / 2;
  

• 第三步：开启flatShading强化Low Poly风格
  给材质添加flatShading: true，会让每个面使用统一的法线渲染，而不是平滑插值，正好契合Low Poly的硬朗视觉效果，也能避免一些奇怪的明暗过渡：

  const terrainMaterial = new THREE.MeshStandardMaterial({
    color: 0x7cb342,
    flatShading: true
  });
  

把这些步骤整合起来，完整的代码示例大概是这样：

// 创建平面几何体
const geomFloor = new THREE.PlaneGeometry(100, 100, 100, 100);
// 遍历顶点设置随机Y值
geomFloor.vertices.forEach(vertex => {
  // 替换成你需要的随机范围，比如-3到3
  vertex.y = THREE.MathUtils.randFloat(-3, 3);
});
// 更新法线和顶点缓冲区
geomFloor.computeVertexNormals();
geomFloor.attributes.position.needsUpdate = true;
// 创建网格并添加到场景
const terrainMesh = new THREE.Mesh(geomFloor, new THREE.MeshStandardMaterial({
  color: 0x7cb342,
  flatShading: true
}));
terrainMesh.rotation.x = -Math.PI / 2;
scene.add(terrainMesh);

这样调整后，你应该就能看到正常渲染的Low Poly地形了，不会再有黑色故障~

内容的提问来源于stack exchange，提问作者JJ Gerrish