How to properly load texture and apply to mesh in threeJS?

Question

JavaScript

I don’t understand what the problem is, you need to load the texture onto the sphere, but errors fly out.

Here is my code, in html only canvas(id="scene") :

(function(root,doc){

let SCENE, CAMERA, RENDERER, WIDTH, HEIGHT;

let stats = new Stats();stats.showPanel( 0 );doc.body.appendChild( stats.dom );


function init(){

  WIDTH = root.innerWidth; HEIGHT = root.innerHeight;

  // basic
  SCENE = new THREE.Scene();

  CAMERA = new THREE.PerspectiveCamera( 75, WIDTH/HEIGHT, 0.1, 1000 );
  CAMERA.position.z = 500;

  RENDERER = new THREE.WebGLRenderer({canvas:document.getElementById('scene')});
  RENDERER.setSize( WIDTH, HEIGHT );

  root.addEventListener('resize',resize);

  // НАЧАЛО ПРОБЛЕМЫ >

  let texture = new THREE.TextureLoader().load('textures/earth.jpg');

  let geometry = new THREE.SphereGeometry( 200, 30, 30 ),
      material = new THREE.MeshBasicMaterial( texture ),
      cube = new THREE.Mesh( geometry, material );

  // КОНЕЦ ПРОБЛЕМЫ <

  SCENE.add( cube );

  render();

  function render() {
    stats.begin();


    cube.rotation.x += 0.001;
    cube.rotation.y += 0.01;

    RENDERER.render(SCENE, CAMERA);


    stats.end();
    requestAnimationFrame( render );
  };

  function resize(){

    WIDTH = root.innerWidth; HEIGHT = root.innerHeight;

    RENDERER.setSize( WIDTH, HEIGHT );

    CAMERA.aspect = WIDTH / HEIGHT;

    CAMERA.updateProjectionMatrix();
  }

}

init();

})(this,document);

You can write your own code, the main thing for me is that it works well :)

Answer 1

let material = new THREE.MeshBasicMaterial({map: texture});