使用Three.js加载gltf模型

一、什么是Three.js

Three.js是一个用于在Web上渲染3D图形的JavaScript库。它使用WebGL技术来实现硬件加速的3D图形渲染，可以在现代浏览器上实现高性能的交互式3D应用程序。

Three.js提供了一组简单易用的API，使得开发者可以轻松创建各种各样的3D场景。它支持加载和渲染模型、贴图、灯光效果等，提供了强大的图形处理功能，方便开发者进行3D图形开发。

二、什么是gltf模型

gltf是一种用于3D场景交付的文件格式。它是一种基于JSON的文件格式，用来描述3D模型和场景数据。gltf模型可以包含几何形状、材质、纹理、动画等信息，支持多种3D软件工具导出和导入。

gltf模型相比其他格式来说，有以下优势：

文件大小较小：gltf使用二进制格式存储，相比其他文本文件格式可以大幅减小文件大小，节省带宽和加载时间。
高性能：gltf采用基于WebGL的渲染引擎，支持硬件加速，可以在浏览器中实现高性能的3D渲染。
兼容性好：gltf是一种开放标准，被广泛支持，可以在各种3D软件工具和平台上使用。

三、如何加载gltf模型

在使用Three.js加载gltf模型之前，我们需要先准备好所需的文件。通常一个gltf模型由多个文件组成，包括主文件（.gltf）、二进制数据文件（.bin）和相关的纹理文件（.jpg、.png等）。

首先，我们需要在HTML页面中引入Three.js和gltfLoader.js文件。gltfLoader.js是一个用于加载gltf模型的Three.js插件，使用前需要先进行加载。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>加载gltf模型</title>
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.js"></script>
</head>

<body>
  <script>
    // 在这里编写加载gltf模型的代码
  </script>
</body>

</html>

接下来，我们需要创建一个Three.js场景和加载gltf模型的代码块。可以将以下代码填写在上面的script标签中。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var loader = new THREE.GLTFLoader();
loader.load('model/sample.gltf', function (gltf) {
  scene.add(gltf.scene);
}, undefined, function (error) {
  console.error(error);
});

var animate = function () {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

animate();

在上述代码中，我们创建了一个场景（scene）、相机（camera）和渲染器（renderer）。然后，使用GLTFLoader加载gltf模型，并将模型添加到场景中。

最后，通过调用render方法在循环中渲染场景，实现动画效果。

四、加载gltf模型的示例

假设我们有一个名为sample.gltf的gltf模型文件。下面是一个完整的加载gltf模型的示例。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var loader = new THREE.GLTFLoader();
loader.load('model/sample.gltf', function (gltf) {
  scene.add(gltf.scene);
}, undefined, function (error) {
  console.error(error);
});

var animate = function () {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

animate();

在这个示例中，我们假设sample.gltf文件与HTML文件在同一个目录下，并且将模型添加到场景中，并通过渲染器渲染出来。