javascript - 使用 three.js 和 tween.js 以 90 度为增量旋转对象以创建 360 度循环

Question

我有一个工作动画，只是不是我想要的方式。

我希望对象延迟旋转 90 度(可行)，然后继续旋转 90 度，最终永远循环。无论我做什么，它总是会重置。即使我设置了 4 个补间动画将我带到 360 度，最后一个重置为零的补间动画也会使整个对象向相反的方向旋转。

谢谢

var width = 1000;
var height = 600;
var scene = new THREE.Scene();
var group = new THREE.Object3D(); //create an empty container

var camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, -500, 1000);
camera.position.x = 180;
camera.position.y = 180;
camera.position.z = 200;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xf0f0f0);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(300, 300, 300);
var material = new THREE.MeshLambertMaterial({
    color: 0xffffff,
    shading: THREE.SmoothShading,
    overdraw: 0.5
});
var cube = new THREE.Mesh(geometry, material);
group.add(cube);

var canvas1 = document.createElement('canvas');
canvas1.width = 1000;
canvas1.height = 1000;
var context1 = canvas1.getContext('2d');
context1.font = "Bold 20px Helvetica";
context1.fillStyle = "rgba(0,0,0,0.95)";
context1.fillText('Text bit', 500, 500);

// canvas contents will be used for a texture
var texture1 = new THREE.Texture(canvas1)
texture1.needsUpdate = true;

var material1 = new THREE.MeshBasicMaterial({
    map: texture1,
    side: THREE.DoubleSide
});
material1.transparent = true;

var mesh1 = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(2000, 2000),
    material1
);
mesh1.position.set(-150, 150, 151);
group.add(mesh1);

directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 0, 0)
scene.add(directionalLight);

directionalLight = new THREE.DirectionalLight(0x888888);
directionalLight.position.set(0, 1, 0)
scene.add(directionalLight);

directionalLight = new THREE.DirectionalLight(0xcccccc);
directionalLight.position.set(0, 0, 1)
scene.add(directionalLight);

scene.add(group)

// with help from https://github.com/tweenjs/tween.js/issues/14
var tween = new TWEEN.Tween(group.rotation).to({ y: -(90 * Math.PI / 180)}, 1000).delay(1000);
tween.onComplete(function() {
    group.rotation.y = 0;
});
tween.chain(tween);

tween.start();

camera.lookAt(scene.position);

var render = function() {
    requestAnimationFrame(render);
    TWEEN.update();
    renderer.render(scene, camera);
};

render();

=====编辑=====

我成功了，不确定这是否是最有效的方法，但我很满意:

var start = {}
start.y = 0;
var targ = {};
targ.y = 90*Math.PI/180

function rot(s,t) {
  start["y"] = s;
  targ["y"] = t;
}

var cnt1 = 1;
var cnt2 = 2;

rot(0,90*Math.PI/180);

var tween = new TWEEN.Tween(start).to(targ, 1000).delay(1000);
tween.onUpdate(function() {
   group.rotation.y = start.y;
})
tween.onComplete(function() {
  _c = cnt1++;
  _d = cnt2++;
  rot((_c*90)*Math.PI/180,(_d*90)*Math.PI/180)
});

tween.chain(tween);

tween.start();

Answer 1

补间结束时简单调用setTimeout( http://jsfiddle.net/bhpf4zvy/ ):

function tRotate( obj, angles, delay, pause ) {
    new TWEEN.Tween(group.rotation)
        .delay(pause)
        .to( {
                x: obj.rotation._x + angles.x,            
                y: obj.rotation._y + angles.y,
                z: obj.rotation._z + angles.z            
            }, delay )
        .onComplete(function() {
                setTimeout( tRotate, pause, obj, angles, delay, pause );
            })
        .start();
}
tRotate(group, {x:0,y:-Math.PI/2,z:0}, 1000, 500 );

更新:噗，我在胡说什么？？？简单使用相对动画(http://jsfiddle.net/vv06u6rs/7/):

var tween = new TWEEN.Tween(group.rotation)
        .to({ y: "-" + Math.PI/2}, 1000) // relative animation
        .delay(1000)
        .onComplete(function() {
            // Check that the full 360 degrees of rotation, 
            // and calculate the remainder of the division to avoid overflow.
            if (Math.abs(group.rotation.y)>=2*Math.PI) {
                group.rotation.y = group.rotation.y % (2*Math.PI);
            }
        })
        .start();
tween.repeat(Infinity)