使用Three.js加载图片纹理时出现黑屏、图片无法加载该如何解决

故障原因 #

• 核心问题1：TextureLoader.load()是异步操作，你调用renderer.render()时图片还未完成加载，首次渲染时材质的纹理为空，导致黑屏
• 核心问题2：renderer.render()方法只需传入场景和相机两个参数，你额外传入的mesh属于无效参数
• 其他可能问题：如果是本地直接打开HTML文件，浏览器同源策略会限制本地图片加载，导致纹理加载失败

解决步骤 #

1. 修正render调用参数，移除多余的mesh参数
2. 两种方案保证纹理加载完成后再渲染：
   • 方案A：在纹理加载的回调函数中触发渲染
   • 方案B：添加requestAnimationFrame动画循环，持续渲染场景，纹理加载完成后会自动在后续帧显示
3. 本地调试需要用本地服务器（比如vscode的Live Server插件）打开页面，避免跨域限制
4. 可选：给材质添加side: THREE.DoubleSide属性，避免面片朝向导致的不可见问题

修正后可运行代码 #

var renderer;
var scene;
var camera;
var mesh;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
//Scene init
scene = new THREE.Scene();
//Camera init
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 1000);
scene.add(camera);

var geometry = new THREE.PlaneGeometry( 500, 500, 10, 10 );
// 加载纹理并在加载完成后触发渲染
new THREE.TextureLoader().load( './annie-spratt-kG-ZwDuQ8ME-unsplash.jpg', function(texture) {
  var material = new THREE.MeshBasicMaterial( { 
    map: texture,
    side: THREE.DoubleSide // 可选，适配正反面显示
  } );
  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
  // 纹理加载完成后再渲染
  renderer.render(scene, camera);
} )

// 也可以选择加动画循环，就不用单独在回调里写render了
// function animate() {
//   requestAnimationFrame(animate);
//   renderer.render(scene, camera);
// }
// animate();

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