Three.js在函数中平滑旋转一个对象

Posted 2023-01-21

我用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.ioAlexGamesRubiksCubeRubiksCube.html。.

答案

实际上，你可以做的是使用一个参数方程使你的立方体围绕斧头逐步旋转。这样就会得到类似..:

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