要在three.js中正确加载和显示GLTF模型，需要遵循一系列步骤来确保模型的纹理和材质被正确应用。以下是加载GLTF模型的基本步骤：
-
引入必要的three.js模块：
引入了GLTFLoader模块，用来加载GLTF格式模型的类。 -
创建加载器实例：
使用GLTFLoader创建一个新的加载器实例。 -
加载模型：
调用加载器的load方法，并传入模型的URL。load方法接受一个回调函数，该函数在模型加载完成时被调用。 -
添加模型到场景：
在加载回调函数中，将模型（通常是gltf.scene）添加到场景中。 -
配置相机和渲染器：
设置相机的参数，创建一个渲染器实例，并将其添加到DOM中。 -
添加光照：
为了确保模型的材质能够正确显示，您需要在场景中添加至少一个光源。 -
渲染循环：
设置一个动画循环，使用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(); 
