Three.js GLB和GLTF模型加载指南

2023-11-05 02:48:05

如何在 Three.js 中加载和渲染 GLB/GLTF 模型

在 Three.js 中，加载和渲染 GLB/GLTF 模型是一个必不可少的任务。这些格式以其效率和压缩能力而闻名，使其非常适合在网页上展示 3D 模型。在本指南中，我们将深入探讨使用原生 JavaScript 和 GLTFLoader 加载 GLB/GLTF 模型的两种方法。

原生 JavaScript

1. 初始化

首先，导入 Three.js 库，创建场景和相机，这些元素负责容纳 3D 模型和提供观察视角。

import * as THREE from 'three';

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

2. 加载模型

使用 GLTFLoader 加载 GLB/GLTF 模型，该模型会自动添加到场景中。

const loader = new THREE.GLTFLoader();
loader.load('./path/to/model.glb', (gltf) => {
  scene.add(gltf.scene);
});

3. 渲染场景

使用 WebGLRenderer 渲染场景，并将渲染结果显示在画布上。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

animate();

GLTFLoader

1. 初始化

除了原生 JavaScript，还可以使用更高级的 GLTFLoader 加载模型。该加载器支持更广泛的 GLTF 功能，包括动画和材质。

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

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

const loader = new GLTFLoader();

2. 加载模型

使用 GLTFLoader 加载 GLB/GLTF 模型。

loader.load('./path/to/model.glb', (gltf) => {
  scene.add(gltf.scene);
});

3. 渲染场景

与原生 JavaScript 方法相同，使用 WebGLRenderer 渲染场景。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

animate();

代码示例：使用原生 JavaScript 加载 GLB 模型

<html>
<head>
  
  <script src="./three/build/three.js"></script>
</head>
<body>
  <canvas id="webgl-output"></canvas>
  <script>
    // Initialize
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#webgl-output') });
    renderer.setSize(window.innerWidth, window.innerHeight);

    // Load the model
    const loader = new THREE.GLTFLoader();
    loader.load('./path/to/model.glb', (gltf) => {
      scene.add(gltf.scene);
    });

    // Animation loop
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>