
Three.js的“亲儿子”。Khronos Group(WebGL标准制定者)专为Web和实时应用设计。
模块化设计: .gltf 是JSON描述文件,搭配分离的贴图、二进制数据;.glb 是单个二进制文件,打包所有资源,更方便。
现代特性: 原生支持基于物理的渲染(PBR)材质,这是实现逼真视觉效果的关键。完美支持骨骼和变形动画。
在Three.js中使用:
javascript
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load( 'model.glb', function ( gltf ) {
scene.add( gltf.scene ); // gltf对象包含场景、动画、相机等
});
历史悠久的文本格式。结构简单,每行以关键字(如 v 顶点, vt 纹理坐标, f 面)开头。
功能局限: 仅支持静态网格、UV坐标和基础材质(通过引用 .mtl 文件定义漫反射颜色/贴图等)。不支持动画、节点层次或PBR材质。
在Three.js中使用:
javascript
// 通常需要同时加载OBJ和MTL
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
const mtlLoader = new MTLLoader();
mtlLoader.load('model.mtl', (materials) => {
materials.preload();
const objLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('model.obj', (object) => {
scene.add(object);
});
});
数字内容创作(DCC)工具的“瑞士军刀”。Autodesk的专有格式,用于在Maya、3ds Max、Blender等软件间交换数据。
功能巨无霸: 几乎包含创作环境中的所有信息——复杂的材质系统、所有类型的动画(骨骼、变形、相机)、灯光、相机、完整的场景结构。
在Three.js中的痛点: Three.js官方不直接支持,需使用社区维护的 FBXLoader。文件体积大,加载慢,并且可能因为Three.js与DCC工具的材质系统不匹配,导致导入后外观需要重新调整。
在Three.js中使用:
javascript
import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
const loader = new FBXLoader();
loader.load('model.fbx', (object) => {
scene.add(object);
// 对象可能包含嵌入的动画
});
3D打印的事实标准。仅描述物体的表面几何形状,通过一系列三角面片来定义。
“哑”格式: 不包含任何材质、颜色、纹理或场景信息。只有顶点和法线。
文件臃肿: 文本格式的STL会列出每一个三角形的三个顶点坐标,极其冗余。二进制格式稍好。
在Three.js中使用:
javascript
import { STLLoader } from 'three/addons/loaders/STLLoader.js';
const loader = new STLLoader();
loader.load('model.stl', (geometry) => {
// 返回的是 BufferGeometry,需要自己创建材质和网格
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
对于现代Web项目(产品展示、交互体验、游戏):
glTF (.glb)。在3D创作软件(如Blender)中完成所有制作后,导出为glTF。这是性能、功能和支持度的最佳平衡点。从DCC工具(如Blender/Maya)向Three.js迁移带复杂动画的模型:
FBX,但更推荐使用工具的 glTF导出器。许多工具(如Blender)的glTF导出插件已经非常成熟,能很好地处理动画和材质转换。对于静态、无动画的简单模型:
OBJ 仍然可用,尤其是当你的模型库只有OBJ时。但长远看,应转向glTF。对于3D打印或CAD数据可视化:
STL。你可以在Three.js中加载并显示它。如果需要在网页上展示带颜色的打印模型,需要考虑其他支持颜色的格式(如glTF或带有顶点颜色的PLY)。glTF 是未来和现在的Web 3D标准,Three.js对其支持最完善,应作为你的默认选择。
FBX 是强大的创作管道格式,但在Web交付环节通常需要转换为glTF。
OBJ 是遗留的简单格式,适用于快速测试或兼容旧资产。
STL 是专业领域(3D打印)格式,在Web上仅用于特定目的的可视化。
记住通用法则:在创作工具中保存原始工程文件(如 .blend, .ma),然后针对Web平台导出为 glTF 进行使用。