如何在 Three.js 中加载并显示一个 GLTF 模型？

Number of views 55
threejs webfrontend

请提供一个完整的示例，展示如何使用 Three.js 加载 GLTF 格式的 3D 模型并将其显示在场景中。

MaKai7
1 Answers

要在Three.js中加载并显示一个GLTF模型，你需要使用THREE.GLTFLoader。下面是一个完整的示例代码，展示了如何加载并显示一个GLTF模型。

首先，确保你已经包含了Three.js库和GLTFLoader库。你可以通过npm安装它们，或者直接从CDN引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<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 light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(5, 5, 5).normalize();
    scene.add(light);

    // 创建GLTF加载器
    var loader = new THREE.GLTFLoader();

    // 加载GLTF模型
    loader.load(
        'path/to/your/model.gltf', // 这里替换为你的模型路径
        function (gltf) {
            scene.add(gltf.scene); // 将模型添加到场景中
        },
        undefined,
        function (error) {
            console.error(error);
        }
    );

    // 设置相机的位置
    camera.position.z = 5;

    // 渲染循环
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();

    // 窗口大小改变时更新渲染器和相机
    window.addEventListener('resize', function () {
        var width = window.innerWidth;
        var height = window.innerHeight;
        renderer.setSize(width, height);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
    });
</script>
</body>
</html>

说明：

  1. 场景、相机和渲染器：创建基本的Three.js环境。
  2. 光源：添加一个方向光以照亮模型。
  3. GLTFLoader：创建一个GLTFLoader实例来加载模型。
  4. 加载模型：调用loader.load()方法加载模型文件，并将加载的场景添加到主场景中。
  5. 动画循环：设置动画循环以持续渲染场景。
  6. 响应窗口大小变化：确保当浏览器窗口大小改变时，渲染器和相机能够正确调整。

确保替换'path/to/your/model.gltf'为你实际的模型文件路径。这个示例假设你的模型是GLTF格式（.gltf或.glb）。

MaKai7