HTML5本身不支持3D建模与模型拆分，需依赖WebGL库（如Three.js）加载预处理的独立mesh模型；点击分离效果取决于建模软件中部件是否设为独立对象并正确导出，运行时通过Raycaster检测+位置偏移实现，关键在建模结构、导出配置与对象管理。
HTML5 中没有原生“建模”能力，模型拆分依赖 WebGL 库
HTML5 本身不提供 3D 建模或模型拆分功能。所谓“HTML5 建模”，实际是用 WebGL 渲染引擎（如 Three.js、Babylon.js）加载外部 3D 模型文件（.glb、.gltf），再通过代码控制其结构与交互。模型是否支持点击拆分，取决于它在导出时是否保留了独立的 mesh 或 node 层级——不是 HTML5 决定的，而是建模软件（Blender / Maya）和导出设置决定的。
模型必须按部件导出为独立 mesh，否则无法分离点击
如果在 Blender 中把椅子的靠背、坐垫、腿全合并成一个物体再导出，Three.js 加载后只会得到一个 Mesh，无法单独选中某一部分。要实现点击分离，必须：
- 在建模软件中将每个可交互部件设为独立对象（例如命名
chair_back、chair_seat） - 导出为
.glb时勾选Export Selected或确保Include > Objects启用 - 加载后遍历
scene.children或使用gltf.parser.getDependencies('mesh')检查是否识别出多个子网格
常见错误：直接拖入一个合并过的 .fbx 转成 .glb，没重命名也没分离对象，结果所有部件共享同一个 geometry.attributes.position，无法独立操作。
Three.js 中实现点击分离的最小可行逻辑
核心是射线检测（Raycaster）+ 状态标记 + 位置偏移。不推荐销毁或隐藏 mesh，而是用 position.set() 移开，并缓存原始位置以便复位。
立即学习“前端免费学习笔记（深入）”；
const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2();function onDocumentMouseDown(event) { mouse.x = (event.clientX / window.innerWidth) 2 - 1; mouse.y = -(event.clientY / window.innerHeight) 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { const target = intersects[0].object; // 只对有自定义标识的部件响应 if (target.userData.clickable !== true) return; // 若尚未分离，移开；若已分离，移回 if (!target.userData.separated) { target.userData.originalPos = target.position.clone(); target.position.add(new THREE.Vector3(0, 0.5, 0.8)); target.userData.separated = true; } else { target.position.copy(target.userData.originalPos); target.userData.separated = false; } } }
注意：intersects[0].object 是最上层被击中的 mesh，但若部件嵌套在 Group 下，需递归检查 parent 直到找到带 userData.clickable === true 的对象。
性能与兼容性陷阱：别在每帧做全量遍历
在 render 循环里反复调用 scene.traverse() 查找可点击部件，会显著拖慢帧率，尤其模型超 100 个 mesh 时。更稳妥的做法：
- 加载完成时一次性收集所有可点击对象到数组：
clickableMeshes = []; scene.traverse(o => { if (o.userData.clickable) clickableMeshes.push(o); }) - 射线检测只传入该数组：
raycaster.intersectObjects(clickableMeshes) - 避免给非几何体（如
Light、Helper）加clickable标识，否则会干扰检测 - 移动端需额外处理
touchstart并阻止默认行为，否则可能触发双击缩放
真正难的不是写几行 position.add()，而是建模阶段的结构设计、导出配置和运行时对象关系管理——这些环节出错，后面所有交互代码都白搭。
