glTF/glb 从 Blender 导出到 Three.js 加载全流程实战

1. 从零搞懂 glTF/glb 到底解决了什么问题1.1 为什么 3D 模型加载总让人头疼做过三维项目的人大概都有过这种体验美术在 Blender 里调好的模型导出成 OBJ 之后材质全丢了换成 FBX 吧文件体积又大得离谱一个稍微精细点的角色动辄几十兆网页端加载直接卡成幻灯片。更别提那些带骨骼动画的模型换个引擎就得重新导一遍贴图路径、坐标系、单位尺度全得手动对齐光是调这些就能耗掉一整天。这个问题的根源在于早期的 3D 格式大多是为桌面软件之间的交换设计的它们默认你是在本地环境里工作磁盘空间和内存都管够。但一旦把场景搬到 Web、移动端或者实时渲染管线里这些格式的短板就暴露无遗了。OBJ 只支持最基础的几何和材质FBX 是闭源二进制格式、解析库又重DAE 虽然开放但结构臃肿。行业里一直缺一个专门为“传输和实时渲染”而生的格式。glTF 就是冲着这个缺口来的。它的全称是 Graphics Language Transmission Format由 Khronos Group 主导制定定位非常明确——做“3D 界的 JPEG”。这个比喻很到位JPEG 不是像素本身而是一套高效的图像压缩和传输规范glTF 也不是模型本身而是一套描述 3D 场景的标准化容器。它把网格、材质、纹理、动画、相机、灯光这些元素用 JSON 结构化描述二进制数据顶点、索引、贴图单独存放加载时几乎不需要额外解析开销。而 glb 则是 glTF 的二进制打包版本。你可以把它理解成把 JSON 和所有外部资源塞进一个文件里的“单文件版”。JSON 版 glTF 通常是一个 .gltf 文件加一堆 .bin 和贴图文件方便调试和手动改glb 则把所有东西打包成一个二进制文件适合分发和加载。两者内容完全等价只是打包方式不同。1.2 glTF 的核心结构长什么样要真正用好 glTF得先搞清楚它的内部构造。一个 glTF 文件本质上是一棵场景树顶层是scenes和nodes往下挂meshes、materials、textures、animations等。每个 mesh 由若干primitives组成每个 primitive 通过accessor引用bufferView最终指向buffer里的二进制数据。这套间接引用看起来绕但好处是数据可以高度复用——比如多个 mesh 可以共享同一个 accessor多个 material 可以引用同一张贴图。材质方面glTF 2.0 主推 PBR基于物理的渲染模型核心参数是baseColorFactor、metallicFactor、roughnessFactor配合baseColorTexture、metallicRoughnessTexture、normalTexture等贴图。这套参数和 Blender 的 Principled BSDF 几乎一一对应所以从 Blender 导出 glTF 时材质还原度相当高这也是它在美术工作流里受欢迎的原因之一。动画部分glTF 支持关键帧动画通过animations数组描述每个动画包含若干channels每个 channel 绑定一个targetnode 的某个属性比如 translation、rotation、scale和一条sampler时间轴加插值方式。骨骼动画则通过skins描述把 mesh 的顶点和关节节点关联起来。1.3 谁适合看这篇内容如果你正在做 Web 3D 展示、数字孪生、电商产品预览、AR/VR 应用或者只是想在个人项目里加载一个自己建模的小物件glTF/glb 基本是当前最优解。前端开发者、Three.js 使用者、Blender 用户、做 Spatial SDK 相关开发的同学都能从下面这些实操细节里找到直接能抄的代码和配置。哪怕你之前完全没接触过 3D只要跟着走一遍也能把模型跑起来。2. 模型从 Blender 到 glb 的完整导出链路2.1 Blender 导出前的模型整理很多人模型加载出问题根子不在加载代码而在导出前的模型本身就没整理干净。我在实际项目里踩过最多的坑就是模型在 Blender 里看着好好的导出后要么位置偏了要么缩放不对要么材质变成一片灰。这些问题九成都能在导出前解决。第一件事是确认单位尺度。Blender 默认单位是米但很多从其他软件导入的模型可能是厘米或毫米级别。你可以在场景属性 单位里检查也可以直接选中模型按N调出侧边栏看尺寸。如果模型尺寸明显不对比如一个人物模型高度是 170 而不是 1.7导出前用CtrlA应用缩放把变换烘焙进网格数据里。这一步很关键因为 glTF 导出时如果带着未应用的缩放加载端再叠加自己的缩放就会乱套。第二件事是检查坐标系。Blender 用的是 Z 轴向上而 glTF 规范规定 Y 轴向上。好消息是 Blender 的 glTF 导出器会自动做这个转换你不需要手动旋转模型。但如果你在导出设置里勾了Y Up之外的选项或者用了自定义的导出脚本就得留意这个差异。实测下来保持默认的Y Up勾选状态最省心。第三件事是清理场景。把不需要导出的相机、灯光、空物体删掉或者移到单独的 collection 里导出时只勾选需要的 collection。模型上的修改器比如细分、镜像、阵列要么应用掉要么在导出设置里勾选应用修改器。我一般建议直接应用因为导出器对复杂修改器的支持并不总是完美应用之后结果最可控。2.2 材质与贴图的处理要点glTF 的 PBR 材质和 Blender 的 Principled BSDF 对应关系很好但不是所有节点都能导出。基础色、金属度、粗糙度、法线、自发光、透明度这些都没问题但如果你用了程序化纹理节点、颜色渐变节点或者复杂的节点组导出器无法把它们烘焙成贴图结果就是材质丢失。解决办法有两个一是手动把程序化纹理烘焙成图片贴图在 Blender 的渲染属性里切换到 Cycles用烘焙功能把漫反射、法线、粗糙度分别烘出来二是直接用图片贴图替代程序化节点。对于大多数项目来说第二种更省事。贴图格式建议用 PNG 或 JPEG尺寸控制在 2048 以内太大的贴图会显著增加 glb 体积。还有一点容易被忽略贴图的色彩空间。基础色贴图应该设为sRGB法线贴图和金属粗糙度贴图应该设为Non-Color。如果设错了导出的模型颜色会偏法线也会出问题。在 Blender 的着色器编辑器里选中 Image Texture 节点在图像菜单里就能改色彩空间。2.3 导出参数逐项拆解Blender 的 glTF 导出面板参数不少我挑几个最关键的说说。格式选glTF Binary (.glb)还是glTF Separate (.gltf .bin textures)取决于你的用途。要单文件分发就选 glb要方便调试和手动改 JSON 就选 separate。我一般开发阶段用 separate方便看结构上线打包用 glb减少请求数。包含这一栏里选中物体和可见物体的区别要搞清楚。选中物体只导出你当前选中的可见物体导出所有没被隐藏的。如果你场景里有参考图、辅助线之类的东西记得先隐藏或者用选中物体模式。变换里的Y Up保持勾选这是 glTF 规范要求的。应用修改器建议勾上省得手动应用。UV和法线默认导出就行。数据里的网格 顶点颜色如果你用了顶点色就勾上没用就不勾。材质 导出选导出图像 格式选自动或JPEG自动会保留原格式JPEG会统一转成 JPEG 减小体积但会损失透明通道。动画部分如果你有骨骼动画勾上动画和蒙皮。采样动画建议勾上它会把动画按固定帧率采样成关键帧兼容性更好。优化动画大小可以减小体积但可能会丢掉一些细微的动画细节看项目需求取舍。导出完成后我习惯用 glTF 查看器比如 Khronos 官方的 glTF Viewer 或者 VS Code 的 glTF Tools 插件先检查一遍确认模型、材质、动画都正常再进入加载环节。3. 在 Web 端加载 glb 模型的实操方案3.1 Three.js 加载 glb 的标准流程Three.js 是目前 Web 端加载 glTF/glb 最成熟的方案它的 GLTFLoader 对 glTF 2.0 的支持非常完整。下面是一段可以直接用的加载代码import * as THREE from three; import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js; import { DRACOLoader } from three/examples/jsm/loaders/DRACOLoader.js; const scene new THREE.Scene(); const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.outputColorSpace THREE.SRGBColorSpace; document.body.appendChild(renderer.domElement); const dracoLoader new DRACOLoader(); dracoLoader.setDecoderPath(/draco/); const loader new GLTFLoader(); loader.setDRACOLoader(dracoLoader); loader.load(/models/my-model.glb, (gltf) { const model gltf.scene; model.scale.set(1, 1, 1); model.position.set(0, 0, 0); scene.add(model); const box new THREE.Box3().setFromObject(model); const center box.getCenter(new THREE.Vector3()); const size box.getSize(new THREE.Vector3()); const maxDim Math.max(size.x, size.y, size.z); camera.position.set(center.x, center.y, center.z maxDim * 2); camera.lookAt(center); }, undefined, (error) { console.error(模型加载失败:, error); }); const ambientLight new THREE.AmbientLight(0xffffff, 1.5); scene.add(ambientLight); const directionalLight new THREE.DirectionalLight(0xffffff, 2); directionalLight.position.set(5, 10, 7); scene.add(directionalLight); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate();这段代码里有几个点值得展开说。outputColorSpace设成SRGBColorSpace是必须的否则颜色会发灰。DRACOLoader 是可选的但如果你的 glb 用了 Draco 压缩Blender 导出时可以勾选就必须配上否则加载会报错。相机自动取景那段逻辑很实用它根据模型包围盒自动算相机位置省得你手动调参数。3.2 用 model-viewer 快速展示模型如果你不想写一堆 Three.js 代码只想在网页上快速展示一个模型model-viewer是最省事的选择。它是 Google 维护的一个 Web Component一行标签就能搞定script typemodule srchttps://unpkg.com/google/model-viewer/dist/model-viewer.min.js/script model-viewer src/models/my-model.glb alt一个 3D 模型 auto-rotate camera-controls shadow-intensity1 environment-imageneutral stylewidth: 100%; height: 500px; /model-viewerauto-rotate让模型自动旋转camera-controls开启鼠标拖拽和缩放shadow-intensity控制阴影强度environment-image设置环境光照。这套方案特别适合电商产品页、作品集展示这类场景开发成本几乎为零。缺点是定制性不如 Three.js如果你要做复杂的交互逻辑还是得回到 Three.js。3.3 加载性能优化的几个关键手段glb 文件体积直接决定加载速度尤其是移动端。我总结了几条实测有效的优化手段。第一是 Draco 压缩。它能把网格顶点数据压缩到原来的十分之一左右代价是加载时需要解码稍微增加一点 CPU 开销。在 Blender 导出时勾选压缩就能启用Three.js 端配上 DRACOLoader 即可。一个 5MB 的模型压完可能只剩 500KB效果非常明显。第二是纹理压缩。glTF 支持 KTX2 格式的纹理配合 Basis Universal 压缩能在保持画质的前提下大幅减小贴图体积。Three.js 用 KTX2Loader 加载Blender 端需要装 KTX2 导出插件。这套流程稍微复杂一点但对贴图多的模型收益很大。第三是网格简化。如果模型面数很高比如几十万面加载和渲染都会吃力。可以在 Blender 里用Decimate修改器减面或者用Quadify这类重拓扑插件优化网格结构。减面时要盯着模型轮廓别把关键细节减没了。第四是分块加载。大场景可以拆成多个 glb按需加载。Three.js 的LoadingManager可以管理加载进度配合IntersectionObserver实现视锥内加载。这个方案适合数字孪生、大型场景这类应用。4. 坐标系、单位与常见加载问题排查4.1 东北天坐标系与 glTF 的 Y-up 差异做地理信息或者数字孪生的同学经常会碰到 ENU东北天坐标系和 glTF 的 Y-up 坐标系打架的问题。ENU 里 X 朝东、Y 朝北、Z 朝天而 glTF 里 Y 朝上。如果你直接把 GIS 数据导出的模型扔进 glTF 管线模型大概率是躺着的。处理这个问题的标准做法是在导出前做一次坐标变换把 Z-up 转成 Y-up。数学上就是绕 X 轴旋转 -90 度。在 Blender 里你可以选中模型按R、X、-90、Enter完成旋转然后CtrlA应用旋转。如果是在代码里处理可以用矩阵变换const matrix new THREE.Matrix4().makeRotationX(-Math.PI / 2); model.applyMatrix4(matrix);注意旋转之后要重新计算包围盒和法线否则光照和拾取会出问题。另外如果模型带有动画旋转要作用在根节点上不能直接改 mesh 的顶点否则动画会错位。4.2 模型加载后不显示或显示异常的排查表现象可能原因排查方法页面全黑模型不见相机位置不对或模型在视锥外打印模型包围盒检查相机 position 和 lookAt模型显示但全灰材质丢失或光照不足检查 glb 是否包含材质加环境光或方向光模型颜色偏暗色彩空间设置错误确认 renderer.outputColorSpace 为 SRGBColorSpace模型位置偏移导出时未应用变换在 Blender 里 CtrlA 应用位置/旋转/缩放模型比例不对单位尺度不一致检查 Blender 场景单位和导出缩放设置贴图不显示贴图路径错误或格式不支持用 glb 单文件格式确认贴图嵌入动画不播放未创建 AnimationMixer用 gltf.animations 创建 mixer 并 play加载报错 404路径错误或服务器未配置 MIME检查路径确认服务器支持 .glb MIME 类型这张表基本覆盖了我遇到过的九成问题。其中“模型全灰”和“颜色偏暗”这两个最常出现前者多半是没加灯光后者多半是色彩空间没设对。glTF 的 PBR 材质需要环境光照才能正确显示如果你只加了方向光金属材质会显得很暗因为金属主要靠反射环境光。解决办法是用RoomEnvironment或者 HDR 贴图作为环境光源。4.3 服务器配置与跨域问题glb 文件通过 HTTP 加载时服务器需要正确配置 MIME 类型否则浏览器可能拒绝解析。标准的 MIME 类型是model/gltf-binaryglb和model/gltfjsongltf。Nginx 里可以这样配types { model/gltf-binary glb; model/gltfjson gltf; }跨域问题也常见尤其是模型放在 CDN 上、页面在另一个域名时。需要在 CDN 响应头里加Access-Control-Allow-Origin。如果模型和页面同域一般不会有这个问题。本地开发时用file://协议直接打开 HTML 会触发跨域限制建议起一个本地服务器比如python -m http.server或者 VS Code 的 Live Server 插件。5. 进阶玩法与项目经验杂谈5.1 骨骼动画与交互控制带骨骼动画的 glb 加载后需要创建AnimationMixer来驱动动画const mixer new THREE.AnimationMixer(model); gltf.animations.forEach((clip) { mixer.clipAction(clip).play(); }); const clock new THREE.Clock(); function animate() { requestAnimationFrame(animate); const delta clock.getDelta(); mixer.update(delta); renderer.render(scene, camera); }如果要实现点击模型某个部位触发动作可以用Raycaster做拾取。注意骨骼动画的模型拾取要针对 SkinnedMesh普通 Raycaster 对蒙皮网格的拾取可能不准需要额外处理。我一般会在模型上叠加一层不可见的碰撞体来做拾取这样更稳定。5.2 用 Blender 插件打通 AI 辅助建模最近 Blender 生态里出现了不少 AI 辅助插件比如接入大模型做材质生成、用混元 3D 插件做文生 3D。这些工具能显著加快前期概念阶段的速度但生成的模型通常需要手动清理拓扑和 UV。我的经验是AI 生成的模型适合做参考和占位正式项目还是得靠人工精修。导出 glb 之前一定要检查网格是否有非流形边、UV 是否重叠、法线是否统一这些问题在 AI 生成的模型里特别常见。5.3 几个踩坑之后才明白的道理第一个道理glb 不是万能的。它适合单模型、单场景的分发但如果你要做大型场景流式加载3D Tiles 那套方案更合适。glb 和 3D Tiles 不是替代关系而是互补关系。3D Tiles 的瓦片内部可以用 glb 作为内容格式。第二个道理导出设置比加载代码更重要。我见过太多人花几个小时调 Three.js 代码最后发现是 Blender 导出时没勾Y Up。先把导出端搞对加载端会省很多事。第三个道理模型体积要控制在合理范围。一个网页展示用的模型glb 体积最好控制在 5MB 以内移动端控制在 2MB 以内。超过这个量级加载体验就会明显下降。压缩、减面、纹理优化该做的都得做。第四个道理测试要用真实设备。桌面浏览器跑得飞快的模型到了中低端手机上可能直接卡死。我习惯在开发阶段就用 Chrome 的设备模拟器限制 CPU 和网络提前暴露性能问题。5.4 后续可以扩展的方向如果你已经把基础加载跑通了接下来可以往几个方向深入。一是做模型的热点标注在 3D 空间里挂 HTML 标签实现产品部件的说明展示。二是做模型的剖切和爆炸视图适合机械、建筑类展示。三是接入 AR用 WebXR 或者 model-viewer 的 AR 模式让用户把模型放到真实环境里看。四是做多模型对比把不同配置的模型并排展示适合电商选配场景。这些扩展方向都建立在 glTF/glb 这套基础管线之上把加载和渲染的底子打牢上层玩法就是水到渠成的事。我自己在做项目时通常会把加载逻辑封装成一个可复用的模块把相机控制、光照、动画、拾取这些通用能力抽出来新项目直接引入能省掉大量重复工作。