How to visualize 3d cad models and its movementable parts with three.js?

Question

I have a cad model that I want to load with three.js and interact with it.

The model is a machine that can perform individual movements. Rotations around joints etc. How can I implement this? How can I import the tree structure of the model in which its geometry is defined? Can I load the model as a whole and then access its individual components with three.js and then execute the desired movements with these?

Or does the model first have to be rendered in Blender or something?

I have tried to insert the individual moving parts of the model separately and then have them rotate or move via axes. But the problem is that the movements are also dependent on each other. Like a robot whose rotation of one arm around the joint causes a rotation of the other arm. How can I implement something like this?

Answer 1

This is a good direction you are considering with Blender. I don't know how other programs of this type work, so I will focus on Blender. I once made a humanoid and had the same issue as you. Namely, the need to animate individual parts of this "body".

And back to your machine...

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();

Answer 2

From cad model, i use 3dmax with an add-on called Verge3D with wich you can export with the animation, or if you dont want to aniamte in 3dmax you can put the parts in different layers, then you export to glb file with verge3D, import with draco and manage the parts calling the children mesh by name of layers.