Clever Geek Handbook

Three.js move and rotate the center of the geometry

I have a complex model loaded with OBJLoader. I want to move and rotate its center to allow the user (user of my application) to place the center where they want. I know about this: old question , but it doesn't work for me. This is a test in a script: example script

By clicking the button in the example, I expect the center to be moved. The code in the button:

objMesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(new THREE.Vector3(1, 0.1, 0.1)));
+1


source to share


2 answers


I found the solution empirically, but I don't understand why it works. I am posting the code to help and maybe someone can explain to me what I found.

The code below shifts the x center by 0.1 units.



var x = 0.1;
var y = 0;
var z = 0;

for (var i = 0; i < object.children.length; i++)
{
    var geometry = object.children[i].geometry;

    object.children[i].centroid.divideScalar(geometry.vertices.length); // Why this line ?

    var offset = object.children[i].centroid.clone(); 
    object.children[i].geometry.applyMatrix(new THREE.Matrix4().makeTranslation(-offset.x+x, -offset.y+y, -offset.z+z));
    object.children[i].position.x -= x;
    object.children[i].position.y -= y;
    object.children[i].position.z -= z;
    object.children[i].geometry.verticesNeedUpdate = true;
}
+3


source


With, WebGLRenderer

you need to set the need-update flag and pass the correct argument makeTranslation()

.

objMesh.geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 1, 0.1, 0.1 ) );
objMesh.geometry.verticesNeedUpdate = true;

See the wiki article How to update things with WebGLRenderer .



Also, consider only calling mesh.position.set()

and not moving each vertex of the geometry.

three.js r.58

+1


source






More articles:


All Articles