PerspectiveCamera
Quick answer
PerspectiveCamera mimics human and lens perspective, making near objects appear larger than distant ones. Set fov, aspect, near, and far, keep aspect matched to the canvas, and call updateProjectionMatrix() after every projection change. Use setViewOffset() to render tiled, high-resolution images across several frames.
new THREE.PerspectiveCamera ( fov , aspect , near , far ) → PerspectiveCamera
Key points
- fov is the vertical field of view in degrees; wider values stretch the edges.
- near and far clip planes control depth precision; keep their ratio small.
- getEffectiveFOV() and getFocalLength() account for zoom and film gauge.
Example
const camera = new THREE.PerspectiveCamera(
45,
stage.clientWidth / stage.clientHeight,
0.5,
3000
);
camera.position.set(120, 80, 160);
camera.lookAt(0, 0, 0);
function onResize() {
const w = stage.clientWidth;
const h = stage.clientHeight;
camera.aspect = w / h;
camera.updateProjectionMatrix();
renderer.setSize(w, h);
}camera.setViewOffset(fullWidth, fullHeight, 0, 0, fullWidth / 2, fullHeight);
camera.updateProjectionMatrix();
renderer.setViewport(0, 0, halfWidth, height);
renderer.render(scene, camera);
camera.setViewOffset(fullWidth, fullHeight, fullWidth / 2, 0, fullWidth / 2, fullHeight);
camera.updateProjectionMatrix();
renderer.setViewport(halfWidth, 0, halfWidth, height);
renderer.render(scene, camera);Notes
- Calling lookAt() after setting rotation overwrites the quaternion and breaks the intended view.
- Forgetting updateProjectionMatrix() after resizing leaves a stretched or cropped image.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). PerspectiveCamera. https://www.jingweizhi.com/en/three/api/perspective-camera.html (accessed 2026-11-03).