# 使用Three.js加载和自适应glTF模型

在浏览器中创建和展示3D动画时，Three.js无疑是一个强大的库。它为我们提供了许多工具和功能，使得创建复杂的3D场景成为可能。其中，Three.js中的GLTFLoader可以让我们轻松地加载glTF格式的3D模型。但问题来了，我们如何确保加载的模型能在任何情况下都正确展示，不会过大或者过小呢？接下来的内容将为你提供一个答案。


## 初始化场景

首先，我们需要初始化一个基础的Three.js场景。这包括创建场景（scene）、相机（camera）和渲染器（renderer）：

Language
Copy code
```javascript
let scene, camera, renderer;
let gltfLoader;

init();
loadModel();

function init() {
  // 创建场景
  scene = new THREE.Scene();

  // 创建相机
  const aspectRatio = window.innerWidth / window.innerHeight;
  camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);

  // 创建渲染器
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // 创建GLTF加载器
  gltfLoader = new THREE.GLTFLoader();
}
```

这个阶段，我们也创建了一个GLTFLoader，它将被用来加载我们的glTF模型。

## 加载和适应模型

接下来，我们使用GLTFLoader来加载模型。我们需要注意的是，模型可能会有各种各样的大小，因此我们需要找到一种方式来自动适应它们。这就是下面代码的工作：

Language
Copy code
```javascript
function loadModel() {
  gltfLoader.load('path_to_your_model.gltf', function(gltf) {
    // 加载模型
    const model = gltf.scene;

    // 将模型添加到场景中
    scene.add(model);

    // 计算模型的大小
    const box = new THREE.Box3().setFromObject(model);
    const size = box.getSize(new THREE.Vector3()).length();
    const center = box.getCenter(new THREE.Vector3());

    // 调整相机的位置，使之可以看到整个模型
    camera.position.x = center.x;
    camera.position.y = center.y;
    camera.position.z = size * 1.5; // 1.5 是一个合理的因子，可能需要根据你的模型进行微调
    camera.lookAt(center);

    animate();
  }, undefined, function(error) {
    console.error(error);
  });
}
```

在这里，我们首先加载了模型，并将其添加到了场景中。然后，我们计算了模型的大小和中心点。有了这些信息，我们就可以调整相机的位置，使其位于模型的中心，并且足够远，可以看到整个模型。

## 动画渲染

最后，我们创建一个动画函数，使得我们的场景能持续渲染：

Language
Copy code
```

javascript
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
```

通过上述的代码，我们不仅能在Three.js中加载glTF模型，还能使模型自适应场景的大小。这使我们无需担心模型的尺寸问题，可以更专注于其他的3D场景建设工作。注意，你需要将 `'path_to_your_model.gltf'` 替换为你的 glTF 模型的实际路径。

## 总结

Three.js和GLTFLoader为我们提供了一种简便的方式来加载和展示glTF模型。希望这篇文章对你有所帮助，也欢迎留言提供你的想法和建议。