three.js加载模型

在Three.js中加载模型通常使用GLTFLoader，OBJLoader或FBXLoader等加载器。以下是使用GLTFLoader加载模型的示例代码：

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
// 场景、摄像机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 添加OrbitControls，允许用户通过鼠标移动来 orbits the camera around the object
const controls = new OrbitControls(camera, renderer.domElement);
 
// 加载GLTF模型
const loader = new GLTFLoader();
loader.load('path/to/your/model.gltf', (gltf) => {
  scene.add(gltf.scene);
}, undefined, (error) => {
  console.error(error);
});
 
// 添加平行光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls.update(); // 更新OrbitControls
}
 
animate();

确保将'path/to/your/model.gltf'替换为实际模型的路径。这段代码创建了一个场景、摄像机、渲染器和一个简单的平行光源，并使用GLTFLoader加载了一个GLTF格式的模型，并将其添加到了场景中。最后，提供了一个简单的渲染循环和用户控制（通过OrbitControls）。