Dolly Zoom (Vertigo Effect)

What this code does

- Dolly Zoom: cinematic technique that moves camera while changing field of view.
- Object Constancy: red sphere maintains same apparent size throughout effect.
- Background Distortion: distant objects change size creating the "vertigo" feeling.
- FOV vs Distance: inverse relationship maintains subject size while warping perspective.
- Hitchcock Effect: famously used in "Vertigo" (1958) for psychological impact.
- Interactive Control: real-time slider to demonstrate the effect strength.

JavaScript (plain)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.set(0, 2, 10)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

document.querySelector('#app').appendChild(renderer.domElement)

let dollyZoomStrength = 0
let initialFov = 75
let initialDistance = 10

function updateDollyZoom(strength) {
  const newDistance = initialDistance + strength * 10
  const newFov = initialFov - strength * 30

  camera.position.setLength(Math.max(1, newDistance))
  camera.fov = Math.max(10, Math.min(150, newFov))
  camera.updateProjectionMatrix()
}

function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
animate()