Black screen appears while loading an image texture with Three.js

Question

The black screen happens within this script:

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);

I'm doing this explicitly but the black screen comes up and the image does not load. How do I solve this problem?

Answer 1

You render your scene before the texture has been loaded. Try it with this approach:

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/[email protected]/build/three.min.js"></script>
<div id="container">

</div>