HTML5本身不支持建模，所谓“HTML5建模”实为通过WebGL库（如Three.js）加载渲染3D模型；合并多个glTF模型应使用Group逻辑组合而非修改geometry；动画需共用AnimationMixer；性能敏感时慎用mergeGeometries；浏览器无法导出glTF，拼装应在建模工具或服务端完成。
HTML5 本身不提供建模能力，所谓“HTML5 建模”实际指在浏览器中用 WebGL 渲染引擎（如 Three.js、Babylon.js）加载和操作 3D 模型。合并多个模型不是 HTML5 的功能，而是 3D 渲染库对 Object3D 或 Mesh 层级的组合控制。
Three.js 中合并多个 glTF 模型：用 Group 而非直接修改 geometry
常见误区是试图手动拼接 BufferGeometry 或导出新 glTF——这既低效又易破坏材质、动画、法线等数据。正确做法是逻辑组合：
- 每个
gltf.scene是一个独立Group，可直接add()到主场景或另一个Group - 通过设置
position、rotation、scale调整相对位姿，而非修改原始模型顶点坐标 - 若需统一变换（如整体旋转），把所有模型加到同一个空
Group，再对该Group操作
const group = new THREE.Group();
loader.load('model1.glb', (gltf) => {
gltf.scene.position.set(0, 0, 0);
group.add(gltf.scene);
});
loader.load('model2.glb', (gltf) => {
gltf.scene.position.set(2, 0, -1); // 相对于 group 原点偏移
group.add(gltf.scene);
});
scene.add(group); // 整体加入场景
合并后动画不同步？检查 AnimationMixer 实例是否共享
多个 glTF 模型含骨骼动画时，若各自创建独立 AnimationMixer，时间轴无法对齐；必须共用一个 mixer 并分别添加其 clip：
- 每个
gltf.animations是AnimationClip数组，需逐个传给同一AnimationMixer - 调用
mixer.update(delta)一次，即可驱动所有绑定的动画轨道 - 避免为每个模型新建
AnimationMixer，否则time独立，动作会错位
const mixer = new THREE.AnimationMixer(group);
gltf1.animations.forEach(clip => mixer.clipAction(clip).play());
gltf2.animations.forEach(clip => mixer.clipAction(clip).play());
// render loop 中统一更新
function animate() {
mixer.update(clock.getDelta());
}
性能敏感场景下慎用 mergeGeometries()
仅当多个静态、无材质差异、无动画的 Mesh 需减少 draw call 时才考虑几何体合并——但代价是丢失独立变换、材质切换和拾取（raycast）精度：
立即学习“前端免费学习笔记（深入）”；
-
THREE.BufferGeometryUtils.mergeGeometries()只处理纯几何，不合并材质、UV、骨骼权重 - 合并后整个对象只能用单一材质，且
raycast返回的是合并后的大 mesh，无法区分原始部件 - 若模型含 PBR 材质（
MeshStandardMaterial）或透明度，合并极易导致渲染异常
导出组合结果？浏览器内无法生成标准 glTF
Three.js 不提供运行时 glTF 导出能力。所谓“合并后导出”，本质是前端无法完成的任务：
- 没有官方 API 将
Group+ 多个gltf+ 动画状态打包成新 glTF 文件 - 社区方案（如
@gltf-transform/core）需在 Node.js 环境运行，前端受限于 CORS 和二进制解析复杂度 - 真实工作流应是：建模软件（Blender）中完成拼装 → 导出单个 glTF → 浏览器加载
真正关键的不是“怎么拼”，而是“在哪拼”。浏览器负责呈现和交互，拼装逻辑该交给建模工具或服务端预处理。强行在前端做模型结构合并，往往换来调试困难、内存暴涨和兼容性黑洞。
