Textures

To load textures, Three.js provides a TextureLoader. Optionally, you can use LoadingManager to keep track of the loading progress of the files.

const loadingManager = new THREE.LoadingManager();
const loader = new THREE.TextureLoader(loadingManager);

const earthTexture = loader.load('earth.jpg');

You can then use the texture in your material:

// Setup a geometry
const geometry = new THREE.SphereGeometry(1, 32, 16);

// Setup a material
const material = new THREE.MeshStandardMaterial({
  roughness: 1,
  metalness: 0,
  map: eathTexture,
});

// Setup a mesh with geometry + material
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);