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

Question

我正在尝试围绕球体旋转立方体，当我按下空格键时，立方体开始围绕球体旋转就好了，但它比我想要的要快得多，我写了一个函数来计算旋转使用“角度”作为参数。完整的旋转需要角度从 0 到 359（或 1 到 360），但不知何故，当角度增加 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”是立方体。

在我的渲染函数中，我必须使用以下代码来增加角度并应用旋转：

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

我不知道为什么增加 7 度会导致立方体围绕球体进行完整旋转，任何代码 sn-ps / 建议将不胜感激。

Answer 1

将立方体的 x 位置视为Math.sin(counter)，将 y 位置视为Math.cos(counter)，其中计数器是在某些 requestAnimationFrame 循环中递增的某个数字，如果空格键向下则递增计数器，如果向上则停止递增。您还可以通过将 Math.sin(counter) 乘以该距离（以像素为单位）来修改距移动立方体的中心点的距离。你肯定知道 sin 的范围是从 -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，你一定能猜出来的。