Tween Js Basics On Three Js Cube

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 THR

Solution 1:

The following is what I did to my scene.

1. Create a separate render() function

2. 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.

3. In TWEEN function, call render function on update.

4. 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.