如何用three.js可视化3D CAD模型并实现其可动部件联动？

1. 导入模型并保留几何结构树形结构 #

用GLB/GLTF格式导出你的CAD模型是最优选择，这个格式原生支持层级结构（树形结构）的保存。使用Three.js的GLTFLoader加载模型后，模型的层级关系会完整保留在model.scene对象中：

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('your-model.glb', function(gltf) {
  const model = gltf.scene;
  // 遍历整个树形结构，查看所有组件
  model.traverse(function(node) {
    if (node.isMesh) {
      console.log('组件名称:', node.name);
    }
  });
  scene.add(model);
});

导出模型时，确保在CAD或Blender中给每个关键组件设置清晰的名称（比如"base"、"upper_arm"、"forearm"），方便后续定位。

2. 整体加载后访问各组件并执行动作 #

完全可以。加载完成后，通过getObjectByName()直接定位到目标组件，修改其rotation、position等属性即可实现动作：

// 加载完成后获取关节组件
const upperArm = model.getObjectByName('upper_arm');
// 控制关节旋转
upperArm.rotation.y += 0.01;

如果组件嵌套较深，也可以通过遍历树形结构的方式筛选目标节点。

3. 是否需要先在Blender等工具中渲染模型？ #

不需要。你只需要把CAD模型导出为Three.js支持的3D格式（优先GLB/GLTF），导出时注意：

• 保留模型的层级结构（父子关系）
• 清理冗余的几何面、空对象
• 确保材质正确导出
  Blender这类工具的作用是整理模型结构、修复导出问题，而非“渲染”模型——Three.js会负责在浏览器中渲染交互。

4. 解决部件运动联动问题 #

你之前遇到的依赖运动问题，核心是没建立正确的父子层级关系：

• 前置处理：在CAD或Blender中，把有联动关系的部件设置为父子（比如将小臂设为大臂的子对象），导出时层级会被保留。加载到Three.js后，父对象的变换（旋转、移动）会自动传递给子对象，实现联动。
• 事后补救：如果已经导入了无层级的模型，可在Three.js中手动设置父子关系：

const upperArm = model.getObjectByName('upper_arm');
const forearm = model.getObjectByName('forearm');
// 将小臂设为大臂的子对象
forearm.parent = upperArm;
// 调整小臂的局部位置，确保和大臂正确对接
forearm.position.set(0, -0.5, 0);

之后旋转upperArm，forearm会自动跟着联动，完全符合机械关节的运动逻辑。

内容的提问来源于stack exchange，提问作者dlbhar