Three.js 加载GLTF模型

要在three.js中正确加载和显示GLTF模型，需要遵循一系列步骤来确保模型的纹理和材质被正确应用。以下是加载GLTF模型的基本步骤：

1. 引入必要的three.js模块：
   引入了GLTFLoader模块，用来加载GLTF格式模型的类。

2. 创建加载器实例：
   使用GLTFLoader创建一个新的加载器实例。

3. 加载模型：
   调用加载器的load方法，并传入模型的URL。load方法接受一个回调函数，该函数在模型加载完成时被调用。

4. 添加模型到场景：
   在加载回调函数中，将模型（通常是gltf.scene）添加到场景中。

5. 配置相机和渲染器：
   设置相机的参数，创建一个渲染器实例，并将其添加到DOM中。

6. 添加光照：
   为了确保模型的材质能够正确显示，您需要在场景中添加至少一个光源。

7. 渲染循环：
   设置一个动画循环，使用requestAnimationFrame来更新渲染器，并连续渲染场景。

下面是一个简化的代码示例，展示了上述步骤：

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
scene.background = new THREE.Color("0xcccccc")
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 20, 30);
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 半球光
const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1);
scene.add(hemisphereLight);
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 10, 0);
scene.add(directionalLight);

// 创建加载器实例
const loader = new GLTFLoader();

// 加载gltf模型
loader.load('models/by727.gltf', (gltf) => {
  scene.add(gltf.scene);
});

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();