Question

我试图围绕球体旋转立方体，当我按空格键时，立方体开始围绕球体旋转就好了，但它比我想要的要快得多，我写了一个函数来计算旋转使用＆＃34;角度＆＃34;作为参数。一个完整的旋转需要角度从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);
        }

在上面的代码中＆＃34;白球是球体，＆＃34; keu＆＃34;是立方体。

在我的渲染功能中，我必须遵循代码来增加角度并应用旋转：

            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)，其中计数器在某个requestAnimationFrame循环中递增一些数字，如果空格键已关闭，则递增计数器，如果向上则停止递增它。您还可以通过将Math.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();

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

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

1 个答案: