如何使用 Three.js 可视化 3D CAD 模型及其可移动部件？

Question

我有一个 CAD 模型，我想用 Three.js 加载它并与其交互。

模型是可以执行单独动作的机器。绕关节旋转等 我怎样才能实现这个？如何导入定义其几何形状的模型的树结构？我可以将模型作为一个整体加载，然后使用 Three.js 访问其各个组件，然后使用这些组件执行所需的动作吗？

或者模型首先必须在 Blender 之类的中渲染？

我尝试分别插入模型的各个移动部件，然后让它们通过轴旋转或移动。 但问题是这些运动也是相互依赖的。就像一个机器人，它的一个手臂绕关节旋转会引起另一只手臂的旋转。 我怎样才能实现这样的事情？

Answer 1

这是您正在考虑使用 Blender 的一个好方向。我不知道这种类型的其他程序是如何工作的，所以我将重点关注 Blender。我曾经做过一个人形机器人，也遇到过和你一样的问题。也就是说，需要为这个“身体”的各个部分设置动画。

然后回到你的机器...

let wheelBottom;

const loader = new GLTFLoader();

loader.load('path/to/your/model.gltf', function (gltf) {
    scene.add(gltf.scene);
    wheelBottom = gltf.scene.getObjectByName("name_of_part_of_machine_in Blender")
});
 // and now this part is available, you can do whit that part, whatever you want, so for example you can animate it.

function animate() {
        
     requestAnimationFrame(animate);
  if (whellBottom) {
        wheelBottom.position.x = 30;
        }
     renderer.render(scene, camera);
        }
animate();