three.js加载gltf文件过程以及遇到的问题

在Three.js中加载.gltf文件通常使用GLTFLoader。以下是加载.gltf文件的基本步骤以及可能遇到的问题：

1. 引入GLTFLoader：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

2. 创建GLTFLoader实例并加载.gltf文件：

const loader = new GLTFLoader();
loader.load(
    'models/gltf/scene.gltf',
    (gltf) => {
        scene.add(gltf.scene);
    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    (error) => {
        console.error('An error happened', error);
    }
);

可能遇到的问题及解决方法：

• 跨域问题：如果你的.gltf文件托管在不同的域上，你可能会遇到跨域问题。解决方法是在你的HTTP服务器上设置适当的CORS策略，或者在支持CORS的服务器上托管你的文件。
• 资源加载问题：检查控制台是否有加载资源失败的信息。如果有，确保所有相关的资源都可以通过相对于.gltf文件的路径找到。
• 内存泄漏：如果你的场景中有多个.gltf模型，并且你注意到内存使用量在加载新模型后不断增加，可能是因为旧的模型没有被垃圾收集器正确回收。确保在不需要模型时从场景中移除它，并调用loader.dispose()释放不再使用的资源。
• 动画播放问题：如果.gltf文件包含动画，确保调用mixer.update(clock.getDelta());在每一帧更新动画。

确保你的Three.js库包含了GLTFLoader，如果不包含，你可能需要引入GLTFLoader的例子模块（如上面代码中three/examples/jsm/loaders/GLTFLoader.js）或者使用适当的模块构建工具来包含它。