Camera & Viewport

Camera & Viewport

Three.js has several camera types. PerspectiveCamera is the most common — it mimics how human eyes perceive depth.

PerspectiveCamera Parameters

new THREE.PerspectiveCamera(fov, aspect, near, far)

Objects outside [near, far] range are not rendered.

lookAt

Point the camera at any position in the world:

camera.position.set(5, 3, 10);
camera.lookAt(0, 0, 0); // look at origin
camera.lookAt(target.position); // look at an object

Updating on Resize

When the window resizes, update the camera and renderer:

window.addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

updateProjectionMatrix() is required after changing fov, aspect, near, or far.

OrthographicCamera

For 2D or isometric views:

new THREE.OrthographicCamera(left, right, top, bottom, near, far)

Your Task

Implement createCamera(fov, aspect, near, far, px, py, pz) that:

• Creates a PerspectiveCamera with the given parameters
• Sets position to (px, py, pz)
• Calls lookAt(0, 0, 0)
• Returns the camera