Three.js：让glb、gltf模型生动起来

2023-10-31 16:46:09

在 Three.js 中加载、渲染和操作 glb/gltf 模型的综合指南

准备好踏上将静态 3D 模型转变为动态交互杰作的旅程了吗？

Three.js ，一个功能强大的开源 JavaScript 库，赋予您在浏览器中创建引人入胜的 3D 图形的能力。而 glb 和 gltf 是两种广受认可的 3D 模型格式，可捕捉模型的几何形状、纹理和动画。

本教程将引导您一步步使用 Three.js 加载和呈现 glb 或 gltf 模型，让它们在您的网页上栩栩如生。无论您是初学者还是经验丰富的开发人员，本指南都将提供清晰、全面的步骤和代码示例。

准备就绪

首先，确保您的项目已安装 Three.js。您可以使用 npm 或 Yarn 进行安装，也可以直接从 Three.js 官方网站下载。

npm install three

接下来，将您的 glb 或 gltf 模型文件放置在项目的目录中。您可以从网上下载或使用 3D 建模软件自行创建。

创建场景

让我们从创建 Three.js 场景开始。您可以使用 <canvas> 元素来实现这一点：

<canvas id="myCanvas"></canvas>

接着，使用 Three.js 创建一个场景对象：

const scene = new THREE.Scene();

加载模型

现在，您需要使用 Three.js 的 GLTFLoader 来加载 glb 或 gltf 模型文件：

const loader = new THREE.GLTFLoader();

loader.load('path/to/model.glb', function (gltf) {

    scene.add(gltf.scene);

});

创建相机

接下来，您需要创建一个相机对象。您可以使用 PerspectiveCamera 或 OrthographicCamera ，我们这里使用 PerspectiveCamera ：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

创建渲染器

现在，您需要创建一个渲染器对象。您可以使用 WebGLRenderer 或 CanvasRenderer ，我们这里使用 WebGLRenderer ：

const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

渲染场景

最后，您可以使用渲染器来呈现场景：

renderer.render(scene, camera);

此时，您的 glb 或 gltf 模型应该已经成功加载并呈现在浏览器中。

动画

如果您希望模型动起来，可以使用 Three.js 的动画系统。您可以使用 Tween.js 或 gsap.js 等第三方库创建动画，也可以直接使用 Three.js 的动画系统：

const mixer = new THREE.AnimationMixer(gltf.scene);
const action = mixer.clipAction(gltf.animations[0]);
action.play();

mixer.update(0.01);

交互

如果您想让模型与用户进行交互，可以使用 Three.js 的交互系统。您可以使用 Raycaster 来检测鼠标事件，也可以使用 OrbitControls 来控制相机的移动和旋转：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

document.addEventListener('mousemove', function (event) {

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

});

const controls = new THREE.OrbitControls(camera, renderer.domElement);

恭喜！您现在已掌握使用 Three.js 加载、渲染和操控 glb 或 gltf 模型的知识。您可以将这些模型整合到您的网页中，打造令人惊叹的 3D 交互式体验。

常见问题解答

如何导入带有纹理的模型？

加载模型时，确保将纹理文件与模型文件放在同一目录中。Three.js 将自动加载纹理。
如何更改模型的颜色？

您可以使用 MeshStandardMaterial 来更改模型的材质，并使用 color 属性设置颜色。
如何检测模型上的点击事件？

使用 Raycaster 检测用户点击的模型上的位置，然后执行您希望采取的操作。
如何创建模型的阴影？

您需要使用 DirectionalLight 或 PointLight 来创建灯光，并使用 ShadowMap 来启用阴影。
如何优化模型的性能？

您可以使用 LOD（视距层次） 来根据相机的距离加载模型的不同细节级别，从而优化性能。