Perspective & Orbit Controls
Foundations
Lesson 4 of 15
Frame a subject and constrain orbit controls without moving the scene.
Explore camera field of view, the orbit target, and distance limits around a row of pillars.
How this scene works
setCamera sets the camera position and the controls' target. A perspective camera makes farther objects appear smaller; camera.fov controls the vertical viewing angle in degrees. Call updateProjectionMatrix after changing it. OrbitControls rotates around its target rather than the world origin. The runtime already updates controls and camera aspect on resize, so do not create a second controls instance or animation loop.
Perspective & Orbit Controls
Helper snippet · Three.js 0.183.1 · WebGL
Loading draft
1 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Change fov from 45 to 25, then move the camera farther away to restore the front pillar's size. Compare the apparent spacing of the rear pillars.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
