Render on demand

If you don't need to render to the screen in Three.js constantly, e.g a static scene that only needs to be updated on user input, it's best to only render the scene when needed. This will boost your website's performance, especially if the scene is complex.

How

Surround your renderer.render call inside your requestAnimationFrame loop with a canRender if statement. Don't forget to define canRender before rendering. You should set canRender to true the first time.
Inside your if statement, you should set canRender to false after rendering. Depending on your use case, this is optional.

Now, whenever you want to update the canvas, simply do

canRender = true;

This will call renderer.render(scene,camera).

Alternatively

You don't need an animation loop and an if statement, simply do renderer.render when needed.

Using with OrbitControls

To render on-demand with OrbitControls, use the update event listener to render.

controls.update = function(){
canRender = true; //or renderer.render(scene,camera)
}