三.TextureLoader.load 不是构造函数

Question

I try to do an earth with Three.js for making an "Where ISS at"-like app. But when I wanna add the textures, I get this error back:

Unchaught TypeError: THREE.TextureLoader.load is not a function

here is my code from main.js file:

import * as THREE from "three";
import { OrbitControls } from "orbit-controls";

let scene = new THREE.Scene();
const canvas = document.querySelector(".webgl");

const fov = 60;
const aspect = window.innerWidth / window.innerHeight;
const near = 0.1;
const far = 1000;

let camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
scene.add(camera);

let renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1);
renderer.autoClear = false;
renderer.setClearColor(0x000000, 0.0);

const texture = new THREE.TextureLoader.load("assets/earthmap1k.jpg");

const earthGeometry = new THREE.SphereGeometry(0.8, 32, 32);
const earthMaterial = new THREE.MeshPhongMaterial({
  roughness: 1,
  metalness: 0,
  map: texture,
});
const earthMesh = new THREE.Mesh(earthGeometry, earthMaterial);
scene.add(earthMesh);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(5, 3, 5);
scene.add(pointLight);

const animate = () => {
  requestAnimationFrame(animate);
  earthMesh.rotation.y -= 0.0015;
  render();
};

const render = () => {
  renderer.render(scene, camera);
};

animate();

It works perfectly until I assign texture variable to earthMaterial.map What should I do?

Answer 1

It should be:

const texture = new THREE.TextureLoader().load("assets/earthmap1k.jpg");