HTML5和Three.js无法直接导出GLB，因GLB是glTF二进制格式，需严格组织JSON元数据、二进制缓冲区等，浏览器端须依赖@gltf-transform/core等专用库实现；原生Three.js无.exportToGLB()方法，且材质、纹理、命名等需符合glTF规范。
HTML5 本身不提供建模能力，也不能直接“导出为 GLB”——GLB 是二进制格式的 glTF，必须由 3D 建模工具或运行时库生成，不是浏览器原生支持的导出目标。
为什么浏览器里写 HTML5 + Three.js 不能直接“导出 GLB”
Three.js 等 WebGL 库只负责渲染，不内置模型序列化逻辑；GLB 需要严格组织 JSON 元数据、二进制缓冲区（bufferView）、网格拓扑、材质定义等，浏览器端生成需手动拼装或依赖专用库。
- 原生
THREE.Scene没有.exportToGLB()方法 -
glTF规范要求纹理需嵌入 Base64 或作为bufferView引用，而浏览器中加载的纹理通常是ImageBitmap或HTMLImageElement，无法直接映射 - 材质参数（如 PBR 属性）需按
metallicRoughness或specularGlossiness路径映射，Three.js 默认材质不完全对齐
Three.js 场景导出 GLB 的可行方案：使用 @gltf-transform/core
这是目前最稳定、社区维护活跃的浏览器端 glTF/GLB 构建方案，支持从 Three.js 对象提取几何、材质、动画并打包为合规 GLB。
- 需配合
@gltf-transform/three插件桥接 Three.js 对象 - 仅支持部分 Three.js 特性：标准材质（
MeshStandardMaterial）、基础几何（BufferGeometry），不支持Sprite、Line、自定义着色器 - 纹理必须已加载完成且可读取像素（
texture.image存在且非跨域），否则导出会跳过或报错"Texture not ready"
import { NodeIO } from '@gltf-transform/core';
import { THREEPlugin } from '@gltf-transform/three';
const io = new NodeIO().registerPlugin(THREEPlugin);
const doc = io.write(scene, { format: 'GLB', basename: 'model' });
// 得到 Blob，可下载
const blob = await doc.toBlob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'scene.glb';
a.click();
更简单但受限的替代：用 Blender 导出（推荐给静态模型）
如果你的“HTML5 建模”实际是用在线建模器（如 Spline、Vectary、PlayCanvas 编辑器）搭建的场景，它们通常不开放底层导出 API；此时最可靠路径仍是回到桌面工具。
立即学习“前端免费学习笔记（深入）”；
- 将模型以
OBJ或FBX导出，拖入 Blender - 检查法线、UV、材质赋值（Blender 中材质名会成为 glTF 的
name字段） - 导出时勾选：
Export glTF 2.0 → Format: Binary (.glb)，启用Embed Textures - 避免启用
Apply Modifiers以外的自动转换（如Triangulate可能破坏平滑组）
常见失败点和绕过技巧
导出失败往往不是代码问题，而是数据状态不满足 glTF 要求：
-
THREE.Mesh使用了MeshBasicMaterial？→ glTF 不支持纯颜色无光照材质，需改用MeshStandardMaterial并设color和roughness=1 - 模型带中文命名或空格？→
gltf-transform会静默忽略非法字符，建议统一用scene.traverse(o => o.name = o.name.replace(/[^a-zA-Z0-9_]/g, '_')) - 导出体积异常大？→ 检查是否误将高分辨率贴图（如 4K
png）直接嵌入；可用doc.transform(textureCompress({ encoder: 'mozjpeg' }))压缩 - 导入后黑屏/无材质？→ 查看浏览器控制台是否有
"KHR_materials_pbrSpecularGlossiness not supported"，说明加载端（如 Babylon.js）不支持该扩展，应禁用该材质类型
真正卡住的地方，往往不在“怎么写导出代码”，而在“模型数据是否干净、是否符合 glTF 最小约束”。先验证单个 BoxGeometry + MeshStandardMaterial 能否成功导出，再逐步加复杂度。
