05 | Cameras and Controls

Sun, 19 Jul 2026 12:00:00 +0800

The camera determines “where you look from” and “how much you see”. Master the difference between perspective and orthographic cameras, understand frustum and clipping planes, and you can precisely control the visual presentation of a 3D scene.

01 Learning Objectives

This lesson focuses on Three.js cameras and controls:

Distinguish PerspectiveCamera and OrthographicCamera
Master OrbitControls configuration
Understand camera parameters (fov, aspect, near, far)
Learn camera switching and parameter adjustment

02 Perspective vs Orthographic Camera

Feature	Perspective Camera	Orthographic Camera
Perspective	Near-far scale	Uniform scale
Light convergence	Diverges from a point	Parallel (no convergence)
Frustum shape	Truncated pyramid	Rectangular box
Use case	3D games, realistic scenes	CAD, 2D games, UI

/**
 * Perspective Camera — Simulates human eye
 *
 * Near-far scale, suitable for 3D scenes, games, realistic rendering.
 *
 * PerspectiveCamera(fov, aspect, near, far)
 * fov — Field of view (degrees), wider = more distortion
 * aspect — Aspect ratio (width/height), must update on resize
 * near — Near clipping plane, closer objects hidden
 * far — Far clipping plane, farther objects hidden
 */
const perspectiveCamera = new THREE.PerspectiveCamera(50, aspect, 0.1, 100)
perspectiveCamera.position.set(5, 5, 10)
perspectiveCamera.lookAt(0, 0, 0)

/**
 * Orthographic Camera — No perspective effect
 *
 * Uniform scale, suitable for CAD, architecture preview, 2D games.
 *
 * OrthographicCamera(left, right, top, bottom, near, far)
 * left/right — Visible range horizontal bounds
 * top/bottom — Visible range vertical bounds
 * near/far — Near/far clipping planes
 *
 * Note: Must maintain aspect ratio with screen, otherwise objects stretch
 */
const frustumSize = 10
const orthographicCamera = new THREE.OrthographicCamera(
 -frustumSize * aspect / 2, // left
 frustumSize * aspect / 2, // right
 frustumSize / 2, // top
 -frustumSize / 2, // bottom
 0.1, // near
 100 // far
)

03 Camera Parameters

Parameter	Meaning	Perspective	Orthographic
FOV	Field of view angle	30°-120°	N/A
aspect	Aspect ratio	width/height	width/height
near	Near clipping plane	Closer hidden	Closer hidden
far	Far clipping plane	Farther hidden	Farther hidden
frustumSize	Visible range height	N/A	Controls visible range

FOV and Perspective Distortion

Small FOV (e.g. 30°) → Narrow view (telephoto), objects look large, weak distortion
Large FOV (e.g. 120°) → Wide view (wide-angle), objects look small, strong distortion

Near/Far Clipping Planes

Large Near/Far ratio causes depth precision loss (far objects flicker):

Controls on Feynman's Blog

05 | Cameras and Controls

01 Learning Objectives

02 Perspective vs Orthographic Camera

03 Camera Parameters

FOV and Perspective Distortion

Near/Far Clipping Planes