Three.js中DirectionalLight方向光对圆柱体无光照效果问题求助

问题根因 #

• 错误使用了不受光照影响的MeshBasicMaterial材质：Three.js内置的MeshBasicMaterial为无光照基础材质，仅会渲染设定的固定颜色，不会响应任何场景光源的照射效果。
• 方向光强度设置过低：当前方向光强度仅设为0.1，即便更换支持光照的材质，也很难观测到明显的光照效果。
• 光源位置设置不合理：当前光源和相机在同一z轴方向，照射在圆柱体上的明暗区分度极低。

修复方案 #

按以下步骤修改代码即可看到正常的方向光效果：

1. 将圆柱体的材质替换为支持光照的材质，可选MeshLambertMaterial、MeshPhongMaterial或者MeshStandardMaterial
2. 调高方向光的强度参数，建议设为1~3区间
3. 可适当调整方向光的位置，增强明暗对比效果

核心修改代码 #

// 圆柱体材质修改为支持光照的MeshStandardMaterial
const material = new THREE.MeshStandardMaterial( {color: 0x327322} )

// 调整方向光的强度和位置
const light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(3, 2, 5)
scene.add(light)

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