Update an item's precise orientation in relation to the global axis

Question

Update an item's precise orientation in relation to the global axis

Update: Included a jsfiddle for clarification:

I am working with an object (a cube) in a scene and my objective is to provide it with 3 angles that represent its orientation in the real world. These angles are measured against the X, Y, and Z axes. Unfortunately, I am struggling with how to assign these angles to the object and then update them as new data is received. It seems that when I set initial angles everything works fine, but when I try to set new angles, they seem to be relative to the object's local space rather than the world space. While I have looked at similar questions on this topic, most of them focus on rotating objects around an axis rather than setting explicit angles against the world axis.

Currently, when one of my x, y, or z angles changes, I use the following code:

cube.rotation.set(x, y , z, 'XYZ');

To provide a visual example, here is a screenshot of my cube...without changing X or Y, I rotate it by 90 degrees about Z axis. See the before and after images below:

https://i.sstatic.net/FmJr0.png

and

https://i.sstatic.net/SavFe.png

You can see how the rotation has occurred around the normal direction of the purple face rather than the world Z axis...

This issue has left me puzzled and frustrated. :-(

javascript three.js rotation

Answer 1

Answer №1

When using cube.rotation.set(), keep in mind that this creates a rotation along the local axes of the object. Initially, after rotating along the X axis, the local X axis aligns with the world X axis. However, subsequent rotations along Y and Z axes will no longer match the world axes due to changes in local space alignment. To achieve rotations along world axes, you need to translate world axes into the object's local space.

To integrate this concept, consider the following code snippet:

var x = toRadians($("#rotateX").slider("option", "value"));
var y = toRadians($("#rotateY").slider("option", "value"));
var z = toRadians($("#rotateZ").slider("option", "value"));

var rotation = new THREE.Matrix4();
rotation.multiply(new THREE.Matrix4().makeRotationX(x));

var worldYAxis = new THREE.Vector3(0, 1, 0).applyMatrix4(new THREE.Matrix4().getInverse(rotation));
var rotationWorldY = new THREE.Matrix4().makeRotationAxis(worldYAxis, y);
rotation.multiply(rotationWorldY);

var worldZAxis = new THREE.Vector3(0, 0, 1).applyMatrix4(new THREE.Matrix4().getInverse(rotation));
var rotationWorldZ = new THREE.Matrix4().makeRotationAxis(worldZAxis, z);
rotation.multiply(rotationWorldZ);

cube.matrixAutoUpdate = false;
cube.matrix = rotation;

By applying this code, you'll observe rotations happening along the world axes as desired. However, keep in mind that consecutive rotations can distort the intended global axis rotations due to issues with commutative properties of rotations.

If you wish to maintain rotations specifically along world axes regardless of slider movements, you can utilize the function outlined below:

var prevX = 0, prevY = 0, prevZ = 0;
function doRotate() {
    // Code implementation here
}

By binding this function to slider events, you ensure constant rotation along world axes irrespective of object orientation. Just remember that absolute slider values may not directly correspond to specific axis angles but rather represent incremental adjustments relative to the current orientations.

An example demonstrating this behavior is available on this JSFiddle link. Overall, storing the entire transformation matrix instead of individual angle values proves to be a more robust approach for preserving accurate object rotations.

Answer 2

When using cube.rotation.set(), keep in mind that this creates a rotation along the local axes of the object. Initially, after rotating along the X axis, the local X axis aligns with the world X axis. However, subsequent rotations along Y and Z axes will no longer match the world axes due to changes in local space alignment. To achieve rotations along world axes, you need to translate world axes into the object's local space.

To integrate this concept, consider the following code snippet:

var x = toRadians($("#rotateX").slider("option", "value"));
var y = toRadians($("#rotateY").slider("option", "value"));
var z = toRadians($("#rotateZ").slider("option", "value"));

var rotation = new THREE.Matrix4();
rotation.multiply(new THREE.Matrix4().makeRotationX(x));

var worldYAxis = new THREE.Vector3(0, 1, 0).applyMatrix4(new THREE.Matrix4().getInverse(rotation));
var rotationWorldY = new THREE.Matrix4().makeRotationAxis(worldYAxis, y);
rotation.multiply(rotationWorldY);

var worldZAxis = new THREE.Vector3(0, 0, 1).applyMatrix4(new THREE.Matrix4().getInverse(rotation));
var rotationWorldZ = new THREE.Matrix4().makeRotationAxis(worldZAxis, z);
rotation.multiply(rotationWorldZ);

cube.matrixAutoUpdate = false;
cube.matrix = rotation;

By applying this code, you'll observe rotations happening along the world axes as desired. However, keep in mind that consecutive rotations can distort the intended global axis rotations due to issues with commutative properties of rotations.

If you wish to maintain rotations specifically along world axes regardless of slider movements, you can utilize the function outlined below:

var prevX = 0, prevY = 0, prevZ = 0;
function doRotate() {
    // Code implementation here
}

By binding this function to slider events, you ensure constant rotation along world axes irrespective of object orientation. Just remember that absolute slider values may not directly correspond to specific axis angles but rather represent incremental adjustments relative to the current orientations.

An example demonstrating this behavior is available on this JSFiddle link. Overall, storing the entire transformation matrix instead of individual angle values proves to be a more robust approach for preserving accurate object rotations.

Answer 3

Answer №2

To ensure proper rotations, it is important to include a pivot point within the scene. This pivot point will serve as the central axis for all rotations. The cube mesh should then be attached to the pivot point, allowing for smooth and accurate rotation adjustments.

Feel free to check out the updated jsFiddle link: https://jsfiddle.net/x5w31f33/

var cube = new THREE.Mesh( geometry, material );
cube.position.set(2, 0, 0);

var pivotPoint = new THREE.Object3D();
scene.add( pivotPoint );
pivotPoint.add(cube);

pivotPoint.rotation.set(x, y , z, 'XYZ');

Answer 4

To ensure proper rotations, it is important to include a pivot point within the scene. This pivot point will serve as the central axis for all rotations. The cube mesh should then be attached to the pivot point, allowing for smooth and accurate rotation adjustments.

Feel free to check out the updated jsFiddle link: https://jsfiddle.net/x5w31f33/

var cube = new THREE.Mesh( geometry, material );
cube.position.set(2, 0, 0);

var pivotPoint = new THREE.Object3D();
scene.add( pivotPoint );
pivotPoint.add(cube);

pivotPoint.rotation.set(x, y , z, 'XYZ');

Update an item's precise orientation in relation to the global axis

Answer №1

Answer №2

Similar questions

Incorporating a Custom CKEditor5 Build into an Angular Application

Retrieve a result by utilizing a nested function in conjunction with the request NPM module

Ways to ensure your Javascript code only runs based on the specific browser

What is the process of transforming the content of a file into an array using JavaScript?

Converting Greek text to UTF-8 using Javascript

Adjusting Text Size Depending on Width

Do form validations affect the values assigned to ng-model objects?

the conditional operator used without assigning the result to a variable

Close any open alerts using Protractor

Retrieve information from a JSON file containing multiple JSON objects for viewing purposes

Having trouble with PHP Storm and Vue component not working? Or encountering issues with unresolved function or method in your

Searching for the closest jQuery value associated with a label input

PhantomJS Karma encountering SyntaxError when trying to export variables

using recursion within callback functions

Error: The value of _This.props is not defined

Creating head tags that are less bouncy

Printing HTML to a VueJS page is simple and efficient

Exploring the CSS scale transformation alongside the Javascript offsetHeight attribute

Can someone guide me on how to locate and access the port number?

Creating a unique Angular filter involves combining different techniques and functionalities to tailor