Three.js材质颜色异常求助：黑白平面显示不符合预期

嘿，我看你在Three.js里创建黑白平面时遇到了材质颜色不符合预期的问题，结合你给出的代码片段，我梳理了几个最可能的原因和对应的解决办法：

1. 材质类型可能选错了 #

如果你的create('plane')方法默认用的是MeshBasicMaterial，那可得注意了——这种材质完全不响应光照，不管你加多少光源，平面只会显示本身的颜色。但如果你想要平面在光照下有自然的明暗层次，得换成受光照影响的材质，比如：

• MeshLambertMaterial：适合基础的漫反射效果，性能较好
• MeshStandardMaterial：支持物理渲染，光影效果更真实

举个修改材质的例子：

// 创建白色平面的材质
const whiteMat = new THREE.MeshStandardMaterial({ color: 0xFFFFFF });
// 创建黑色平面的材质
const blackMat = new THREE.MeshStandardMaterial({ color: 0x000000 });

2. 光照强度太低，导致颜色发灰发暗 #

你现在设置的环境光和点光源强度都是0.1，这个强度实在太弱了！对于受光照的材质来说，这么弱的光会让白色平面显得灰蒙蒙，黑色平面几乎看不到细节。建议调整参数：

• 环境光可以调到0.3~0.5，保证场景有基础亮度：

  this.ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.4);
  

• 点光源可以调到0.8~1.2，还可以调整它的位置，让光线能覆盖到两个平面：

  this.light = new THREE.PointLight(0xFFFFFF, 1.0);
  this.light.position.set(1.5, 0, 2); // 把点光源放在两个平面中间上方，确保都能照到
  

3. 确认颜色变量的取值是否正确 #

检查下this.white和this.black是不是正确的十六进制值：

• 纯白色是0xFFFFFF
• 纯黑色是0x000000
  要是这两个变量不小心设成了浅灰（比如0xEEEEEE）或者深灰，那肯定达不到你想要的黑白对比效果。

4. 额外小检查：平面的法线方向 #

有时候平面颜色异常是因为法线方向不对（比如背面朝向镜头，而材质默认不渲染背面），可以临时开启双面渲染验证：

// 在创建材质时加上这行
material.side = THREE.DoubleSide;

不过这个一般是平面看不见的情况才需要，如果你能看到平面但颜色不对，这个可以放在最后排查。

按照上面的步骤调整后，应该就能得到你预期的黑白平面效果啦！

内容的提问来源于stack exchange，提问作者Bálint Réthy