Animation Loop

Video Lecture

Lesson Script

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

./src/main.ts

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import Stats from 'three/addons/libs/stats.module.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)

const stats = new Stats()
document.body.appendChild(stats.dom)

function animate() {
  requestAnimationFrame(animate)

  cube.rotation.x += 0.01
  cube.rotation.y += 0.01

  renderer.render(scene, camera)

  stats.update()
}

animate()

Frame Rate Independence

Making the code frame rate independent by considering timer delta.

./src/main.ts

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import Stats from 'three/addons/libs/stats.module.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)

const stats = new Stats()
document.body.appendChild(stats.dom)

const timer = new THREE.Timer()
let delta

function animate() {
  requestAnimationFrame(animate)

  delta = timer.update().getDelta()

  cube.rotation.x += delta
  cube.rotation.y += delta

  renderer.render(scene, camera)

  stats.update()
}

animate()

Working Example

<>

On Demand Rendering

Making the code render only when the OrbitControls properties change or the screen is resized.

./src/main.ts

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)
  renderer.render(scene, camera) // render whenever the screen size changes
})

const controls = new OrbitControls(camera, renderer.domElement)
controls.addEventListener('change', () => {
  renderer.render(scene, camera) // render whenever the OrbitControls changes
})

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

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

renderer.render(scene, camera) // render once when the scene has been setup

Working Example

<>

Troubleshooting

Warning THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.

The THREE.Clock module has been deprecated since Three r183

Previously you could use the THREE.Clock as,

const clock = new THREE.Clock()
let delta

function animate() {
  requestAnimationFrame(animate) // remove this line when using `renderer.setAnimationLoop(animate)`

  delta = clock.getDelta() // only call `.getDelta()` once per animation loop

  cube.rotation.x += delta
  cube.rotation.y += delta // use cached value instead of calling `.getDelta()` again

  renderer.render(scene, camera)
}

But, now you can use the THREE.Timer instead to achieve the same effect as,

const timer = new THREE.Timer()

function animate() {
  requestAnimationFrame(animate) // remove this line when using `renderer.setAnimationLoop(animate)`

  timer.update() // will update the underlying `.getDelta()` value. Call `.update()` only once per animation loop.

  cube.rotation.x += timer.getDelta()
  cube.rotation.y += timer.getDelta() // you can call `.getDelta()` multiple times.

  renderer.render(scene, camera)
}

Useful Links

MDN Window.requestAnimationFrame()

HomeIdea3D