Creating a simulation of a sun-like vector rotating around a sphere in three.js

Question

Creating a simulation of a sun-like vector rotating around a sphere in three.js

Currently, I am attempting to modify this code (which was originally based on an implementation found here). While I have successfully achieved the desired visualization and rendering effects, my goal now is to introduce realistic movement into the animation.

The location of the light source is determined by a normalized vector (e.g. THREE.Vector3(1, 0.75, 0), giving the appearance that the light is shining from the top right corner). My next step involves rotating this vector around the sphere in a manner that simulates the sphere orbiting the light source. However, I have encountered difficulties in calculating the appropriate values for the next set of x, y, z coordinates. Various attempts were made, including adjustments to the position of the vector, as well as the application of Euler angles and rotational matrices:

euler = new THREE.Euler(f,g,h, 'XYZ');
matrix = new THREE.Matrix4().makeRotationFromEuler(euler);
light = vector.applyMatrix4(matrix);

Despite these efforts, uncertainties linger regarding how to determine the correct values for f, g, h that would prevent erratic movements of the light around the sphere.

Would you say that I'm heading in the right direction?

You can view a demonstration of the current setup here: http://jsfiddle.net/VsWb9/3890/

javascript three.js

Answer 1

Answer №1

There is an issue with increasing two of the 3 coordinates in euler angles in a linear manner.

When dealing with rotations that are not around the x/y/z axis, it is recommended to use quaternions for better understanding, avoiding issues, coding efficiently, and reducing computational cost.

Quaternions are quite intuitive, especially in threejs. They consist of 4 coordinates: 3 for the rotation axis and the fourth for the rotation value.

var quat = new THREE.Quaternion();

// Define the axis for rotation (must be normalized)
var axis = new THREE.Vector3(0,1,0).normalize();
// Specify the angle value in radians
var angle = 0;

// Set the original position of the light vector
var light = new THREE.Vector3(1,0,0).normalize();

In your render loop, update the angle value and instruct the quaternion to use the specified axis and angle:

angle += .001; // (or angle -= if the axis points in the +y direction like in this case)
quat.setFromAxisAngle(axis, angle);

Finally, apply the quaternion:

light.applyQuaternion(quat);

Here is the updated fiddle link: http://jsfiddle.net/Atrahasis/0v93p2xy/

Important note on normalized vectors:

A normalized vector has a length of 1 unit.
Vectors like (1, 0, 0), (0, 1, 0), and (0, 0, 1) are already normalized (unit vectors).
A vector such as (1, .75, 0) is not normalized; its length is calculated using Pythagorean theorem as √(1² + .75²) = 1.5625.
For instance, (0.6614..., .75, 0) is a normalized vector.

Answer 2

There is an issue with increasing two of the 3 coordinates in euler angles in a linear manner.

When dealing with rotations that are not around the x/y/z axis, it is recommended to use quaternions for better understanding, avoiding issues, coding efficiently, and reducing computational cost.

Quaternions are quite intuitive, especially in threejs. They consist of 4 coordinates: 3 for the rotation axis and the fourth for the rotation value.

var quat = new THREE.Quaternion();

// Define the axis for rotation (must be normalized)
var axis = new THREE.Vector3(0,1,0).normalize();
// Specify the angle value in radians
var angle = 0;

// Set the original position of the light vector
var light = new THREE.Vector3(1,0,0).normalize();

In your render loop, update the angle value and instruct the quaternion to use the specified axis and angle:

angle += .001; // (or angle -= if the axis points in the +y direction like in this case)
quat.setFromAxisAngle(axis, angle);

Finally, apply the quaternion:

light.applyQuaternion(quat);

Here is the updated fiddle link: http://jsfiddle.net/Atrahasis/0v93p2xy/

Important note on normalized vectors:

A normalized vector has a length of 1 unit.
Vectors like (1, 0, 0), (0, 1, 0), and (0, 0, 1) are already normalized (unit vectors).
A vector such as (1, .75, 0) is not normalized; its length is calculated using Pythagorean theorem as √(1² + .75²) = 1.5625.
For instance, (0.6614..., .75, 0) is a normalized vector.

Creating a simulation of a sun-like vector rotating around a sphere in three.js

Answer №1

Similar questions

Is it possible to request a GET on a server's JSON file using a specific key?

Troubleshooting issue with Bootstrap's responsive scrollspy functionality

I possess a pair of items that require merging together while combining any overlapping key values in their properties

You must provide a secret or key in order to use the JwtStrategy

Display real-time information in angular material table segment by segment

Adding JQuery to a running webpage using the DOM and Opera browser add-ons

Consider creating a distinct document for your "scripts"

Challenges related to streaming processes and uploading to S3 cloud storage

Reorder div elements using jQuery with two specific criteria

Facing issue with local redis session not functioning as intended

Can firebase and express be integrated seamlessly?

Trigger a popup alert when a Bootstrap select live search is clicked

Conceal a text field depending on the value within a hidden field that was populated automatically by a JavaScript function

Enveloping elements with jQuery

Using Javascript, verify if a given URL is legitimate and commences with "http://" or "https://"

How can the table attribute "name" be obtained and added as the file name for DataTables in the export feature?

Is there a way to access the values that have been dynamically updated by JavaScript

Calculate the number of rows in a table that contain identical values

Creating a dynamic variable within a for loop and calculating the total of values to assign to that variable

Tips on converting Django model into desired format for Bootstrap-tables plugin integration