Learn Three.js - Third Edition

Bouncing the ball

To bounce the ball, we once again add a couple of lines of code to our renderScene function, as follows:

  var step=0; 
  function renderScene() { 
    ... 
    step+=0.04; 
    sphere.position.x = 20 + 10*(Math.cos(step)); 
    sphere.position.y = 2 + 10*Math.abs(Math.sin(step)); 
    ... 
    requestAnimationFrame(renderScene); 
    renderer.render(scene, camera); 
  } 

With the cube, we changed the rotation property; for the sphere, we're going to change its position property in the scene. We want the sphere to bounce from one point in the scene to another with a nice, smooth curve. This is shown in the following diagram:

For this, we need to change its position ...