使用three.js和tween.js以90度为增量旋转对象以创建360循环 [英] Using three.js and tween.js to rotate object in 90 degree increments to create a 360 loop

问题描述

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

I have a working animation, just not the way I would like.

我希望物体旋转90度延迟（工作）然后继续旋转90度，最终永远循环。无论我做什么，它总是重置。即使我将4个补间设置为360，最后一个补零的补间也会使整个对象反向旋转。

I would like the object to rotate 90 degrees with a delay (works) then continue to rotate 90 degrees, ultimately looping forever. No matter what I do, it always resets. Even if I set up 4 tweens taking me to 360, the last tween that resets back zero makes the whole object spin in the opposite direction.

谢谢

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

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

=====EDIT=====

我得到了它的工作，不确定这是否是最有效的方法，但我很满意：

I got it working, not sure if this is the most efficient approach but I'm satisfied:

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

推荐答案

当补间结束时简单调用setTimeout
（ http://jsfiddle.net/bhpf4zvy/ ）：

Simple call setTimeout when tween is end ( 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 );

更新： pfff，我有什么废话???简单使用相对动画（ http://jsfiddle.net/vv06u6rs/7/ ）：

Upd: pfff, what nonsense am I??? Simple use relative animation (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)

这篇关于使用three.js和tween.js以90度为增量旋转对象以创建360循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！