Building a 3D browser game — a Three.js third-person game walkthrough

import * as THREE from 'three';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87ceeb);
scene.fog = new THREE.Fog(0x87ceeb, 20, 60);

const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

// Ground
const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(100, 100, 20, 20),
  new THREE.MeshStandardMaterial({ color: 0x3a7d44 })
);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
scene.add(ground);

// Player
const playerMat = new THREE.MeshStandardMaterial({ color: 0xe94560 });
const playerMesh = new THREE.Mesh(new THREE.CapsuleGeometry(0.3, 0.8, 8, 16), playerMat);
playerMesh.castShadow = true;
playerMesh.position.y = 0.7;
scene.add(playerMesh);

const state = { score: 0, speed: 5, vy: 0, grounded: true };

const cameraOffset = new THREE.Vector3(0, 4, 8);
const cameraTarget = new THREE.Vector3();

function updateCamera(dt) {
  // Desired camera position = player + offset
  const desired = playerMesh.position.clone().add(cameraOffset);

  // Smooth lerp
  camera.position.lerp(desired, 1 - Math.pow(0.01, dt));

  // Look at player
  cameraTarget.copy(playerMesh.position);
  cameraTarget.y += 1;
  camera.lookAt(cameraTarget);
}

const keys = {};
addEventListener('keydown', e => keys[e.code] = true);
addEventListener('keyup',   e => keys[e.code] = false);

function updatePlayer(dt) {
  const dir = new THREE.Vector3();
  if (keys['KeyW']) dir.z -= 1;
  if (keys['KeyS']) dir.z += 1;
  if (keys['KeyA']) dir.x -= 1;
  if (keys['KeyD']) dir.x += 1;
  if (dir.length() > 0) dir.normalize();

  playerMesh.position.x += dir.x * state.speed * dt;
  playerMesh.position.z += dir.z * state.speed * dt;

  // Face movement direction
  if (dir.length() > 0) {
    playerMesh.rotation.y = Math.atan2(dir.x, dir.z);
  }

  // Gravity + jump
  if (keys['Space'] && state.grounded) {
    state.vy = 8;
    state.grounded = false;
  }
  state.vy -= 20 * dt; // gravity
  playerMesh.position.y += state.vy * dt;
  if (playerMesh.position.y <= 0.7) {
    playerMesh.position.y = 0.7;
    state.vy = 0;
    state.grounded = true;
  }
}

const gems = [];
const enemies = [];

function spawnGems(count) {
  for (let i = 0; i < count; i++) {
    const gem = new THREE.Mesh(
      new THREE.OctahedronGeometry(0.3),
      new THREE.MeshStandardMaterial({ color: 0xffd700, emissive: 0xffd700, emissiveIntensity: 0.3 })
    );
    gem.position.set(
      (Math.random() - 0.5) * 40,
      0.8,
      (Math.random() - 0.5) * 40
    );
    gem.castShadow = true;
    scene.add(gem);
    gems.push(gem);
  }
}

function spawnEnemies(count) {
  for (let i = 0; i < count; i++) {
    const enemy = new THREE.Mesh(
      new THREE.BoxGeometry(0.8, 0.8, 0.8),
      new THREE.MeshStandardMaterial({ color: 0x6a0572 })
    );
    enemy.position.set((Math.random() - 0.5) * 30, 0.4, (Math.random() - 0.5) * 30);
    enemy.userData = { dir: Math.random() * Math.PI * 2, speed: 2 };
    enemy.castShadow = true;
    scene.add(enemy);
    enemies.push(enemy);
  }
}

function updateCollectibles(dt) {
  for (const g of gems) {
    g.rotation.y += dt * 2;
    if (g.visible && playerMesh.position.distanceTo(g.position) < 1) {
      g.visible = false;
      state.score += 10;
    }
  }
  for (const e of enemies) {
    e.position.x += Math.cos(e.userData.dir) * e.userData.speed * dt;
    e.position.z += Math.sin(e.userData.dir) * e.userData.speed * dt;
    if (Math.abs(e.position.x) > 20) e.userData.dir = Math.PI - e.userData.dir;
    if (playerMesh.position.distanceTo(e.position) < 1) {
      state.score -= 5;
      playerMesh.position.set(0, 0.7, 0);
    }
  }
}

spawnGems(20);
spawnEnemies(5);