CODEWITHSUNDEEP
javascriptthree.jsrotationquaternionsbounding-box
Yin Cognyto
Yin Cognyto

Reputation: 1136

Replicate object rotation inside rotated parent in Three.js

I built my 3D globe and placed it into a parent bounding box / pivot like this:

var globe = new THREE.Group();
if (earthmesh) {globe.add(earthmesh);};
if (linesmesh) {globe.add(linesmesh);};
if (cloudmesh) {globe.add(cloudmesh);};
if (atmosmesh) {globe.add(atmosmesh);};
pivot = new THREE.Group();
if (globe) {pivot.add(globe);};
if (pivot) {scene.add(pivot);};

so that when applying, say, a 23 degree rotation around the Z (far to near) axis on the parent:

pivot.rotation.set(THREE.Math.degToRad(0), THREE.Math.degToRad(0), THREE.Math.degToRad(23));

the globe would rotate around the Y (down to up) axis relative to its parent, in the animation function (in case you wonder, v is just an object holding the values for the .loop i.e. 360 degrees, .rate i.e. the rotation speed, as well as the .roll, .spin and .tilt variables corresponding to the X, Y and Z rotations of the globe, in degrees):

function animate()
{
  delta = clock.getDelta();
  resize();
  v.spin = (v.loop + v.spin + v.rate * delta) % v.loop;
  globe.rotation.set(THREE.Math.degToRad(v.roll), THREE.Math.degToRad(v.spin), THREE.Math.degToRad(v.tilt));
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

like the green arrow indicates below, instead of how the red arrow indicates if the globe had no rotated parent:

Rotation Inside Pivot Parent

This is very simple and it works well, if I do something like:

pivot.rotation.set(THREE.Math.degToRad(v.roll), THREE.Math.degToRad(0), THREE.Math.degToRad(v.tilt));
globe.rotation.set(THREE.Math.degToRad(0), THREE.Math.degToRad(v.spin), THREE.Math.degToRad(0));

in the animation function above and my on-demand / manual rotation system, without changing the camera position / direction as that is handled as desired by the ArcballControls library of Three.js, also visible above.

However, I would like to achieve this object rotation inside its parent by using other tools available in Three.js, like matrices, vectors, quaternions or other built-in functions, without having to set a parent for the globe and distributing the rotations between the parent and the child. The idea is to do the globe rotations normally like in the original animation function above, and apply some of those other tools (or even formulas) to alter the rotation and produce the desired effect. How can I do that?

In the interest of clarity, the benefit of such an approach over creating a parent for the globe would be that:

Also, just in case I'll eventually settle on the parent - child approach above if the other methods are too complicated, how would I "reset" the rotation system to the "original" (i.e. red arrow) way in that case, without changing the object's visual orientation? I mean, resetting the pivot rotation to (0, 0, 0) is clear, but what would be the rotation applied to the globe child so that it stays the same even if its parent is now not rotated?

Note: For simplicity, a (0, 0, 0) position is assumed for both the parent and the child groups / objects and the parent rotation is illustrated on a single axis, but ideally, the alternative should allow different hypothetical positioning for the pivot and the object, while the globe altering rotation should be possible on all 3 axes.

P.S. Feel free to suggest improvements to how the question is formulated in order to make it clearer or more compact (sorry, I'm not an expert in technical terms, like world or local rotations or the like), but try not to rush into marking it as a duplicate or closing it before you are absolutely sure about it.

Upvotes: 2

Views: 165

Answers (1)

M -
M -

Reputation: 28462

Your question is pretty long, but I think what you're looking for is "rotation order". Rotations are typically applied to the x, then y, finally z axes.

You might want to put the earth's tilt (z) first, and daily spin (y) last, so you can change this with: globe.rotation.order = "ZXY"

See here for official documentation on rotation order

Upvotes: 2

Related Questions