Three.js 在函数内平滑地旋转对象

Question

我已经使用 Three.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 上的实时示例。

Answer 1

您实际上可以做的是使用参数方程来逐步围绕轴旋转立方体。
那会给出类似的东西：

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