Navigate

Search topics across all sections

GitHub
Debug & Helpers

Camera Types

The camera determines how your 3D world is projected onto a flat screen. Two fundamental types exist: PerspectiveCamera mimics how human eyes see (distant things look smaller), and OrthographicCamera preserves size regardless of distance. Choosing the right one changes everything.

You're building an isometric strategy game. Everything should look clean and uniform. But distant buildings appear smaller than close ones, grid lines converge toward the horizon, and your carefully designed tile layout looks warped. You're using a PerspectiveCamera for something that needs no perspective at all.

terminal
Isometric game looks like a 3D FPS instead of a clean top-down view. Tile alignment is broken.

Real-world

Think of it as Window vs Telescope.

A PerspectiveCamera is like looking through a window. Things close to you are big, things far away are small. Railroad tracks converge in the distance. This is how your eyes work — it feels natural and immersive.

An OrthographicCamera is like looking through a technical scope. Everything is the same size regardless of distance. Railroad tracks stay perfectly parallel. This is how blueprints and isometric games work — clean, precise, no distortion.

Neither is "better" — they serve different purposes. An FPS game needs perspective. An isometric city builder needs orthographic.

3D Scene

Objects in world space

Camera

Projects 3D to 2D

Screen

Flat image you see

Hands-On: Setting Up Cameras

Let's configure both camera types to understand how their parameters shape what you see on screen.

Step 1: PerspectiveCamera basics

App.tsxTSX
// The default camera in R3F is Perspective
<Canvas camera={{
  fov: 50,            // Field of View (degrees)
  near: 0.1,          // Closest visible distance
  far: 1000,          // Farthest visible distance
  position: [3, 2, 3] // Where the camera sits
}}>
  <MyScene />
</Canvas>

// FOV controls "zoom" — lower = more zoomed in
// near/far define the visible range (frustum)

The four key parameters are FOV (how wide you see), near plane (closest visible distance), far plane (farthest visible distance), and position (where the camera is placed in world space).

Step 2: OrthographicCamera setup

App.tsxTSX
// Tell R3F to use an orthographic camera
<Canvas orthographic camera={{
  zoom: 50,             // Controls visible area
  near: 0.1,
  far: 1000,
  position: [5, 5, 5]   // Isometric angle
}}>
  <MyScene />
</Canvas>

// Zoom replaces FOV — higher = more zoomed in
// No perspective distortion at any zoom level

For orthographic cameras, zoom replaces FOV. A higher zoom value means you see less of the scene (more zoomed in). There is no perspective foreshortening — parallel lines stay parallel.

Step 3: Switching cameras at runtime

App.tsxTSX
// Use useThree to swap cameras dynamically
function CameraSwitch({ type }: { type: string }) {
  const { set, size } = useThree();

  useEffect(() => {
    const aspect = size.width / size.height;
    const cam = type === "perspective"
      ? new THREE.PerspectiveCamera(50, aspect, 0.1, 1000)
      : new THREE.OrthographicCamera(
          -4 * aspect, 4 * aspect, 4, -4, 0.1, 1000
        );
    cam.position.set(5, 5, 5);
    cam.lookAt(0, 0, 0);
    set({ camera: cam });
  }, [type, size, set]);

  return null;
}

You can switch between camera types at runtime using the useThree hook. Create a new camera instance, position it, and pass it to the set function. The scene re-renders with the new projection.

What you just learned

PerspectiveCamera creates depth via foreshortening — distant objects appear smaller, like human vision.

OrthographicCamera preserves size regardless of distance — perfect for isometric games and technical views.

FOV controls the angular width of a perspective camera. 45-60 degrees feels natural for most scenes.

Near and far planes define the visible depth range. Keep the near/far ratio below 10,000 to avoid z-fighting.

Question

If you're building a product configurator where users orbit around a shoe, which camera type would you choose? What if the shoe needs to look exactly the same size from every angle for consistent marketing shots?

Think about it...

You have two identical cubes, one at z=-2 and one at z=-20. With a PerspectiveCamera, the far cube appears smaller. What happens if you switch to OrthographicCamera?

Hint: Think about what 'orthographic' means — no perspective scaling...

Try These Challenges

Put what you learned into practice. Try each challenge in the demo above using the Leva controls, then check the solution.

Try This!

Beginner

Switch to Orthographic — no perspective!

Try This!

Beginner

Set FOV to 120 — fisheye!

Try This!

Beginner

Set near to 5 — objects clip

These are the patterns that trip up developers most often. Switch between Wrong and Fixed to compare the code side by side.

1
Setting near plane too close to zero
Z-fighting causes flickering surfaces everywhere
Don't do this
App.tsxTSX
// Near plane at 0.001 causes z-fighting
<Canvas camera={{
  near: 0.001,
  far: 10000,
  fov: 50
}}>
The depth buffer has limited precision. A tiny near plane with a huge far plane spreads that precision thin, causing z-fighting — where two surfaces at nearly the same depth flicker between showing one or the other. Keep the near/far ratio as small as possible.
2
Using wrong camera type for the job
A 2D UI built with perspective camera, or a 3D game with orthographic
Don't do this
App.tsxTSX
// Perspective camera for a 2D strategy game
// Objects change size as camera moves!
<Canvas camera={{ fov: 75 }}>
  <IsometricMap />
</Canvas>
Perspective cameras create a sense of depth — great for immersive 3D. Orthographic cameras show everything at the same scale regardless of distance — perfect for isometric games, 2D views, and technical visualizations. Pick the right tool for the job.
3
FOV too wide or too narrow
Scene looks like a fisheye lens or a telephoto zoom
Don't do this
App.tsxTSX
// 120 FOV = extreme fisheye distortion
<Canvas camera={{ fov: 120 }}>

// 10 FOV = almost no depth, flat feeling
<Canvas camera={{ fov: 10 }}>
FOV (Field of View) is measured in degrees and controls how wide the camera sees. Low values feel like a telephoto lens (zoomed in, flat). High values feel like a fisheye (wide, distorted edges). 45-60 degrees matches natural human vision for most display sizes.

Best Practices

Match Camera to Purpose

Use perspective for immersive 3D experiences. Use orthographic for isometric views, 2D games, UI elements, and technical visualizations.

Minimize Near/Far Range

Set near as large and far as small as your scene allows. A tight range gives the depth buffer more precision and prevents z-fighting.

FOV Between 45-65

A FOV of 50-60 degrees feels natural on most displays. Go wider for immersive scenes, narrower for cinematic framing. Avoid extremes.

Handle Aspect Ratio Changes

R3F automatically updates the camera aspect ratio on resize. If you create cameras manually, update the projection matrix when the viewport changes.