iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Cameras

By · Reviewed & last updated · Part of Three.js Tutorial

A camera defines the viewer’s perspective onto the scene. The two everyday choices: PerspectiveCamera (FOV, near/far planes, like a real lens) and OrthographicCamera (no perspective — for 2D / CAD / isometric).

Set up both

EXAMPLE
import * as THREE from 'three';

const aspect = window.innerWidth / window.innerHeight;

// Perspective — most common
const persp = new THREE.PerspectiveCamera(
    75,        // FOV (degrees)
    aspect,
    0.1,       // near plane
    1000,      // far plane
);
persp.position.set(0, 0, 5);
persp.lookAt(0, 0, 0);

// Orthographic — 2D feel, no perspective distortion
const d = 5;
const ortho = new THREE.OrthographicCamera(
    -d * aspect, d * aspect,   // left, right
     d, -d,                    // top, bottom
     0.1, 1000,
);

// Resize handler — always keep aspect in sync
window.addEventListener('resize', () => {
    const a = innerWidth / innerHeight;
    persp.aspect = a;
    persp.updateProjectionMatrix();
    renderer.setSize(innerWidth, innerHeight);
});

Why it matters

Forgetting updateProjectionMatrix() after changing camera params is the #1 “why is everything stretched?” bug.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
const camera = new THREE.PerspectiveCamera(
    75, window.innerWidth / window.innerHeight, 0.1, 1000,
);
camera.position.set(0, 0, 5);
Try it Yourself »

Exercise

Most common perspective camera class.

new THREE. Camera(75, w/h, 0.1, 1000);

Discussion

Loading…