How to rotate each mesh in the object which is loaded by objloader around each axis?

Questions
,
1

Screen Shot 2021-02-08 at 9.28.07 PM
Screen Shot 2021-02-08 at 9.28.07 PM3802×1866 192 KB

Hi, I’m a newbie of three.js.

I want to rotate each roller of the conveyor around each’s own axis, but as you may notice in the screenshot, the roller that I have tried to roll around is rotating around the center of whole object.

How can I fix this?

I have tried to get world position of each mesh, but I always get 0,0,0.

Could you give me any help please?

2

Do you mind sharing the OBJ asset in this thread?

Notice that you can only solve your issue if:

a) the rollers are independent 3D objects
b) their geometry is properly centered

1 Like
3

roller.obj (2.0 MB)

a) the rollers are independent 3D objects.
→ I guess this is ok, because I can access each roller with three.js module just like object.children[some number], and actually each mesh can be rotated somehow separately.

b) their geometry is properly centered.
→ Maybe this would be the problem.

Attached file is my object that is built in vectary(https://www.vectary.com/) in .obj format.

4

After inspecting your asset in the three.js editor the geometries are indeed not centered. And thus their pivot point is off.

5

The pivot point can be adjusted,
see e.g.

LoadGLTFmove

and
* discourse.threejs.hofk.de BeginnerExample Step 3

1 Like
6

In general, I think it’s best if an issue like this is solved with a DCC tool like Blender.

The model is not authored properly in the first place.

7

Thank you Mugen. Thank you hofk.
I have searched on the internet more and found the proper solution to my situation on the stackoverflow.
(https://stackoverflow.com/questions/26836065/rotating-object-around-object-axis-three-js)

For anyone who has encountered same issue, here is the part of my code.

function loadModel() {
  var position = new THREE.Vector3();
  object.traverse( function ( child ) {
  if ( child.name == "Cylinder" ) {
    child.geometry.computeBoundingBox();
    var boundingBox =child.geometry.boundingBox;
    position.subVectors( boundingBox.max, boundingBox.min );
    position.multiplyScalar( 0.5 );
    position.add( boundingBox.min );
    position.applyMatrix4( object.matrixWorld );
    child.geometry.applyMatrix4( 
      new THREE.Matrix4()
      .makeTranslation( 
        -(position.x), 
        -(position.y), 
        -(position.z) 
      ) 
    );
    child.verticesNeedUpdate = true;
    child.position.set( position.x, position.y, position.z);
    child.rotation.z = 2*Math.PI * Math.random();
  } 
 });
  scene.add( object );
}

Basically the same code with the referenced stackoverflow.