`Shifting a spherical object from point A to point B along its axis`

Question

`Shifting a spherical object from point A to point B along its axis`

I am currently working on a project that involves rotating a sphere from point A to point B on itself. After finding Unity3d code for this, I came across the following solution:

Quaternion rot = Quaternion.FromToRotation (pointA, pointB);
sphere.transform.rotation *= rot; //Multiplying rotations gives the final rotation

I found this information on , but now I am struggling to implement it in Three.js.

This is what I have tried so far:

var s = sphere mesh
var va = 1st start vector
var vb = 2nd end vector;

var qa = new THREE.Quaternion(va.x, va.y, va.z, 1);
var qb = new THREE.Quaternion(vb.x, vb.y, vb.z, 1);
var qc = new THREE.Quaternion();

THREE.Quaternion.slerp(qa, qb, qc, 1);

s.useQuaternion = true;
s.quaternion = qc;

Any help or guidance on this would be greatly appreciated. Thank you!

javascript math webgl three.js

Answer 1

Answer №1

Imagine the sphere being perfectly centered at its origin with vector A</> and <code>B both normalized to unit length. Calculate the cross product of C = A×B. This resultant vector will serve as your rotation axis. The angle for your rotation can be found using

θ = cos<sup>-1</sup>(A∙B)

, where A∙B is the dot product of the unit vectors A and B. Remember that the angle measurement here is typically in radians, not degrees.

If the sphere isn't exactly at the origin or if its radius differs from unity, you'll need to normalize and adjust vectors A and B before determining the rotation. Below illustrates this:

A' ← (A-P)/|A-P|     // Normalized version of A
B' ← (B-P)/|B-P|     // Normalized version of B
V ← A'×B'            // Axis around which system rotates
θ ← cos<sup>-1</sup>(A'∙B')      // Angle of rotation

Now, utilize V and θ as your inputs for constructing the quaternion needed to define your rotation. Note that this rotation will be centered at the origin. Prior to applying it, make sure to first translate by -P, then execute the rotation, and finally shift back by P.

A quick note: There may be a potential sign error present. If things aren't working out, it could be due to the cross product's sign not aligning correctly with the dot product's sign. To resolve this, simply reverse the order of arguments in the cross product.

Answer 2

Imagine the sphere being perfectly centered at its origin with vector A</> and <code>B both normalized to unit length. Calculate the cross product of C = A×B. This resultant vector will serve as your rotation axis. The angle for your rotation can be found using

θ = cos<sup>-1</sup>(A∙B)

, where A∙B is the dot product of the unit vectors A and B. Remember that the angle measurement here is typically in radians, not degrees.

If the sphere isn't exactly at the origin or if its radius differs from unity, you'll need to normalize and adjust vectors A and B before determining the rotation. Below illustrates this:

A' ← (A-P)/|A-P|     // Normalized version of A
B' ← (B-P)/|B-P|     // Normalized version of B
V ← A'×B'            // Axis around which system rotates
θ ← cos<sup>-1</sup>(A'∙B')      // Angle of rotation

Now, utilize V and θ as your inputs for constructing the quaternion needed to define your rotation. Note that this rotation will be centered at the origin. Prior to applying it, make sure to first translate by -P, then execute the rotation, and finally shift back by P.

A quick note: There may be a potential sign error present. If things aren't working out, it could be due to the cross product's sign not aligning correctly with the dot product's sign. To resolve this, simply reverse the order of arguments in the cross product.

Answer 3

Answer №2

let angleX = group.rotation.y;
let angleY = -longitude * (Math.PI / 180) % (2 * Math.PI);
let angleZ = Math.PI / 2 * -1;
group.rotation.y = angleX % (2 * Math.PI);
group.rotation.x = latitude * (Math.PI / 180) % Math.PI;
group.rotation.y = angleY + angleZ;

where latitude=a, longitude=b, group=Object3D(or sphere)

Answer 4

let angleX = group.rotation.y;
let angleY = -longitude * (Math.PI / 180) % (2 * Math.PI);
let angleZ = Math.PI / 2 * -1;
group.rotation.y = angleX % (2 * Math.PI);
group.rotation.x = latitude * (Math.PI / 180) % Math.PI;
group.rotation.y = angleY + angleZ;

where latitude=a, longitude=b, group=Object3D(or sphere)

`Shifting a spherical object from point A to point B along its axis`

Answer №1

Answer №2

Similar questions

Having trouble getting Angular 2 animations to fade in

How to eliminate a particular item within a string only in rows that include a different specific item using JavaScript

Send the output of an asynchronous ajax request to the designated function within the jQuery Validation plugin

The requested Javascript function could not be found

The jQuery functions properly offline, but fails to load when connected to the

Are you looking to load pictures using jQuery?

What is the best way to implement the populate method in Node.js when working with MongoDB?

Vue function displays 'undefined' message

What techniques can be used to avoid the MUI `DataGrid` from constantly re-rendering when a row is committed?

Tips for identifying MIME type errors in an Angular 9 application and receiving alerts

I am looking for a tool that can extract XML data from a remote URL and convert it into JSON format for easy retrieval using JavaScript

What could be causing Vuejs to not update elements promptly?

Using JavaScript to Transmit URL

React: Despite my efforts to return a value from render, nothing was actually returned

verification tool for a less file's syntax

Reduce the amount of ajax calls

How to Use Javascript to Listen for Events on a Different Web Page

Error updating model: The `teams` model cannot be modified once it has been compiled

Exploring the Integration of jQuery AJAX in a Contact Form

Error: Authorization requires both data and salt arguments