CODEWITHSUNDEEP
rotationthree.js
ttncrch
ttncrch

Reputation: 7253

Three Js, change rotation point

I'm trying to rotate an object (green) arround a point (blue) in three.js

enter image description here

As you can see on the image, green object rotates around red point (0, 0, 0)

First question : how I can find coordinates of the blue point ? Second : How I can rotate green object around blue point ?

(In the scene, there are 3 different objets, first one pointed by the red point, second one pointed by the blue, and the third surrounded by green.

loader.load("models/socle.obj", "models/socle.mtl", function(geometry) {
scene.add( geometry );
}, onProgress, onError); // Red OBJ

loader.load("models/motor1.obj", "models/motor1.mtl", function(geometry) {
scene.add( geometry );
}, onProgress, onError);

loader.load("models/motor12.obj", "models/motor12.mtl", function(geometry) {
scene.add( geometry );
}, onProgress, onError); // BLUE


loader.load("models/motor13.obj", "models/motor13.mtl", function(geometry) {
//geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0, 0 ) );

geometry.rotation.z = 0.17; // ~10 degrees
scene.add( geometry );
}, onProgress, onError); // RED

EDIT: I found coordinate of the blue point directly from blender : 16, 0, 0 I tried : 

loader.load("models/motor12.obj", "models/motor12.mtl", function(mesh) {
mesh.applyMatrix( new THREE.Matrix4().makeTranslation(16, 0, 0 ));


mesh.rotation.z = 0.17;
scene.add( mesh );
}, onProgress, onError);

But the result is not as exepted

Thanks in advance

Upvotes: 3

Views: 4327

Answers (1)

Bob Woodley
Bob Woodley

Reputation: 1284

First a nitpick: I would rewrite your callbacks like this:

loader.load("models/motor12.obj", "models/motor12.mtl",     function(mesh) {
    scene.add( mesh );
}, onProgress, onError); // BLUE

The loader does not hand in a THREE.geometry, it hands in a THREE.Object3D e.g. a mesh. You should be clear about the difference between the two.

For your first question, you can find the position (coordinates) of the blue by looking at its position object. i.e. mesh.position.x mesh.position.y mesh.position.z.

For your second question, there are multiple ways to do it. I wrote a blog post some time ago detailing exactly these issues: the various options and issues with rotating geometries and meshes in three.js: http://rwoodley.org/?p=1073

The simplest option is probably to make the green object a child of the blue point and rotate the blue point. If you don't want to rotate the blue point, just put an invisible object at the location of the blue point, make the green object a child of the invisible object and rotate the invisible object.

Upvotes: 1

Related Questions