Animating a cube with Three.js as it orbits a sphere

Question

Animating a cube with Three.js as it orbits a sphere

I have been working on rotating a cube around a sphere in my project. When I press the spacebar, the cube begins to rotate around the sphere as intended. However, I am facing an issue where the rotation is much faster than expected. I created a function that calculates the rotation using an "angle" parameter. Initially, I thought a full rotation from 0 to 359 degrees would be necessary, but surprisingly, the cube completes a full rotation around the sphere when the angle increases by just 7 degrees.

Here is the relevant code snippet excluding the setup of cube and sphere meshes:


var rotationAngle = 0;
function rotate(angle)
{
    // Rotation logic for cube position around the sphere
}

In the above code, "whiteBall" represents the sphere, and "keu" represents the cube.

Within my render function, I increment the angle and call the rotate function to apply the rotation:


if(isKeyPressed)
{
    if(rotationAngle < 360)
    {
        rotationAngle += 1;
    }
    if(rotationAngle == 360)
        rotationAngle = 0;
}
rotate(rotationAngle);

I am puzzled as to why such a small increase like 7 degrees results in a complete rotation of the cube around the sphere. Any suggestions or code snippets to rectify this behavior would be greatly appreciated.

javascript 3d three.js rotation

Answer 1

Answer №1

Consider the x position of the cube as Math.sin(counter) and the y position as Math.cos(counter). The counter variable is incremented within a requestAnimationFrame loop. If the spacebar is pressed, the counter increments; if released, it stops incrementing. To adjust the distance from the center point at which the cube moves, multiply Math.sin(counter) by that distance (in pixels), bearing in mind the sin range (-1 to 1).

A possible code snippet may resemble this:

let isMoving = false;
document.body.addEventListener('keydown', event => {
    if (event.key === 'Space') {
        isMoving = true;
    }
});
document.body.addEventListener('keyup', event => {
    if (event.key === 'Space') {
        isMoving = false;
    }
});

const X = ...; //X coordinate of central point
const Y = ...; //Y coordinate of central point

const distance = 100;
const speed = ...; //speed of cube movement around the sphere
let counter = 0;
let wholeCircle = false; //indicate completion of first revolution
function render() {
    if (isMoving) {
        counter += speed;
    }

    cube.position.x = X + distance * Math.sin(counter);
    cube.position.y = Y + distance * Math.cos(counter);
}

render();

This code is a template for guidance, not to be copied directly. Adjust variables and logic according to your scenario. The use of wholeCircle is omitted but can be implemented based on your requirements.

Answer 2

Consider the x position of the cube as Math.sin(counter) and the y position as Math.cos(counter). The counter variable is incremented within a requestAnimationFrame loop. If the spacebar is pressed, the counter increments; if released, it stops incrementing. To adjust the distance from the center point at which the cube moves, multiply Math.sin(counter) by that distance (in pixels), bearing in mind the sin range (-1 to 1).

A possible code snippet may resemble this:

let isMoving = false;
document.body.addEventListener('keydown', event => {
    if (event.key === 'Space') {
        isMoving = true;
    }
});
document.body.addEventListener('keyup', event => {
    if (event.key === 'Space') {
        isMoving = false;
    }
});

const X = ...; //X coordinate of central point
const Y = ...; //Y coordinate of central point

const distance = 100;
const speed = ...; //speed of cube movement around the sphere
let counter = 0;
let wholeCircle = false; //indicate completion of first revolution
function render() {
    if (isMoving) {
        counter += speed;
    }

    cube.position.x = X + distance * Math.sin(counter);
    cube.position.y = Y + distance * Math.cos(counter);
}

render();

This code is a template for guidance, not to be copied directly. Adjust variables and logic according to your scenario. The use of wholeCircle is omitted but can be implemented based on your requirements.

Animating a cube with Three.js as it orbits a sphere

Answer №1

Similar questions

The advantages of utilizing a "for" loop for appending a method to an object Array

Implementing atomic design principles in Vue 3 with TypeScript

extracting a JSON array from an API

Can content be dynamically loaded through ajax in Simile Timeline instead of being loaded upfront?

Struggling to implement touch event functionality for CSS3 spotlight effect

Utilize JavaScript array to filter, match, and perform calculations based on dates and names

Steps to set up binance-api-nodeSteps for installing binance

The dynamic duo: Formik meets Material-UI

Using Javascript to dynamically add form fields based on the selection made in a combo box

Experience seamless navigation with Highstock's fluid panning feature

Having trouble sending 3 variables through JSON

Discovering a specific element within a deeply nested JavaScript object

"Trouble with props: List items not showing up after refreshing the page

Event handlers in JQuery are not connected through breadcrumb links

The dropdown selection for redirecting to a URL is malfunctioning within a PHP while loop

Can the console application in a browser be used to search for specific sections of a website based on their color?

Using JavaScript, append a variable to the existing URL

Executing jQuery AJAX requests in a chain with interdependent tasks

Adjusting the size of HighCharts HighMaps with a custom function

The results generated by the Google Maps API are consistently consistent