Adjusting the orientation of a vector worldwide using a quaternion in THREE.js

Question

Adjusting the orientation of a vector worldwide using a quaternion in THREE.js

Is there a way to set the absolute global rotation of a vector using a quaternion?

Imagine a function called f(v, q) which rotates vector v to quaternion q.

While THREE.Vector3 has a .applyQuaternion function for applying rotations to vectors, this is a relative rotation. For instance, calling f(f(v, q), q) applies q twice instead of the desired result f(f(v, q), q) = f(v, q) where q represents the absolute rotation.

I am aware that I can calculate some

deltaQ = currentQ.premultiply(q.inverse())

and then use .applyQuaternion, but the challenge lies in retrieving the currentQ or the current rotation of the vector so that it can be reversed and updated with the new quaternion.

Your assistance is greatly appreciated!

UPDATE:

My goal is to rotate around a point specified in world coordinate space, hence the usage of object.worldToLocal and object.localToWorld functions. However, when performing these conversions, the rotating object seems to veer off course.

javascript three.js 3d geometry quaternions

Answer 1

Answer №1

The most straightforward method to achieve this is by resetting the Vector3 back to its original state, and then applying the quaternion transformation to this reset vector. This effectively removes any previous rotation that may have been applied. For example, assuming the vector's default orientation is pointing in the direction of 'UP':

function transformVector(v, q) {
    v.set(0, 1, 0);
    v.applyQuaternion(q);
    return v;
}

Answer 2

The most straightforward method to achieve this is by resetting the Vector3 back to its original state, and then applying the quaternion transformation to this reset vector. This effectively removes any previous rotation that may have been applied. For example, assuming the vector's default orientation is pointing in the direction of 'UP':

function transformVector(v, q) {
    v.set(0, 1, 0);
    v.applyQuaternion(q);
    return v;
}

Adjusting the orientation of a vector worldwide using a quaternion in THREE.js

Answer №1

Similar questions

When utilizing Express, only the index.html page is rendered, all additional pages

Transitioning from Three.js's CanvasRenderer to WebGLRenderer is a significant upgrade

Unable to retrieve data from variables in ejs templates

Is it possible to set an onmousedown event to represent the value stored at a specific index in an array, rather than the entire array call?

How to Create a Speech Bubble in SVG Using SnapSVG

Keeping track of both the search query and the results

What is the best way to implement lazy loading of images that have not been downloaded in a JavaFX WebView?

What is the best way to retrieve the value from a textfield in one module and use it in a

Switch out bootstrap icons for angular material icons

Developing a personalized data binding feature with AngularJS and utilizing ng-repeat

What could be causing my Discord bot to remain offline even when I run the command node main.js?

Angular 2: Troubleshooting Issues with Observable Data Display

"Utilize the canvas to crop and draw an image

Failure to pass parameters between different states

Exploring Style Attribute Manipulation using vanilla JavaScript on Firefox

The PrimeNG FullCalendar feature seems to be malfunctioning and cannot be located

How can I determine if a variable is a primitive type and not an object?

What is the best method for accessing the value of material-ui's Autocomplete Select component?

"Utilize Regular Expressions to conceal part of a text string with a

Submit a set of form variables to PHP using AJAX