Three.js MeshPhongMaterial立方体无光照效果问题求助

以下是几个核心排查方向：

• 确认光源已添加到场景
  常见疏漏：创建PointLight/AmbientLight后未执行scene.add(light)，导致光源并未参与场景渲染。检查代码中是否存在这一步。

• 检查MeshPhongMaterial属性配置
  该材质依赖光照计算，确保：

  • color未设为纯黑，且emissive不是全黑（emissive是自发光色，全黑时完全依赖外部光照）
  • shininess无需设为0（虽不会直接导致全黑，但会丢失高光效果）
    示例配置：

  const material = new THREE.MeshPhongMaterial({
    color: 0xcccccc,
    shininess: 20
  });
  

• 验证相机位置与视角
  若相机距离过近或视角完全偏离立方体，可能呈现全黑状态。可重置相机参数测试：

  camera.position.set(4, 4, 4);
  camera.lookAt(0, 0, 0);
  

• 确保渲染循环正常运行
  旋转立方体时，需在requestAnimationFrame回调中持续调用renderer.render(scene, camera)，否则场景不会实时更新，光照变化无法体现。标准渲染循环示例：

  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  animate();
  

• 检查光源强度与位置
  若光源intensity设为0，或位置与立方体完全重合/过远，都会导致光照失效。比如调整PointLight位置：

  const light = new THREE.PointLight(0xffffff, 1.2);
  light.position.set(3, 3, 3);
  scene.add(light);
  

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