three.JS 加载gltf 模型

three.js是一个流行的JavaScript库，用于创建3D图形和交互式Web内容。加载GLTF（GL Transmission Format）模型在three.js中相对简单，GLTF是一种跨平台的标准文件格式，包含模型几何、纹理、动画等信息。以下是基本步骤：

1. 引入依赖：首先需要在HTML中引入three.js库及其GLTF支持模块。

<script src="https://cdn.jsdelivr.net/npm/three@0.136/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@threejs/gltf-loader@4"></script>

2. 创建场景、相机和渲染器：这是基础的WebGL设置。

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);

3. 加载模型：使用THREE.GLTFLoader从URL加载模型。

const loader = new THREE.GLTFLoader();
loader.load('path/to/model.gltf', function(gltf) {
  const model = gltf.scene; // 获取模型对象
  scene.add(model); // 将模型添加到场景中
}, undefined, function(error) {
  console.error(error);
});

4. 渲染循环：更新和渲染你的场景。

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