引言
Three.js 是一个强大的 JavaScript 库,用于在网页上创建和显示 3D 图形。这篇文章将指导你如何在 Three.js 中加载不同格式的 3D 模型。
Three.js 基础
在深入模型加载之前,让我们快速回顾一下 Three.js 的三个基本组件:
场景(Scene):一个场景包含了所有你想渲染的物体,它是所有物体的容器。
相机(Camera):相机决定了哪部分场景会被渲染。
渲染器(Renderer):渲染器用于计算并渲染最终图像。
设置一个基本的 Three.js 项目涉及到创建这三个组件,并将渲染器绑定到 HTML 的 canvas 元素上。
模型格式简介
常见的 3D 模型格式包括 .obj
、.fbx
和 .gltf
。.gltf
(GL Transmission Format)因其紧凑、高效的特性,成为了Web上3D内容的首选格式。相比之下,.obj
是一个较老的格式,通常用于较简单的模型。
模型加载
这里我们使用gltf
模型加载,核心代码如下:
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
let camera, scene, renderer;
let model;
.....
// 初始化模型
function initModel() {
const loader = new GLTFLoader();
loader.load('/src/assets/Soldier.glb', function (gltf) {
model = gltf.scene;
scene.add(model);
}, undefined, function (error) {
console.error('模型加载出错: ', error);
});
}
.....
onMounted(() => {
initModel();
});
这段代码首先导入了所需的 Three.js 和 GLTFLoader。然后展示了如何加载3D模型,然后把模型添加到场景中。
总结
加载 3D 模型是 Three.js 应用的核心部分。通过本文,你应该对如何在 Three.js 中加载不同格式的模型有了基本的了解。不要害怕尝试不同的模型和加载技术,通过实践来完善你的技能。
附加资源