Skip to content

Renderer

Video Lecture

Scene, Camera and Renderer Scene, Camera and Renderer

 (Pay Per View)

You can use PayPal to purchase a one time viewing of this video for $1.49 USD.

Pay Per View Terms

  • One viewing session of this video will cost the equivalent of $1.49 USD in your currency.
  • After successful purchase, the video will automatically start playing.
  • You can pause, replay and go fullscreen as many times as needed in one single session for up to an hour.
  • Do not refresh the browser since it will invalidate the session.
  • If you want longer-term access to all videos, consider purchasing full access through Udemy or YouTube Memberships instead.
  • This Pay Per View option does not permit downloading this video for later viewing or sharing.
  • All videos are Copyright © 2019-2025 Sean Bradley, all rights reserved.

Description

The most common Renderer used in Three.js is the WebGLRenderer.

It paints the scene and camera information onto a HTML Canvas Element.

The WebGLRenderer will use WebGL.

WebGL allows GPU-accelerated image processing and effects as the renderer creates the 2D image for the Canvas.

To start, replace your ./src/main.ts with this script below.

Lesson Script

./src/main.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 1.5

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

new OrbitControls(camera, renderer.domElement)

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshNormalMaterial({ wireframe: true })

const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

function animate() {
  requestAnimationFrame(animate)

  renderer.render(scene, camera)
}

animate()

When creating a renderer for your Three.js app, it is useful to consider if it should use up 100% of the browsers window space, or you want to set the size explicitly.

When using the whole browser window for the renderer, you can instantiate, setSize and add the renderer.domElement to the HTML body as shown below.

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

The above code will dynamically add a new HTMLCanvasElement to the HMTL document for use when rendering.

If you want to render to an existing HTMLCanvasElement, then you could use something like this below.

Hard code a <canvas> element into your HTML.

<canvas id="canvas"></canvas>

And reference its id when you instantiate a new WebGLRenderer.

const canvas = document.getElementById('canvas') as HTMLCanvasElement
const renderer = new THREE.WebGLRenderer({ canvas: canvas })
renderer.setSize(200, 200)

Note in the above sample, the width and height were set using the renderer.setSize method. This will also automatically set the CSS width and height of the canvas element as well.

Another useful option when instantiating a renderer is to also set the antialias attribute to true.

const renderer = new THREE.WebGLRenderer({ antialias: true })

WebGLRenderer (threejs.org)

WebGLRenderer setScissor Example (sbedit.net)

Multiple Renderers Example (sbedit.net)

WebGL (wikipedia)