rotationthree.js

Three.js - move custom geometry to origin

I have some custom geometries obtained from a STEP file conversion and I use the mouse to rotate them. They rotate around the origin of the scene, but since they are far from it, they seem rotating on a virtual sphere. How can I move them to the origin so that they don't seem "floating" around (I mean that I'd like to reduce to zero the radius of the virtual sphere). This is the example I'd like to move. I've tried setting their position to (0, 0, 0) doing:

object.position.x = 0;
object.position.y = 0;
object.position.z = 0;

but it didin't work.

Solution

  • The typical solution to this problem is to translate the geometry right after it is created. You do that by applying a translation matrix to the geometry like so:

    geometry.applyMatrix( new THREE.Matrix4().makeTranslation( distX, distY, distZ ) );

    EDIT: You can simply do this, instead:

    geometry.translate( distX, distY, distZ ); // three.js r.72

    The function geometry.computeBoundingBox() may be of help to you in determining an amount to translate.

    However, I see in your case, you have multiple geometries, so it it a bit more complicated, but doable. You will need to translate each geometry by the same amount.

    EDIT

    Tip: Instead of adding each object to the scene, create a parent object, add it to the scene, and then add the objects to the parent.

    const parent = new THREE.Object3D();
scene.add( parent );
    
parent.add( object1 );
parent.add( object2 );
// and so on...

    Then in your render function, just rotate the parent, not the individual objects.