Three.js Game Development Skill

Comprehensive skill for building 3D games with Three.js using local 3D model assets (GLTF, FBX, OBJ from extracted zip archives).

Quick Start — Vite + Three.js Game

npm create vite@latest my-game -- --template vanilla
cd my-game
npm install three
npm run dev

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.outputColorSpace = THREE.SRGBColorSpace;
document.body.appendChild(renderer.domElement);

// Lighting
scene.add(new THREE.AmbientLight(0xffffff, 0.6));
const sun = new THREE.DirectionalLight(0xffffff, 1.2);
sun.position.set(50, 50, 50);
sun.castShadow = true;
scene.add(sun);

// Load model from extracted zip
const loader = new GLTFLoader();
loader.load('/models/city/gltf/building_A.gltf', (gltf) => {
  const model = gltf.scene;
  model.traverse(c => { if (c.isMesh) { c.castShadow = true; c.receiveShadow = true; } });
  scene.add(model);
});

const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();
  renderer.render(scene, camera);
}
animate();

Game Loop Architecture

class Game {
  constructor() {
    this.clock = new THREE.Clock();
    this.scene = new THREE.Scene();
    this.fixedTimeStep = 1 / 60;
    this.accumulator = 0;
    this.state = 'loading'; // loading | playing | paused | gameover
  }

  update(delta) {
    // Fixed timestep for physics
    this.accumulator += delta;
    while (this.accumulator >= this.fixedTimeStep) {
      this.fixedUpdate(this.fixedTimeStep);
      this.accumulator -= this.fixedTimeStep;
    }
  }

  fixedUpdate(dt) {
    // Physics, collision, AI here
  }

  render() {
    this.renderer.render(this.scene, this.camera);
  }

  loop() {
    requestAnimationFrame(() => this.loop());
    const delta = this.clock.getDelta();
    if (this.state === 'playing') this.update(delta);
    this.render();
  }
}

Asset Loading from Extracted Zips

Place extracted zip contents in public/models/. Vite serves public/ as static root.

public/
  models/
    city/     ← KayKit City Builder (GLTF files)
    cars/     ← Low Poly Cars (OBJ + textures)

GLTF Loading (preferred for web)

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const gltfLoader = new GLTFLoader();

function loadGLTF(url) {
  return new Promise((resolve, reject) => {
    gltfLoader.load(url, resolve, undefined, reject);
  });
}

const gltf = await loadGLTF('/models/city/gltf/building_A.gltf');
scene.add(gltf.scene);

FBX Loading

import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';

const fbxLoader = new FBXLoader();
fbxLoader.load('/models/city/fbx/building_A.fbx', (object) => {
  object.scale.setScalar(0.01); // FBX often has large scale
  object.traverse(c => { if (c.isMesh) { c.castShadow = true; c.receiveShadow = true; } });
  scene.add(object);
});

OBJ + MTL Loading

import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';

const mtlLoader = new MTLLoader();
mtlLoader.setPath('/models/cars/');
mtlLoader.load('model.mtl', (materials) => {
  materials.preload();
  const objLoader = new OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.setPath('/models/cars/');
  objLoader.load('model.obj', (object) => { scene.add(object); });
});

Loading Manager with Progress

const manager = new THREE.LoadingManager();
manager.onProgress = (url, loaded, total) => {
  const pct = (loaded / total * 100).toFixed(0);
  document.getElementById('loading-bar').style.width = pct + '%';
};
manager.onLoad = () => { document.getElementById('loading-screen').style.display = 'none'; };

const gltfLoader = new GLTFLoader(manager);

Vehicle Physics (Arcade Style)

class Car {
  constructor(mesh) {
    this.mesh = mesh;
    this.speed = 0;
    this.maxSpeed = 30;
    this.acceleration = 15;
    this.braking = 30;
    this.friction = 5;
    this.turnSpeed = 2.5;
    this.steerAngle = 0;
    this.velocity = new THREE.Vector3();
  }

  update(dt, input) {
    // Acceleration / braking
    if (input.forward) this.speed += this.acceleration * dt;
    else if (input.backward) this.speed -= this.braking * dt;
    else this.speed -= Math.sign(this.speed) * this.friction * dt;

    // Clamp speed
    this.speed = THREE.MathUtils.clamp(this.speed, -this.maxSpeed * 0.3, this.maxSpeed);
    if (Math.abs(this.speed) < 0.1) this.speed = 0;

    // Steering (only when moving)
    if (Math.abs(this.speed) > 0.5) {
      const turnFactor = this.speed > 0 ? 1 : -1;
      if (input.left) this.mesh.rotation.y += this.turnSpeed * dt * turnFactor;
      if (input.right) this.mesh.rotation.y -= this.turnSpeed * dt * turnFactor;
    }

    // Move forward in facing direction
    const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(this.mesh.quaternion);
    this.velocity.copy(forward.multiplyScalar(this.speed));
    this.mesh.position.add(this.velocity.clone().multiplyScalar(dt));
  }
}

City Generation

class City {
  constructor(scene) {
    this.scene = scene;
    this.tileSize = 2; // Size of one road/building tile
    this.buildings = [];
    this.roads = [];
  }

  async generate(loader) {
    // Load building models
    const buildingNames = ['building_A','building_B','building_C','building_D','building_E','building_F','building_G','building_H'];
    const roadNames = ['road_straight','road_corner','road_junction','road_tsplit','road_straight_crossing'];
    const propNames = ['bench','bush','streetlight','trafficlight_A','firehydrant','dumpster'];

    const models = {};
    for (const name of [...buildingNames, ...roadNames, ...propNames]) {
      const gltf = await loadGLTF(`/models/city/gltf/${name}.gltf`);
      models[name] = gltf.scene;
    }

    // Place buildings in grid
    const gridSize = 5;
    for (let x = -gridSize; x <= gridSize; x++) {
      for (let z = -gridSize; z <= gridSize; z++) {
        if (Math.abs(x) <= 1 || Math.abs(z) <= 1) {
          // Roads in center corridors
          this.placeRoad(models, x, z);
        } else {
          // Buildings on blocks
          this.placeBuilding(models, buildingNames, x, z);
        }
      }
    }
  }

  placeBuilding(models, names, x, z) {
    const name = names[Math.floor(Math.random() * names.length)];
    const building = models[name].clone();
    building.position.set(x * this.tileSize, 0, z * this.tileSize);
    building.rotation.y = (Math.floor(Math.random() * 4)) * Math.PI / 2;
    building.traverse(c => { if (c.isMesh) { c.castShadow = true; c.receiveShadow = true; } });
    this.scene.add(building);
    this.buildings.push(building);
  }

  placeRoad(models, x, z) {
    const road = models['road_straight'].clone();
    road.position.set(x * this.tileSize, 0, z * this.tileSize);
    if (Math.abs(x) <= 1) road.rotation.y = Math.PI / 2;
    road.traverse(c => { if (c.isMesh) { c.receiveShadow = true; } });
    this.scene.add(road);
    this.roads.push(road);
  }
}

Third-Person Chase Camera

class ChaseCamera {
  constructor(camera, target) {
    this.camera = camera;
    this.target = target;
    this.offset = new THREE.Vector3(0, 5, 10);
    this.lookOffset = new THREE.Vector3(0, 1, 0);
    this.smoothSpeed = 5;
    this.currentPosition = new THREE.Vector3();
    this.currentLookAt = new THREE.Vector3();
  }

  update(dt) {
    // Desired position behind and above target
    const desiredPos = new THREE.Vector3()
      .copy(this.offset)
      .applyQuaternion(this.target.quaternion)
      .add(this.target.position);

    // Smooth follow
    this.currentPosition.lerp(desiredPos, this.smoothSpeed * dt);
    this.camera.position.copy(this.currentPosition);

    // Look at target
    const lookTarget = this.target.position.clone().add(this.lookOffset);
    this.currentLookAt.lerp(lookTarget, this.smoothSpeed * dt);
    this.camera.lookAt(this.currentLookAt);
  }
}

Collision Detection (AABB)

class CollisionSystem {
  constructor() {
    this.obstacles = [];
  }

  addObstacle(mesh) {
    const box = new THREE.Box3().setFromObject(mesh);
    this.obstacles.push({ mesh, box });
  }

  checkCollision(playerMesh, playerRadius = 1) {
    const playerPos = playerMesh.position;
    const playerBox = new THREE.Box3().setFromCenterAndSize(
      playerPos, new THREE.Vector3(playerRadius * 2, 2, playerRadius * 2)
    );

    for (const obs of this.obstacles) {
      if (playerBox.intersectsBox(obs.box)) {
        return { hit: true, obstacle: obs };
      }
    }
    return { hit: false };
  }

  resolveCollision(playerMesh, collision) {
    if (!collision.hit) return;
    const obsCenter = new THREE.Vector3();
    collision.obstacle.box.getCenter(obsCenter);
    const pushDir = playerMesh.position.clone().sub(obsCenter).normalize();
    playerMesh.position.add(pushDir.multiplyScalar(0.5));
  }
}

HUD Overlay

class HUD {
  constructor() {
    this.container = document.createElement('div');
    this.container.id = 'hud';
    this.container.innerHTML = `
      <div id="speed-display">0 km/h</div>
      <div id="controls-hint">WASD/Arrows to drive</div>
    `;
    document.body.appendChild(this.container);
  }

  updateSpeed(speed) {
    const kmh = Math.abs(Math.round(speed * 3.6));
    document.getElementById('speed-display').textContent = kmh + ' km/h';
  }
}

Input Handler

class InputHandler {
  constructor() {
    this.keys = {};
    window.addEventListener('keydown', e => this.keys[e.code] = true);
    window.addEventListener('keyup', e => this.keys[e.code] = false);
  }

  get forward() { return this.keys['KeyW'] || this.keys['ArrowUp']; }
  get backward() { return this.keys['KeyS'] || this.keys['ArrowDown']; }
  get left() { return this.keys['KeyA'] || this.keys['ArrowLeft']; }
  get right() { return this.keys['KeyD'] || this.keys['ArrowRight']; }
  get brake() { return this.keys['Space']; }
}

Lighting Setup for Games

// Ambient + Directional (sun) + Hemisphere
scene.add(new THREE.HemisphereLight(0x87CEEB, 0x362907, 0.5));

const sun = new THREE.DirectionalLight(0xffeedd, 1.5);
sun.position.set(50, 80, 50);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
sun.shadow.camera.left = -50;
sun.shadow.camera.right = 50;
sun.shadow.camera.top = 50;
sun.shadow.camera.bottom = -50;
sun.shadow.camera.near = 0.1;
sun.shadow.camera.far = 200;
sun.shadow.bias = -0.001;
scene.add(sun);

// Fog for atmosphere
scene.fog = new THREE.FogExp2(0xC8DCE8, 0.015);
scene.background = new THREE.Color(0x87CEEB);

Responsive Canvas

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

Performance Tips for Games

1. Use instancing for repeated objects (trees, props)
2. Pool objects instead of create/destroy
3. LOD for distance-based mesh switching
4. Frustum culling is enabled by default
5. Merge static geometries for terrain/buildings
6. Limit shadow casters — only nearby objects
7. Use requestAnimationFrame — never setInterval
8. Dispose unused resources — geometry, materials, textures

// InstancedMesh for many copies
const instancedMesh = new THREE.InstancedMesh(geometry, material, count);
const matrix = new THREE.Matrix4();
for (let i = 0; i < count; i++) {
  matrix.setPosition(x, y, z);
  instancedMesh.setMatrixAt(i, matrix);
}
instancedMesh.instanceMatrix.needsUpdate = true;

See Also

• Three.js docs: https://threejs.org/docs/
• Three.js examples: https://threejs.org/examples/
• Import pattern: import { X } from 'three/addons/...'