Rotation with a tilt in Three.js

Question

Rotation with a tilt in Three.js

My goal is to create a solar system simulation using Three.js, but I'm having trouble getting the planets to rotate in an inclined manner around the star. I have attempted to implement a solution, but the rotation is not correct. Here is a sample in a fiddle with the incorrect rotation:

I also tried following the advice provided in this solution: How to rotate a 3D object on axis using three.js?, but I have not been able to achieve the desired result.

If anyone has any tips or suggestions to help me out, I would greatly appreciate it. Thank you!

javascript 3d webgl three.js orbital-mechanics

Answer 1

Answer №1

After inserting an element at the starting position of the pivot, a fresh layout with the ability to rotate is generated.

Check out the solution here.

jsfiddle

Answer 2

After inserting an element at the starting position of the pivot, a fresh layout with the ability to rotate is generated.

Check out the solution here.

jsfiddle

Answer 3

Answer №2

Did you give it a shot?

function move() {

  pivot.rotation.y += 0.01;
  pivot.rotation.x += 0.01;
  requestAnimationFrame(move);
  display();

}

Answer 4

Did you give it a shot?

function move() {

  pivot.rotation.y += 0.01;
  pivot.rotation.x += 0.01;
  requestAnimationFrame(move);
  display();

}

Answer 5

Answer №3

To achieve rotation based on the position vectors of the mesh, a simple approach is to modify the code as follows:

let theta = 0; // Declare a global variable for theta
function render() {
    const orbiter = /* Specify the planet to rotate */;

    orbiter.mesh.position.x = Math.cos(theta) * 100;
    orbiter.mesh.position.z = Math.sin(theta) * 25;
    orbiter.mesh.position.y = Math.cos(theta) * -60;
    theta += 0.02;

    renderer.render(scene, camera);
}

function animate() {
    animation_id = requestAnimationFrame(animate);
    render();
}

animate();

Adjust the values to achieve the desired rotation angles, especially for the position.y parameter. Increasing theta will result in a faster rotation speed.

Answer 6

To achieve rotation based on the position vectors of the mesh, a simple approach is to modify the code as follows:

let theta = 0; // Declare a global variable for theta
function render() {
    const orbiter = /* Specify the planet to rotate */;

    orbiter.mesh.position.x = Math.cos(theta) * 100;
    orbiter.mesh.position.z = Math.sin(theta) * 25;
    orbiter.mesh.position.y = Math.cos(theta) * -60;
    theta += 0.02;

    renderer.render(scene, camera);
}

function animate() {
    animation_id = requestAnimationFrame(animate);
    render();
}

animate();

Adjust the values to achieve the desired rotation angles, especially for the position.y parameter. Increasing theta will result in a faster rotation speed.

Rotation with a tilt in Three.js

Answer №1

Answer №2

Answer №3

Similar questions

Populating hidden fields in Javascript with mouseover event trigger - Pre-click action

Live Update Google Sheet Data to JSON Without Reloading Web Page

The image tag fails to appear on the browser when the client attempts to access it

What is the best way to make a select tag read-only before the Ajax request is successful

Generate tables and rows dynamically

I'm having trouble displaying the content of my list items within the div

Guide on extracting JSON data from specific nodes using d3.js

What is the best strategy for managing pagination when dealing with a large number of pages?

Using a while loop to chain promises in webdriver.io

Using AngularJS to display multiple objects in the same ng-repeat loop

Manage and update events in the Angular Bootstrap Calendar

Reproducing a table row

Once this code is executed, Javascript ceases to function

Avoiding HTML in JavaScript: Tips and Tricks

What is the best way to locate the Vue component I need to share data with?

Adjust the jQuery and PHP script to retrieve both the ID and text content to populate an OPTION element

JavaScript or Query: Transforming an Object from an Associative Array

What's the best way to showcase data in a column dynamically depending on its specific columns?

How to enhance a class in JavaScript by adding a dynamic property

Issues with response functionality in Node.js (Openshift) using express