Read models and explode Obj file

Questions
1

Hello @looeee @donmccurdy @Mugen87 @prisoner849 @sandipnd31 @hofk @ben ,
I’m newbie WebGL and Three.js.
I used threejs.org/examples/?q=obj#webgl_loader_obj to load my obj file.
I want to get list of models (parts of production) and explode (detach) them.
Like image from Autodesk Viewer
How can I do these?
Here is what I did in codepen example
Thanks a lot.

1 Like
2

If you know the names of the children objects, then you can get a reference to them using Object3D.getObjectByName. For example, if an object is called Node 7, then you can get a reference to it like this:

loader.load( 'models/obj/male02/male02.obj', function ( object ) {

     const node7 = object.getObjectByName( 'Node 7');
				
     scene.add( object );

}, onProgress, onError );

Also try logging the object’s children to the console to see what you have loaded: console.log( object.children ) and make sure that the children are correctly named.

1 Like
3

Thanks @looeee for your help,
I can get list of objs now. How to explode (detach) them?
image
after explode like this image

4

Dear @looeee @donmccurdy @Mugen87 @prisoner849 @sandipnd31 @hofk @ben
I’ve just found this:

const parts = object.children;
parts[0].position.setX(100);

Can change position of part?

P/s: I found this great example threejs-cookbook/06-particles-postprocessing/06.06-explode-geometry-model.html at master · josdirksen/threejs-cookbook · GitHub.
However, I don’t know how to apply to my case. In that example using a point to draw but I want to use objects (parts).
Please help me, thanks in advance.

5

I think what you would need to do is traverse through your model and translate the children in a direction away from the center.

var distance = 1;
object.traverse(function(child){
  if(child.isMesh){
    //translate
    var direction = <calculate the direction of the child from the center>;
    child.translateOnAxis(direction, distance);
  }
});

The calculation will be the (position of the parent) - (position of the child). However you will probably have to convert the positions into world space first (https://threejs.org/docs/#api/core/Object3D.getWorldPosition)

Before you do the calculation however, I would make sure that the obj file is broken into parts and not just one solid mesh. I’m unsure that .obj format supports multiple broken up meshes in a hierarchy and so you might need to look into using a glTF format.

6

Thanks @calrk so much,
Actually, this is too complicated for me.
I don’t know how to

calculate the direction of the child from the center

Although you explain to me.
I did a codepen, hope it will be easier for supporting example

7

So your model has some unfortunate complexities that you have to solve along the way. Each of the object’s “positions” is set to (0,0,0), so you don’t initially know which direction you need to move it. So you will need to calculate the center of each of the parts.

parts.forEach(function(i, v) {  
  i.geometry.computeBoundingSphere();
  // i.geometry.boundingSphere.center will then be the center
});

If you then average the centers of all of the parts, you will find the center of the object as a whole.

So once you have the center of the parts, and the center of the whole, you can do the calculation I mentioned before to find the direction the part will move.

parts.forEach(function(i, v) {
  // Finding the vector between the center and the part and normalising it
  var childCenter = i.geometry.boundingSphere.center;
  var direction = childCenter.sub(center);
  direction = direction.normalize();
});

You can then move the parts in that direction, tying it all together like: example

Don’t think that this is too complicated for you, as its fairly fundamental to 3D graphics and is worth spending the time to understand how it works if you are going to continue making projects like this. Looking cool so far.

1 Like