Three.js+React开发：几何体存在但光照下球体不显示求助

以下是该问题的高频诱因和对应修复方式：

• 材质使用错误
  若需要球体响应光照，不能使用MeshBasicMaterial——该材质不受光照影响，只会显示纯色块。需要替换为MeshStandardMaterial/MeshLambertMaterial等支持光照计算的材质，同时确认材质的opacity不为0、transparent属性未被误开，避免材质透明不可见。
• 光源配置失效
  • 光源intensity数值为0或过低，没有足够亮度照亮球体
  • 光源位置与球体重合、或完全处于球体背对相机的一侧，没有光线投射到可见面
  • 仅开启了投射阴影的聚光/平行光，没有加低强度环境光补光，会导致球体整体全黑
• 基础渲染链路异常
  • 创建好的球体网格没有调用scene.add()加入场景，或者球体坐标超出当前相机的视锥体裁剪范围
  • 相机未通过lookAt对准球体，初始视角完全偏移
  • 渲染器生成的canvas没有正确挂载到React的DOM节点上，或canvas宽高被设为0导致无内容输出
• React生命周期冲突
  React 18严格模式下useEffect会执行两次，如果没有在effect的清理回调中销毁已创建的Three.js实例、终止渲染循环，会出现上下文重复创建、渲染状态错乱的问题。

可直接参考的核心实现代码：

import { useEffect, useRef } from 'react';
import * as THREE from 'three';

export default function ThreeMars() {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;
    // 初始化渲染基础实例
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      containerRef.current.clientWidth / containerRef.current.clientHeight,
      0.1,
      1000
    );
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(containerRef.current.clientWidth, containerRef.current.clientHeight);
    containerRef.current.appendChild(renderer.domElement);

    // 创建支持光照响应的火星球体
    const sphereGeometry = new THREE.SphereGeometry(2, 32, 32);
    const sphereMaterial = new THREE.MeshStandardMaterial({
      color: '#c1440e',
      roughness: 0.8,
      metalness: 0.1
    });
    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.castShadow = true;
    sphere.receiveShadow = true;
    scene.add(sphere);

    // 配置光源：弱环境光补光+平行光作为主光源
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
    scene.add(ambientLight);
    const dirLight = new THREE.DirectionalLight(0xffffff, 1.2);
    dirLight.position.set(5, 3, 5);
    dirLight.castShadow = true;
    scene.add(dirLight);

    // 调整相机位置对准球体
    camera.position.z = 6;
    camera.lookAt(sphere.position);

    // 渲染循环
    let animationId = null;
    const animate = () => {
      animationId = requestAnimationFrame(animate);
      sphere.rotation.y += 0.005;
      renderer.render(scene, camera);
    };
    animate();

    // 清理逻辑适配React严格模式
    return () => {
      cancelAnimationFrame(animationId);
      if (containerRef.current?.contains(renderer.domElement)) {
        containerRef.current.removeChild(renderer.domElement);
      }
      sphereGeometry.dispose();
      sphereMaterial.dispose();
      renderer.dispose();
    };
  }, []);

  return <div ref={containerRef} style={{ width: '100%', height: '100vh' }} />;
}

快速排查技巧：临时把球体材质替换为MeshBasicMaterial({color: 0xff0000})，如果此时能看到红色球体，说明几何体、相机、渲染挂载逻辑正常，问题集中在光源和光照材质配置上；如果换基础材质仍看不到球体，优先排查场景挂载、相机位置、canvas尺寸问题。

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