Using trigonometry, create random orbits in multiple directions around a central point in THREE.js

Question

Using trigonometry, create random orbits in multiple directions around a central point in THREE.js

I'm attempting to create a swirling motion of multiple objects around a single Vector3 point, each moving in different directions to give the effect of swarming around the center.

Instead of simply wrapping each object in a Container and applying random rotations, I am using a trigonometry approach to project their 3D vectors into 2D positions for labeling above the canvas. However, the container method interferes with the project class.

Below is my current code, which causes all objects to rotate around the central point along the same orbit path:

for(var i = 0; i<objectsArr.length; i++){
    var obj = objectsArr[i];
    var radius = obj.angle * (Math.PI / 180);
    obj.position.x = obj.radius * Math.cos(radius); 
    obj.position.y = obj.radius * Math.sin(radius);
    obj.angle += obj.orbitSpeed;
}

Would anyone happen to know how I can adjust this code so that the objects orbit in random directions along the X, Y, Z axis?

javascript 3d three.js trigonometry

Answer 1

Answer №1

Initially, refer to this particular solution for rotating objects around a specific point.

Based on your code snippet, it seems like you are storing each object's orbit speed and their current rotation angle (representing the vector to the position). Instead of storing a 2D angle, consider storing it as a Vector3 which indicates the normal (perpendicular) to the object's orbital plane. This approach will enable you to create diverse orbital planes later on, leading to a more intricate "swarm" effect. Furthermore, I recommend maintaining the orbit speed in radians per step to avoid frequent conversions during each iteration.

The remaining part of the issue becomes quite straightforward with the availability of the Vector3.applyAxisAngle method.

Below is some pseudo-code:

Subtract the rotation point's position from the object's position.
Utilize the object's orbit speed and angle to update the temporary position.
Add back the rotation point's position to the object's position.

To incorporate this in your code:

var obj;
for(var i = 0; i< objectsArr.length; i++){
    obj = objectsArr[i];
    obj.position.sub(rotationPoint); // rotationPoint is a Vector3
    obj.position.applyAxisAngle(obj.angle, obj.orbitSpeed);
    obj.add(rotationPoint);
}

Here's a live demonstration featuring several objects orbiting randomly around a "nucleus" positioned at (10, 10, 10).

... (The rest of the code remains unchanged) ...

three.js r86

Answer 2

Initially, refer to this particular solution for rotating objects around a specific point.

Based on your code snippet, it seems like you are storing each object's orbit speed and their current rotation angle (representing the vector to the position). Instead of storing a 2D angle, consider storing it as a Vector3 which indicates the normal (perpendicular) to the object's orbital plane. This approach will enable you to create diverse orbital planes later on, leading to a more intricate "swarm" effect. Furthermore, I recommend maintaining the orbit speed in radians per step to avoid frequent conversions during each iteration.

The remaining part of the issue becomes quite straightforward with the availability of the Vector3.applyAxisAngle method.

Below is some pseudo-code:

Subtract the rotation point's position from the object's position.
Utilize the object's orbit speed and angle to update the temporary position.
Add back the rotation point's position to the object's position.

To incorporate this in your code:

var obj;
for(var i = 0; i< objectsArr.length; i++){
    obj = objectsArr[i];
    obj.position.sub(rotationPoint); // rotationPoint is a Vector3
    obj.position.applyAxisAngle(obj.angle, obj.orbitSpeed);
    obj.add(rotationPoint);
}

Here's a live demonstration featuring several objects orbiting randomly around a "nucleus" positioned at (10, 10, 10).

... (The rest of the code remains unchanged) ...

three.js r86

Using trigonometry, create random orbits in multiple directions around a central point in THREE.js

Answer №1

Similar questions

Updating the ID's of nested elements in JavaScript when duplicating an element

Retrieve information from Google Sheets to use in SVG map

What happens when an AJAX request doesn't have a success field?

Maintaining checkbox state using fetch arrays

Implementing a feature to dynamically add multiple markers on Google Maps

Use Object.assign to swap out the current state with a new

Struggling to implement touch event functionality for CSS3 spotlight effect

Unable to accurately render selected item from drop-down menu

JavaScript: selecting multiple elements with identical attributes

Having trouble fetching AJAX POST data in PHP?

What is the correct way to utilize ng-if/ng-show/ng-hide to hide or show HTML elements within the app.run function

Adding a class to the body depending on the tag or href that was clicked on the previous page

Potential issue with Jhipster: loading of data could be experiencing delays

Sorting data in Javascript can be done efficiently by utilizing the .filter method

Adding text chips to a text field in Vuetify - A simple guide

Ways to Enhance jQuery Efficiency in a Broader Sense

Set a maximum height for an image without changing its width dimension

Generate Swagger documentation for an API developed using Express 4.x

Uncovering the Mystery of Undefined Dom Ref Values in Vue 3 Templaterefs

Troubleshooting: Directives in Angular 4 not recognizing RegEx patterns