threejs 加载gltf

要在three.js中加载gltf模型，需要使用GLTFLoader。首先，你需要在HTML文档中引入three.js和GLTFLoader的javascript文件，如下所示：

<script src="https://cdn.jsdelivr.net/npm/three@0.124.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.124.0/examples/js/loaders/GLTFLoader.js"></script>

然后，你可以使用以下代码加载gltf模型：

// 创建场景、相机和渲染器
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);

// 创建灯光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

// 加载gltf模型
const loader = new THREE.GLTFLoader();
loader.load(
  // 模型路径
  'models/robot/robot.gltf',
  // 加载成功的回调函数
  function (gltf) {
    // 将模型添加到场景中
    scene.add(gltf.scene);
  },
  // 加载进度的回调函数
  function (xhr) {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  // 加载错误的回调函数
  function (error) {
    console.error(error);
  }
);

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

在上面的代码中，我们首先创建了一个场景、相机和渲染器，并添加了一个环境光。然后，我们使用GLTFLoader加载了一个gltf模型文件，并在回调函数中将其添加到场景中。最后，我们添加了一个渲染循环，以便在每一帧中更新场景并渲染场景。

在加载gltf模型时，我们需要传递四个参数给GLTFLoader.load()方法：

- 模型路径：要加载的gltf模型文件的路径。
- 加载成功的回调函数：当模型加载成功时调用的函数。
- 加载进度的回调函数：在加载过程中持续调用的函数，用于跟踪加载进度。
- 加载错误的回调函数：在加载过程中发生错误时调用的函数。