使用BufferGeometry时材质无法显示的问题求助

你遇到的问题核心有两个：面朝向被默认剔除和法线方向导致光照失效，以下是具体原因和修复方法：

1. 核心原因 #

Three.js 默认材质的 side 属性为 THREE.FrontSide，会自动剔除背向相机的面；同时你使用的 MeshPhongMaterial 依赖正确的法线方向计算光照，两者共同导致了默认状态下物体显示黑色。

• 面朝向问题：你定义的顶点索引顺序（[0, 1, 2, 2, 3, 0]），通过右手定则判断，矩形的正面朝向是Z轴正方向；而你的相机在Z=1000位置看向Z=0，相当于相机在矩形的"背面"，默认不会渲染这个背向的面。
• 法线问题：你设置的法线方向为[0,0,1]（朝向Z正），而你的平行光从(10,10,500)指向(0,0,0)，光线方向是Z轴负方向，法线与光线方向夹角为180度，光照计算结果为0，即使面朝向正确也会显示黑色。

2. 修复步骤 #

步骤1：调整顶点索引，让面正面朝向相机 #

修改索引数组，使每个三角形的顶点顺序在相机视角下为逆时针（符合右手定则，正面朝向相机）：

geometry.setIndex([0, 3, 2, 0, 2, 1]);

步骤2：修正法线方向，匹配光照方向 #

将顶点法线改为朝向Z轴负方向（与光线方向一致）：

const vertices = [
  { position: [0, 256, 64], norm: [0, 0, -1], uv: [0, 0] },
  { position: [256, 256, 64], norm: [0, 0, -1], uv: [0, 0] },
  { position: [256, 0, 64], norm: [0, 0, -1], uv: [0, 0] },
  { position: [0, 0, 64], norm: [0, 0, -1], uv: [0, 0] },
];

步骤3：移除DoubleSide配置 #

现在不需要再开启side: THREE.DoubleSide，材质默认的FrontSide就能正常渲染：

const material = new THREE.MeshPhongMaterial({
  color: 0x8888ff
});

3. 简化方案（可选） #

如果只是需要基础矩形，直接使用Three.js内置的PlaneBufferGeometry可以自动处理面朝向和法线，避免手动构建顶点的错误：

// 创建256x256的平面，平移到你需要的位置
const geometry = new THREE.PlaneBufferGeometry(256, 256);
geometry.translate(128, 128, 64);

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