Блог

я пытаюсь повернуть куб вокруг сферы, когда я нажимаю пробел, куб начинает вращаться вокруг сферы просто отлично, но это происходит намного быстрее, чем я хотел, я написал функцию, которая вычисляла бы вращение, используя «угол» в качестве параметра. для полного поворота потребуется, чтобы угол менялся от 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 градусов приведет к тому, что куб совершит полный оборот вокруг сферы, любые фрагменты кода / советы будут оценены.

Обрабатывайте позицию x куба как Math.sin(counter) и позицию y как Math.cos(counter) , где счетчик — это некоторое число, увеличиваемое в некотором цикле requestAnimationFrame, и если пробел нажат, увеличьте счетчик, а если вверх, то прекратите его увеличивать. Вы также можете изменить расстояние от вашей центральной точки, вокруг которой вы перемещаете куб, умножив Math.sin(счетчик) на это расстояние (в пикселях). Вы наверняка знаете, что диапазон 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, вы наверняка можете это понять.