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

Using three.js and tween.js to rotate object in 90 degree increments to create a 360 loop

本文关键字：js 对象 旋转 360度 循环 创建 90度 three tween 使用      更新时间：2023-09-26

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

我希望对象在延迟(工作)下旋转90度，然后继续旋转90度，最终永远循环。不管我做什么，它总是重置。即使我设置了4个补间将我带到360，最后一个重置为0的补间也会使整个对象朝相反的方向旋转。

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

当tween结束时简单调用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 );

Upd: pfff，我在胡说什么?简单使用相对动画(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)
相关文章：