Tween JS basics on three JS cube

Question

I am new to Tween JS, and trying to make a simple animation of moving to the right using Tween.

Below is my code in the init function ( I am using 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();

And my animate function:

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

The cube is there but the tween is not working. Is there something I miss?

Shawn_Fan · Accepted Answer · 2014-09-09 15:28:53Z

4

The following is what I did to my scene.

Create a separate render() function
Put the TWEEN code into a function that you can call. You want to remove all TWEENs at beginning of this function. I am not entirely sure why, but I learned that from tutorial code.
In TWEEN function, call render function on update.
Call TWEEN.update in your animation through your non-stop animation loop. Note: render() will be called every time you update the TWEEN.

The following is the skeleton code. Check if that could apply to your program:

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

Hope it helps.

answered Sep 9, 2014 at 15:28

Shawn_Fan

12810 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RickyHalim Over a year ago

Thanks! I figured out how to use the tween :)

Collectives™ on Stack Overflow

Tween JS basics on three JS cube

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related