Implementing First‑Person and Third‑Person Camera Follow in Three.js

The article introduces the difference between first‑person and third‑person views in games and shows how to achieve these perspectives using Three.js, a WebGL‑based 3D library for the browser.

It explains that movement and rotation are fundamentally matrix transformations, illustrating translation with a simple 2‑D example and then extending the idea to 4×4 homogeneous matrices for 3‑D scenes.

Implementation is divided into three main steps:

1. Initialize the canvas, scene, camera, and renderer:

<canvas class="webgl"></canvas>
// Create scene
const scene = new THREE.Scene();
// Add camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
camera.position.y = 6;
camera.position.z = 18;
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
scene.add(camera);
// Renderer
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.render(scene, camera);

2. Add a floor and a colored cube to act as the player character:

// Floor geometry
const geometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
const floorTexture = new THREE.ImageUtils.loadTexture('12.jpeg');
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(10, 10);
const floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });
const floor = new THREE.Mesh(geometry, floorMaterial);
floor.position.y = -1.5;
floor.rotation.x = -Math.PI / 2;
scene.add(floor);

// Player cube
const boxgeometry = new THREE.BoxGeometry(1, 1, 1);
const boxMaterials = [];
for (let i = 0; i < 6; i++) {
  const boxMaterial = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
  boxMaterials.push(boxMaterial);
}
const box = new THREE.Mesh(boxgeometry, boxMaterials);
box.position.y = 1;
box.position.z = 8;
scene.add(box);

3. Handle keyboard input for movement/rotation and keep the camera synchronized with the cube:

// Keyboard control
const keyboard = new THREEx.KeyboardState();
const clock = new THREE.Clock();
const tick = () => {
  const delta = clock.getDelta();
  const moveDistance = 5 * delta;
  const rotateAngle = Math.PI / 2 * delta;
  if (keyboard.pressed('down')) box.translateZ(moveDistance);
  if (keyboard.pressed('up'))   box.translateZ(-moveDistance);
  if (keyboard.pressed('left')) box.translateX(-moveDistance);
  if (keyboard.pressed('right'))box.translateX(moveDistance);
  if (keyboard.pressed('w'))    box.rotateOnAxis(new THREE.Vector3(1,0,0), rotateAngle);
  if (keyboard.pressed('s'))    box.rotateOnAxis(new THREE.Vector3(1,0,0), -rotateAngle);
  if (keyboard.pressed('a'))    box.rotateOnAxis(new THREE.Vector3(0,1,0), rotateAngle);
  if (keyboard.pressed('d'))    box.rotateOnAxis(new THREE.Vector3(0,1,0), -rotateAngle);

  // Camera follows the cube
  const relativeCameraOffset = new THREE.Vector3(0, 5, 10);
  const cameraOffset = relativeCameraOffset.applyMatrix4(box.matrixWorld);
  camera.position.set(cameraOffset.x, cameraOffset.y, cameraOffset.z);
  controls.target = box.position;

  renderer.render(scene, camera);
  window.requestAnimationFrame(tick);
};
tick();

By applying the same matrix transformation to the camera offset as to the character, the camera maintains a constant distance and always looks at the player, achieving a smooth third‑person follow effect that can be switched to first‑person by adjusting the offset.

The final result is a working demo where the cube can be moved and rotated with the keyboard while the camera follows it, demonstrating the practical use of matrix operations for camera control in Three.js.