three.js gltf 例子

three.js是一个优秀的JavaScript 3D图形库，可用于创建令人惊叹的WebGL场景和动画。GLTF是一种以JSON格式编写的3D模型格式，可以降低Web3D的大小，并提高处理性能。three.js可以直接处理GLTF格式的3D模型。

three.js提供了许多使用GLTF格式模型的示例。例如，我们可以使用GLTFLoader将GLTF格式的模型导入three.js场景中。在渲染器中设置场景的灯光和相机，一个简单的三维场景就有了。我们可以使用三维模型的材质属性、动画属性、缩放属性等来进行一些操作。three.js还提供了许多高级功能，例如可交互性、物理引擎等。我们可以用官方文档提供的方法和实例来学习这些功能，并用它们来构建自己的3D网站。

总结来说，在使用three.js进行3D场景的开发时，我们可以直接使用GLTF格式的模型并借助three.js提供的丰富的功能来构建出精美、流畅的3D场景。

相关问题

three.js读取gltf文件

### 使用 Three.js 加载和解析 GLTF 文件

为了使用 Three.js 加载并解析 GLTF 文件，可以利用 `THREE.GLTFLoader` 类。此工具类专门用于处理 `.gltf` 和 `.glb` 格式的文件[^1]。

下面是一个简单的例子来展示如何加载一个 GLTF 模型：

import * as THREE from 'three';
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);
camera.position.z = 5;

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

// 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5).normalize();
scene.add(light);

// 实例化 GLTFLoader 并加载模型
new GLTFLoader().load(
    // 资源路径 URL 或相对路径
    '/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf',
    function (gltf) {
        // 成功回调函数，在这里添加模型到场景中
        scene.add(gltf.scene);
        
        // 可选：调整模型位置或其他属性
        gltf.scene.position.y = -2;
    },
    undefined,
    function (error) {
        console.error(error); // 错误处理
    }
);

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

上述代码片段展示了创建基本的 Three.js 场景，并通过 `GLTFLoader` 来异步加载指定路径下的 GLTF 文件。一旦加载完成，该模型会被自动加入到当前场景之中。

使用 Three.js 加载 3D 模型 glTF。

你可以使用 Three.js 来加载 glTF 格式的 3D 模型。首先，确保你已经引入了 Three.js 库。然后，按照以下步骤加载 glTF 模型：

1. 创建一个场景(scene)和一个相机(camera)：

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

2. 创建一个渲染器(renderer)，并设置其大小和渲染目标：

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

3. 加载 glTF 模型：

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

4. 添加光源和其他效果（可选）：

var light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

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

5. 更新相机和场景，并渲染场景：

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

function resize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', resize, false);

animate();

这是一个基本的加载和渲染 glTF 模型的例子。你可以根据自己的需求进一步扩展和调整。希望能对你有所帮助！