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

Questions
, ,
1

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?

2

see the “loader” three.js examples examples
find which model format you have and see if theres a loader. For each of these you can scoop out other code to do what you need. If there not a loader for it, then yes reexport from your app into one of these like gltf
All materials are then imported as a mesh object, and any bones you built are also object3d’s which have transforms you can edit

1 Like
3

Just export your model from the cad and import it into Blender. You may want to consider optimizing your model by reducing poly count, often times the curved objects from cad have a very high polygon count, which can slow your scene down.

To interact with your parts, there are two common ways to do it: 1) if its a simple joint interaction and rotation, then make the interactable part a separate model and adjust its origin point to where you want it to pivot or rotate from. 2) if its a more complex interaction, then add armature bones to it and weight paint the parts that are interactable. This one can be a separate model or a collective with correctly weight painted parts.

Next I suggest you export your model group as a gltf file. Import it to threejs and select your model child or select your model child bone and just move/rotate/scale whatever. The armature variant gives you a bit more control.

1 Like
4

Thanks a lot. And how do I have then access to the single parts in the code?
Do you have an example code?
Am I supposed to use Object3D and how to do the hierarchy in the code?

5

Just console.log your model, a bunch of properties you can use there. I usually get them via names, but you can refer them by child index aswell.

const modelObject = {};

gltfModel.children.forEach((child) => {
   modelObject[child.name] = child;
});

const model1 = modelObject["modelname1"];
const model2 = modelObject["modelname2"];

or

const model1 = gltfModel.children[0];
const model2 = gltfModel.children[1];
8

You probably need to start looking into model parenting. The loose blue models (child) parts need to be parented to its blue rotation shaft (parent) and that needs to be parented to whatever (grandparent) moves the blue shaft. So when you rotate the grandparent, it will rotate the grandparent+parent+child, and then you can rotate the parent, which will rotate the parent+child. However, you may need to adjust its pivot point, this can be done in matrix4 if you are a masochist, or adjust the pivot point in Blender with 10x less effort.

9

Okay thank you!
Does it make more sense to introduce inverse kinematics?

10

No, IK is for when you have many armature bones in a chain and you wish to control the end point. Currently you seem to have no bones and your scene is using the model origin point rotation itself. The scene model animation interactions seem to be easy aswell.

12

Yes, IK does you no good here. Your armature is not chained together and you have no place to use a pole target. You just have some simple rotating parts.