为何MeshPhongMaterial无法正常渲染纹理地图？

1. 核心原因：MeshPhongMaterial必须依赖光照 #

MeshPhongMaterial是受光照影响的材质，和MeshBasicMaterial（不受光照、直接显示纹理/颜色）的渲染逻辑完全不同。如果你的场景里没有添加任何光源，球体就会处于完全黑暗的状态，纹理自然看不到。

添加基础光源即可解决，示例代码：

// 添加方向光源模拟太阳光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 3, 5);
scene.add(directionalLight);

// 可选：添加环境光，让球体暗部也有基础亮度
const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
scene.add(ambientLight);

2. 处理纹理加载的异步问题 #

TextureLoader.load是异步操作，虽然偶尔能碰巧加载完成，但如果材质初始化时纹理还没加载好，也会导致纹理不显示。建议通过回调确保纹理加载完成后再创建材质和模型：

const textureLoader = new THREE.TextureLoader();

textureLoader.load("../img/globe.jpg", (texture) => {
  const earthMaterial = new THREE.MeshPhongMaterial({
    map: texture,
    // 若启用bumpMap，也建议在这里统一处理加载
    // bumpMap: textureLoader.load("../img/earthbump.jpg"),
    // bumpScale: 0.3
  });
  const sphere = new THREE.Mesh(earthGeometry, earthMaterial);
  scene.add(sphere);
  // 加载完成后触发渲染更新
  renderer.render(scene, camera);
});

3. 适配Vite的资源路径规则 #

Vite中静态资源建议放在public目录下（比如public/img/globe.jpg），然后使用根路径引用，避免相对路径的解析问题：

// 根路径引用public下的资源
textureLoader.load("/img/globe.jpg", (texture) => {
  // ...
});

内容的提问来源于stack exchange，提问作者Eli-ott