Using a Renderer to Project What the Camera Sees

The scene and the camera are enough to describe how the scene looks and from where we’re viewing it, but one more thing is required to show it on the web page. This is the job of the renderer. It shows, or renders, the scene as the camera sees it:

 
// This will draw what the camera sees onto the screen:
 
var​ renderer = ​new​ THREE.CanvasRenderer();
 
renderer.setSize(window.innerWidth, window.innerHeight);
 
document.body.appendChild(renderer.domElement);

We have to tell the renderer the size of the screen to which it will be drawing. We set the size of the view to take up the whole browser (window.innerWidth and window.innerHeight).

To include the renderer in the web page, we use its domElement ...

Get 3D Game Programming for Kids now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.