🌍 THREE.js Lesson: Cameras & Perspective

Learn how PerspectiveCamera and OrthographicCamera affect how your scene is viewed.

📆 Perspective vs Orthographic

PerspectiveCamera mimics how we see in real life: objects farther away look smaller. OrthographicCamera keeps all sizes consistent regardless of depth.

📁 Example Code: Switching Cameras

// Switch between Perspective and Orthographic views
const isOrtho = false;
const aspect = canvas.clientWidth / canvas.clientHeight;
let camera;

if (isOrtho) {
  camera = new THREE.OrthographicCamera(-aspect*5, aspect*5, 5, -5, 0.1, 100);
} else {
  camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 100);
}
camera.position.z = 10;
scene.add(camera);

🎮 Live Preview

🔗 Pro Tip: Use PerspectiveCamera for immersive 3D views, and OrthographicCamera for UI, diagrams, or isometric-style games.

🧠 Key Takeaways

PerspectiveCamera(fov, aspect, near, far) uses real-world perspective.
OrthographicCamera(left, right, top, bottom, near, far) is flat and great for 2D-style rendering.
Adjust camera.position and lookAt() to change the view.