3. js плавное вращение объекта внутри функции - PullRequest
Новая
       26

3. js плавное вращение объекта внутри функции

0 голосов
/ 27 мая 2020

Я построил кубик Рубика, используя 3. js, и все это работает, но я хотел бы анимировать вращение куба. Прямо сейчас, когда я поворачиваю одну сторону, она просто встает в новое положение. Как я могу позволить ему медленно вращаться?

Код, который я использую сейчас: 

function turnOrangeSide(inverse) {
    let x = 0;
    let y = 1;
    let z = 1;
    orangeGroup = new THREE.Object3D();
    scene.add(orangeGroup);

    //This puts all the parts of the Cube that have to be turned in the group.
    orangeGroup.attach(getIntersecting(rotationPointO, x, y, z + 1));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y, z - 1));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y + 1, z));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y - 1, z));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y + 1, z + 1));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y - 1, z + 1));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y + 1, z - 1));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y - 1, z - 1));

    let rotation = Math.PI / 2
    if (inverse) rotation = -Math.PI / 2
    orangeGroup.rotation.x += rotation;
}

Живой пример на https://rekhyt2901.github.io/AlexGames/RubiksCube/RubiksCube.html.

1 Ответ

0 голосов
/ 27 мая 2020

На самом деле вы могли бы использовать уравнение c для постепенного вращения куба вокруг оси.
Это даст что-то вроде: 

let fps = 60;           // fps/seconds
let tau = 2;            // 2 seconds
const step = 1 / (tau * fps);  // step per frame
const finalAngle = Math.PI/2;
const angleStep = finalAngle * step;
let t = 0;

function animateGroup(t){
   if (t >= 1) return; // Motion ended
   t += step;  // Increment time
   orangeGroup.rotation.x += angleStep; // Increment rotation
   requestAnimationFrame(() => animateGroup(t));
}

animateGroup(t);
...