Three.js rotating a cube around a sphere

Question

i'm trying to rotate a cube around a sphere, when i press the spacebar, the cube starts rotating around the sphere just fine, but it goes a lot quicker than i wanted, i wrote a function which would calculate the rotation using "angle" as a parameter. a full rotation would require the angle to go from 0 to 359 (or 1 to 360), but somehow the cube rotates around the sphere completely when the angle increases by just 7 degrees.

code: (im excluding the initialization of the cube and sphere meshes, just the functions)

        var rotationAngle = 0;
        function rotate(angle)
        {
            if(angle == 0)
            {
                keu.position.x = whiteBall.position.x + 1;
                keu.position.z = whiteBall.position.z;
            } else if(angle > 0 && angle < 90)
            {
                keu.position.x = whiteBall.position.x + Math.cos(angle);
                keu.position.z = whiteBall.position.z - Math.sin(angle);
            } else if(angle == 90)
            {
                keu.position.x = whiteBall.position.x;
                keu.position.z = whiteBall.position.z - 1;
            } else if(angle > 90 && angle < 180)
            {
                angle -= 90;
                keu.position.x = whiteBall.position.x - Math.sin(angle);
                keu.position.z = whiteBall.position.z - Math.cos(angle);
            } else if(angle == 180)
            {
                keu.position.x = whiteBall.position.x - 1;
                keu.position.z = whiteBall.position.z;
            } else if(angle > 180 && angle < 270)
            {
                angle -= 180;
                keu.position.x = whiteBall.position.x - Math.cos(angle);
                keu.position.z = whiteBall.position.z + Math.sin(angle);
            } else if(angle == 270)
            {
                keu.position.x = whiteBall.position.x;
                keu.position.z = whiteBall.position.z + 1;
            }else if(angle > 270 && angle < 360)
            {
                angle -= 270;
                keu.position.x = whiteBall.position.x + Math.sin(angle);
                keu.position.z = whiteBall.position.z + Math.cos(angle);
            }
            console.log(angle);
        }

in the code above "whiteball is the sphere, and "keu" is the cube.

in my render function i have to following code to increase the angle and apply the rotation:

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

i have no idea why an increase of just 7 degrees would cause the cube to make a full rotation around the sphere, any code snippets / advice would be appreciated.

Azamantes Azamantes · Accepted Answer · 2016-10-12T13:03:31

Treat x position of the cube as Math.sin(counter) and y position as Math.cos(counter) where counter is some number being incremented in some requestAnimationFrame loop and if spacebar is down then increment the counter and if up then stop incrementing it. You can also modify the distance from your central point around which you move the cube by multiplying Math.sin(counter) by that distance (in pixels). You surely know range of sin is from -1 to 1.

So the code would look something like:

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 = ...; //your central point, X coordinate of the sphere
const Y = ...// your central point, Y coordinate of the sphere

const distance = 100;
const speed = ...; // how fast do you want your cube to move around the sphere
let counter = 0;
let wholeCircle = false; // will be set to true after first round and stop further movement of the cube
function render() {
    if (isMoving) {
        counter += speed;
    }

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

render();

This is not a code to copy and paste, you needto adjust it to your situation and variable names. It is just to give you an idea on how to do this kind of movement. I didn't use the wholeCircle, you can surely figure it out.

Three.js rotating a cube around a sphere

1 Answers