TweenJS基础上的三个JS立方体

Tween JS basics on three JS cube

本文关键字：三个 JS 立方体 基础上 TweenJS      更新时间：2023-09-26

我是TweenJS的新手，正在尝试使用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. 创建一个单独的render（）函数

  2. 将TWEEN代码放入可以调用的函数中。您希望在此函数开始时删除所有TWEEN。我不完全确定为什么，但我从教程代码中学到了这一点。

  3. 在TWEEN函数中，在更新时调用render函数。

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

以下是骨架代码。检查这是否适用于您的程序：

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

希望能有所帮助。

相关文章：