Three js , bouncing object on mouse click

Question

Hey guys I just started learning Web Gl and Im using Three js.

I created a simple example a cube which is rotating in space , but I would like to animate the cube a little beat for example when I click on the cube it will bounce and return to start position , here is my part of the code for animating stuff

function animateScene(){

                xRotation += xSpeed;
                yRotation += ySpeed;
                cubeMesh.rotation.set(xRotation, yRotation, 0.0);


                cubeMesh.position.z = zTranslation;


                requestAnimationFrame(animateScene);

                renderScene();
            }


            function renderScene(){
                renderer.render(scene, camera);
            }

Do you have some examples of playing with these parameters ?

Answer 1

I guess the effect you are looking for is called "easing". jQuery uses it for instance. If you want to play with coordinates and add some smooth animation I would suggest you to have a look at the Tween.js Library . It allows you to add some easing to three.js objects.
Here is a demo .
And if you select the "Bounce.EaseOut" effect I guess you will you the result you're looking for.

Hope this helps.