如何使用threejs加载gltf模型

发布时间：2021-12-03 14:33:10 作者：小新
来源：亿速云阅读：810

如何使用Three.js加载GLTF模型

Three.js 是一个基于 WebGL 的 JavaScript 库，用于在浏览器中创建和显示 3D 图形。GLTF（GL Transmission Format）是一种用于 3D 模型的高效传输格式，广泛用于 Web 3D 应用。本文将详细介绍如何使用 Three.js 加载 GLTF 模型，并展示如何在场景中使用这些模型。

1. 准备工作

在开始之前，确保你已经安装了 Three.js 库。你可以通过 npm 安装，也可以直接通过 CDN 引入。

1.1 使用 npm 安装

npm install three

1.2 使用 CDN 引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

2. 创建 Three.js 场景

在加载 GLTF 模型之前，我们需要创建一个基本的 Three.js 场景。这包括场景（Scene）、相机（Camera）和渲染器（Renderer）。

// 创建场景
const scene = new THREE.Scene();

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

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

3. 加载 GLTF 模型

Three.js 提供了 GLTFLoader 类来加载 GLTF 模型。首先，我们需要引入 GLTFLoader。

3.1 引入 GLTFLoader

如果你使用 npm 安装 Three.js，可以通过以下方式引入 GLTFLoader：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

如果你使用 CDN 引入 Three.js，可以通过以下方式引入 GLTFLoader：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/jsm/loaders/GLTFLoader.js"></script>

3.2 加载 GLTF 模型

接下来，我们可以使用 GLTFLoader 加载 GLTF 模型。假设我们有一个名为 model.gltf 的模型文件。

const loader = new GLTFLoader();

loader.load('path/to/model.gltf', function (gltf) {
    const model = gltf.scene;
    scene.add(model);
}, undefined, function (error) {
    console.error(error);
});

3.3 调整模型位置和大小

加载模型后，可能需要调整模型的位置、旋转和缩放以适应场景。

model.position.set(0, 0, 0); // 设置模型位置
model.rotation.set(0, Math.PI / 2, 0); // 设置模型旋转
model.scale.set(1, 1, 1); // 设置模型缩放

4. 添加光照

为了使模型看起来更真实，我们需要在场景中添加光照。Three.js 提供了多种光源类型，如环境光（AmbientLight）、平行光（DirectionalLight）、点光源（PointLight）等。

// 添加环境光
const ambientLight = new THREE.AmbientLight(0x404040); // 柔和的白光
scene.add(ambientLight);

// 添加平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

5. 渲染循环

为了持续渲染场景，我们需要创建一个渲染循环。这个循环会不断调用渲染器的 render 方法，更新场景中的动画和交互。

function animate() {
    requestAnimationFrame(animate);

    // 在这里添加动画逻辑
    // 例如：model.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

6. 处理窗口大小变化

当浏览器窗口大小发生变化时，我们需要调整相机和渲染器的尺寸，以确保场景的正确显示。

window.addEventListener('resize', function () {
    const width = window.innerWidth;
    const height = window.innerHeight;

    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});

7. 完整代码示例

以下是一个完整的代码示例，展示了如何使用 Three.js 加载 GLTF 模型并在场景中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js GLTF Model Example</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/jsm/loaders/GLTFLoader.js"></script>
    <script>
        // 创建场景
        const scene = new THREE.Scene();

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

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

        // 加载 GLTF 模型
        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);
        });

        // 添加光照
        const ambientLight = new THREE.AmbientLight(0x404040);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(1, 1, 1).normalize();
        scene.add(directionalLight);

        // 渲染循环
        function animate() {
            requestAnimationFrame(animate);

            // 在这里添加动画逻辑
            // 例如：model.rotation.y += 0.01;

            renderer.render(scene, camera);
        }

        animate();

        // 处理窗口大小变化
        window.addEventListener('resize', function () {
            const width = window.innerWidth;
            const height = window.innerHeight;

            renderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        });
    </script>
</body>
</html>

8. 总结

通过以上步骤，你已经学会了如何使用 Three.js 加载 GLTF 模型并在场景中显示。Three.js 提供了强大的功能和灵活的 API，使得在 Web 中创建复杂的 3D 场景变得简单。你可以进一步探索 Three.js 的其他功能，如材质、纹理、动画等，以创建更加丰富和交互性强的 3D 应用。