Skip to content

Latest commit

 

History

History
37 lines (28 loc) · 1.68 KB

02_run_scene.md

File metadata and controls

37 lines (28 loc) · 1.68 KB

Example step

Let your scene be rendered

Goal

Understand WebGL rendering pipeline and requestAnimationFrame() role.

Instructions

In order to give you a nice picture of the scene, the render must know that the scene is existing and the point of view you are looking from (the camera, in other words)

  • create a function without arguments and call it animate

  • in animate function, let the renderer parse your scene, passing it your scene and the camera

    renderer.render(scene, camera);
  • now insert a recursive call into the animate function, making it be called each frame, with the native function

    window.requestAnimationFrame(animate)
  • last, call window.requestAnimationFrame(animate) somewhere in the end of your script; this way you are starting the whole chain

Explanation

Building a scene is not enough: we need to ask THREE Renderer to "cook" it for us, passing it the scene itself and our point of view (the camera).

Then, we might want this process to run for each available frame.

Let's think about it as a movie. Each movie is build on a fast repetition of frames: still images that, moving fast (more or less 30 fps) make a kind magic with our eyes and let us give the illusion of motions.

Deeper: