javascript - Three.js 围绕球体旋转立方体

Question

我正在尝试围绕球体旋转立方体，当我按空格键时，立方体开始围绕球体旋转得很好，但它比我想要的要快得多，我编写了一个可以计算旋转的函数使用“Angular ”作为参数。完全旋转需要 Angular 从 0 到 359(或 1 到 360)，但是当 Angular 仅增加 7 度时，立方体就会完全围绕球体旋转。

代码:(不包括立方体和球体网格的初始化，只是函数)

        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);
        }

在上面的代码中，“whiteball 是球体，“keu”是立方体。

在我的渲染函数中，我必须遵循代码来增加 Angular 并应用旋转:

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

我不知道为什么仅仅增加 7 度就会导致立方体绕球体旋转一圈，任何代码片段/建议将不胜感激。

Answer 1

将立方体的 x 位置视为 Math.sin(counter)，将 y 位置视为 Math.cos(counter)，其中 counter 是在某些 requestAnimationFrame 中递增的某个数字循环，如果空格键向下，则递增计数器，如果向上，则停止递增。您还可以通过将 Math.sin(counter) 乘以距离(以像素为单位)来修改立方体移动时距中心点的距离。您肯定知道罪恶的范围是从 -1 到 1。

所以代码看起来像这样:

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();

这不是复制粘贴的代码，您需要根据您的情况和变量名称进行调整。它只是为了给您一个关于如何进行这种运动的想法。我没有使用wholeCircle，你一定能猜出来。