HTML5无法直接导出FBX,必须通过Three.js导出GLB后经Blender转换;纯前端生成FBX不可行因格式私有且复杂;推荐链路为Three.js→GLB→Blender→FBX,需注意法线、贴图及导出设置。

HTML5 本身不支持直接导出为 FBX 格式——它没有内置的 3D 文件序列化能力,更不包含 FBX 编码逻辑。所有“HTML5 建模导出 FBX”的实际流程,都依赖于**运行在浏览器中的 JavaScript 3D 库(如 Three.js)配合后端服务或桌面工具中转**。
Three.js 场景怎么导出为 FBX
Three.js 自身不提供 FBXExporter;官方仅维护 GLTFExporter(输出 .glb/.gltf)。要得到 .fbx,必须借助外部转换:
-
前端先用
GLTFExporter导出为.glb,再通过fetch发送到后端服务(如 Node.js +@tensorflow/tfjs不相关,但可用python-shell调用 Blender CLI) - 或让用户下载
.glb后,手动拖入 Blender → 导出为.fbx(最常用、最可靠) - 注意:Three.js 的
MeshStandardMaterial、骨骼动画、自定义着色器等,在转 FBX 时大概率丢失或降级——Blender 导入 GLB 后需手动检查材质和蒙皮
为什么不能用纯前端 JS 直接生成 FBX
FBX 是 Autodesk 私有二进制格式(虽有公开 SDK,但无轻量 Web 版本),其结构含复杂嵌套、时间轴采样、变换层级、属性继承等,无法靠简单 Blob 拼接生成。已知尝试包括:
-
fbx-js(GitHub 上一个实验性库):仅支持极简静态网格导入,无导出能力 - 用
WebAssembly编译 OpenFBX 或 Assimp:目前无成熟封装,编译后体积超 10MB,且缺少纹理/动画序列支持 - 浏览器调用本地
Blender?不可行——受安全沙箱限制,file://或http://页面无法执行本地二进制
真正可行的导出链路(含兼容性提醒)
推荐路径是「Three.js → GLB → Blender → FBX」,但每步都有坑:
立即学习“前端免费学习笔记(深入)”;
- Three.js 导出 GLB 前,确保所有
BufferGeometry已调用.computeVertexNormals(),否则 Blender 导入后法线翻转 - Blender 导入 GLB 时勾选
Shade Smooth和Import Cameras/Lights(按需),否则模型可能黑块或缺失光源信息 - 导出 FBX 时,
Path Mode设为COPY,并勾选Embed Textures,否则 Unity 或 Maya 打开时贴图丢失 - 目标平台若为 Unity:用
FBX 2020格式,禁用Smoothing Groups;若为 Unreal:选FBX 2019,启用Apply Transform
const exporter = new GLTFExporter();
exporter.parse(scene, (gltf) => {
const blob = new Blob([gltf], { type: 'model/gltf-binary' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'model.glb';
link.click();
URL.revokeObjectURL(url);
}, { binary: true });
真正卡住多数人的不是代码,而是 Blender 中 FBX 导出面板里那些灰色不可点选项——它们取决于你是否选中了带骨骼的 Armature,或是否启用了几何节点修改器。没选对,导出的 FBX 在 Maya 里就只有一堆零散面片。











