gltf/fbx/obj 模型加载 ·Model Load· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么三种主流格式glTF / FBX / OBJ的加载方式DRACOLoader解码 Draco 压缩的 glTFMTLLoader为 OBJ 绑定材质加载后scale / position调整的常见原因效果说明同一场景中同时加载三个模型| 模型 | 格式 | 文件 | |------|------|------| | 汽车 | glbDraco 压缩 |car.glb| | 城市 | FBX |city.FBX| | 房屋 | OBJ MTL |house.objhouse.mtl|环境光照明 OrbitControls 环绕观察。房屋相对汽车做了 X 轴偏移避免重叠。核心概念格式选型| 格式 | 推荐度 | 特点 | |------|--------|------| |glTF / glb| ⭐ 首选 | 现代标准支持 PBR、动画、Draco 压缩.glb为单文件二进制 | |FBX| 常用 | Autodesk 生态Blender/3ds Max 导出多有时需手动调 scale | |OBJ MTL| legacy | 仅几何 基础材质无动画需两个文件 |生产项目优先 glTF 2.0体积和加载效率最佳。Loader 与返回值// glTF → gltf.scene 是 Group内含 Mesh、Light 等GLTFLoader.load(url, (gltf) { scene.add(gltf.scene); // gltf.animations, gltf.cameras 亦可用 });// FBX → 直接是 Object3D FBXLoader.load(url, (object3d) { scene.add(object3d); });// OBJ 需先加载 MTL 材质库 mtlLoader.load(mtlUrl, (mtl) { mtl.preload(); objLoader.setMaterials(mtl); objLoader.load(objUrl, (obj) scene.add(obj)); });Draco 几何压缩Draco 将 mesh 顶点数据压缩可减小 70% 体积但浏览器需WASM 解码器const dracoLoader new DRACOLoader();dracoLoader.setDecoderPath(/path/to/draco/); // 含 draco_decoder.wasm 等 loader.setDRACOLoader(dracoLoader);解码路径必须指向 three.js 自带的examples/jsm/libs/draco/或 CDN 等价目录。为什么 FBX 要 scale 0.0005不同 DCC 工具Blender、3ds Max、C4D导出时单位制不一致有的按厘米、有的按米。加载后若模型巨大或极小用object3d.scale.set()修正或通过Box3.setFromObject()计算包围盒后自适应。object3d.scale.set(0.0005, 0.0005, 0.0005); // city.FBX 单位偏大obj.position.x 3; // 错开多个模型便于观察实现步骤搭建 Scene / Camera / Renderer / OrbitControls / rAF添加AmbientLightAxesHelperGLTFLoader DRACO → 加载car.glbFBXLoader→ 加载city.FBX并缩小MTLLoader → OBJLoader链式加载house三种加载互不阻塞各自异步回调scene.add。代码要点import * as THREE from threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js import { DRACOLoader } from three/examples/jsm/loaders/DRACOLoader.js import { FBXLoader } from three/examples/jsm/loaders/FBXLoader.js import { OBJLoader } from three/examples/jsm/loaders/OBJLoader.js import { MTLLoader } from three/examples/jsm/loaders/MTLLoader.jsconst box document.getElementById(box)const scene new THREE.Scene()const camera new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)camera.position.set(5, 5, 5)const renderer new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })renderer.setSize(box.clientWidth, box.clientHeight)box.appendChild(renderer.domElement)new OrbitControls(camera, renderer.domElement)window.onresize () {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()}animate()function animate() {requestAnimationFrame(animate)renderer.render(scene, camera)}scene.add(new THREE.AmbientLight(0xffffff, 4))scene.add(new THREE.AxesHelper(1000))// 加载模型 gltf/ glb draco解码器 const loader new GLTFLoader()loader.setDRACOLoader(new DRACOLoader().setDecoderPath(FILE_HOST js/three/draco/))loader.load(HOST /files/model/car.glb,gltf {scene.add(gltf.scene)})// 加载模型 fbx new FBXLoader().load(HOST /files/model/city.FBX, (object3d) {scene.add(object3d)object3d.scale.set(0.0005, 0.0005, 0.0005)})// 加载模型 obj/ mtl const objLoader new OBJLoader()const mtlLoader new MTLLoader()mtlLoader.load(FILE_HOST files/model/house/house.mtl, (mtl) {mtl.preload()objLoader.setMaterials(mtl)objLoader.load(FILE_HOST files/model/house/house.obj,(obj) {scene.add(obj)obj.position.x 3})})完整源码GitHub小结本文提供gltf/fbx/obj 模型加载完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库