How to apply a map texture to a sphere in three.js?

Question

JavaScript

The sphere itself

let scene = new THREE.Scene();
      let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 50);

      let renderer = new THREE.WebGLRenderer();

      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      let geometry = new THREE.SphereBufferGeometry( 10, 32, 32, 0, 6.3, 6, 6.3 );
      let material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
      let sphere = new THREE.Mesh( geometry, material );
      scene.add( sphere );

      camera.position.z = 30;

      console.log(geometry)


      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        sphere.rotation.x += 0.01;
        sphere.rotation.y += 0.01;
      }
      animate();

Answer 1

// instantiate a loader
var loader = new THREE.TextureLoader();

// load a resource
loader.load(
  // resource URL
  'textures/land_ocean_ice_cloud_2048.jpg',

  // onLoad callback
  function ( texture ) {
    // in this example we create the material when the texture is loaded
    var material = new THREE.MeshBasicMaterial( {
      map: texture
     } );
  },

  // onProgress callback currently not supported
  undefined,

  // onError callback
  function ( err ) {
    console.error( 'An error happened.' );
  }
);