使用three.js创建带世界地图的球体时出现黑屏问题排查

问题描述 #

我正在使用Three.js制作带有世界地图的球体，但输出结果仅显示黑屏（截图：）。使用的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
        <script>
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
            camera.position.set( 0, 0, 50 );
            camera.lookAt( 0, 0, 0 );

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            const geometry = new THREE.SphereGeometry( 15, 32, 16 );
            const texture = new THREE.TextureLoader().load( 'C:\\Users\\pc\\Desktop\\Lines\\land_ocean_ice_cloud_2048.jpg' );
            const material = new THREE.MeshBasicMaterial( { map: texture } );
            const sphere = new THREE.Mesh( geometry, material );
            scene.add( sphere );

            function animate() 
            {
                requestAnimationFrame( animate );
                sphere.rotation.x += 0.01;
                sphere.rotation.y += 0.01;
                renderer.render( scene, camera );
            };
            animate();
        </script>
    </body>
</html>

无法解释为何代码无法渲染球体，请问问题出在哪里？

问题原因与解决方法 #

1. 本地文件跨域限制 #

直接使用本地绝对路径C:\\Users\\pc\\Desktop\\Lines\\land_ocean_ice_cloud_2048.jpg加载纹理，浏览器会因跨域安全规则阻止访问本地文件系统资源。

解决：

• 将网页和纹理图片放在同一文件夹，通过本地服务器（如VS Code的Live Server插件、http-server工具）运行页面
• 使用相对路径加载纹理：

  const texture = new THREE.TextureLoader().load( './land_ocean_ice_cloud_2048.jpg' );
  

2. 纹理异步加载未处理 #

TextureLoader.load()是异步操作，代码中直接创建材质并渲染时，纹理可能还未加载完成，导致材质显示黑色。

解决：
通过加载回调确保纹理就绪后再创建球体：

const geometry = new THREE.SphereGeometry( 15, 32, 16 );
const textureLoader = new THREE.TextureLoader();
textureLoader.load('./land_ocean_ice_cloud_2048.jpg', function(texture) {
    const material = new THREE.MeshBasicMaterial( { map: texture } );
    const sphere = new THREE.Mesh( geometry, material );
    scene.add( sphere );
});

3. 旧版本Three.js兼容性问题 #

你使用的r79版本是非常老旧的版本，存在大量API更新和已知问题，可能导致渲染异常。

解决：
替换为较新的稳定版本，比如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r160/three.min.js"></script>

快速验证方法 #

可以临时去掉纹理，用纯色材质测试球体是否能正常渲染：

const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

如果能看到绿色旋转球体，说明核心渲染逻辑正常，问题确实出在纹理加载环节。

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