使用 Three.js 加载图像纹理时出现黑屏

Question

黑屏发生在这个脚本中：

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 );
var texture = new THREE.TextureLoader().load( './annie-spratt-kG-ZwDuQ8ME-unsplash.jpg' );
var material = new THREE.MeshBasicMaterial( { map: texture } );
 mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

renderer.render(scene, camera,mesh);

我明确地执行此操作，但出现黑屏并且图像无法加载。我该如何解决这个问题？

Answer 1

您可以在加载纹理之前渲染场景。尝试使用以下方法：

const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 1000);
scene.add(camera);

const geometry = new THREE.PlaneGeometry(500, 500);
const texture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/uv_grid_opengl.jpg', render);
const material = new THREE.MeshBasicMaterial({
  map: texture
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

function render() {

  renderer.render(scene, camera);

}

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.131.3/build/three.min.js"></script>
<div id="container">

</div>