开发类ISS追踪应用时Three.js遇TextureLoader.load错误求助

核心错误原因 #

你错误地将TextureLoader的实例化与load方法调用合并为一行代码，load是实例方法，不能直接通过构造函数调用。同时你的OrbitControls导入路径也不符合Three.js官方规范。

修复步骤 #

1. 修正TextureLoader的使用逻辑 #

原错误代码：

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

改为先实例化TextureLoader，再调用其load方法：

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

2. 修正OrbitControls的导入路径 #

Three.js的OrbitControls属于官方附加组件，正确导入路径应为：

import { OrbitControls } from "three/addons/controls/OrbitControls.js";

而非import { OrbitControls } from "orbit-controls";（后者会引入第三方非官方包）。

3. 可选：处理纹理异步加载（避免渲染异常） #

纹理加载是异步操作，可通过回调确保纹理加载完成后再创建网格：

textureLoader.load("assets/earthmap1k.jpg", (loadedTexture) => {
  const earthMaterial = new THREE.MeshPhongMaterial({
    roughness: 1,
    metalness: 0,
    map: loadedTexture,
  });
  const earthMesh = new THREE.Mesh(earthGeometry, earthMaterial);
  scene.add(earthMesh);
});

完整修正后的代码 #

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

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

// 初始化轨道控制器并启用阻尼效果
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;

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 textureLoader = new THREE.TextureLoader();
const texture = 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;
  controls.update(); // 更新阻尼控制器状态
  render();
};

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

animate();

内容的提问来源于stack exchange，提问作者Alin-Alexandru Peter