关于三个JS立方体的Tween JS基础知识

时间:2014-09-09 08:30:17

标签: javascript animation three.js tween

我是Tween JS的新手,并尝试制作一个使用Tween向右移动的简单动画。

下面是我在init函数中的代码(我正在使用Three JS):

var geometry = new THREE.CylinderGeometry( 200,200, 200, 4, 0 );
    var material =  new THREE.MeshPhongMaterial( { ambient: 0xf0f0f0, color: 0x006699, specular: 0x006699, shininess: 60, shading: THREE.FlatShading } );
    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.x = 0;
    mesh.position.y = 0;
    mesh.position.z = 0;
    mesh.updateMatrix();
    mesh.matrixAutoUpdate = false;
    scene.add( mesh );

     var tween = new TWEEN.Tween( { x: 0, y: 0 } )
     .to( { x: 400 }, 2000 )
     .easing( TWEEN.Easing.Elastic.InOut )
     .onUpdate( function () {

      mesh.position.x =  Math.round( this.x );
       } ).start();

我的动画功能:

requestAnimationFrame(animate);        
renderer.render(scene, camera);
TWEEN.update();
update();

多维数据集在那里,但补间不起作用。有什么我想念的吗?

1 个答案:

答案 0 :(得分:4)

以下是我对我的场景所做的。

  1. 创建单独的render()函数

  2. 将TWEEN代码放入可以调用的函数中。您想要在此功能开始时删除所有TWEEN。我不完全确定原因,但是我从教程代码中学到了这一点。

  3. 在TWEEN函数中,在更新时调用渲染函数。

  4. 通过不间断的动画循环在动画中调用TWEEN.update。注意:每次更新TWEEN时都会调用render()。

  5. 以下是骨架代码。检查这是否适用于您的计划:

    //TWEEN function
    function moveObject( ) {
        TWEEN.removeAll();
        new TWEEN.Tween( { x: 0, y: 0 } )
        .to( { x: 400 }, 2000 )
        .easing( TWEEN.Easing.Elastic.InOut )
        .onUpdate( render )
        .start();   
    };
    //NON-STOP animation loop
    function animation(){
        requestAnimationFrame(animate);  
        TWEEN.update();
    }
    //Render function
    function render(){
        renderer.render(scene, camera);
    }
    

    希望它有所帮助。