How to visualize 3d 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. What if i’ll try it without animation in blender and set the animations in the code?

At the moment, the red lined one rotates perfectly to the right around its rotation axis. Now I want to rotate the blue lined one with its associated elements to the left, while its shaft/axis is attached to the points and rotates simultaneously with the 1st rotation (model1 around model2). So 2 concatenated rotations at the same time. The blue lined one belongs at the position where the two blue points are. It should rotate to the left at this point while the red one rotates to the right with the attached blue part. How can I manage this?

`useEffect(() => {
if (scene) {
const modelObject = {};
scene.traverse((child) => {
modelObject[child.name] = child;
});

  const model1 = modelObject["ID0095285_Inlay_GBS_flexibel"];
  const model2 = modelObject["ID0093597"];
}
}, [scene]);

useFrame(() => {
if (scene) {
const modelObject = {};
scene.traverse((child) => {
modelObject[child.name] = child;
});

  const model1 = modelObject["ID0095285_Inlay_GBS_flexibel"]; // red part
  const model2 = modelObject["ID0093597"];  // red part rotation axis
  const model3 = modelObject["ID0123322_flexibel"]; // blue part with its elements
  const model4 = modelObject["ID0112873"]; // blue part without elements = its rotation axis

  if (model1 && model2 && model3 && model4) {
    // 1.rotation of model1 around model2
    model1.rotation.z += 0.001;
    model1.position.x = model2.position.x + 2; 
  }
}
});`