threejs-game

Three.js Game Development Skill

Comprehensive assistance with Three.js game development using WebGL, covering 3D rendering, game mechanics, physics, animations, and interactive browser-based games.

When to Use This Skill

Activate this skill when:

Building 3D web games with Three.js
Implementing game mechanics (player movement, collisions, scoring)
Setting up cameras, lighting, and scene management
Loading 3D models (GLTF, OBJ, FBX)
Handling user input (keyboard, mouse, touch, gamepad)
Creating animations and character controllers
Integrating physics engines (Cannon.js, Ammo.js)
Optimizing 3D game performance
Working with shaders and materials for game visuals

Quick Reference

Basic Game Setup

import * as THREE from 'three';

// Create scene, camera, renderer const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

// Game loop function animate(time) { requestAnimationFrame(animate);

// Update game logic here updatePlayer(time); updateEnemies(time); checkCollisions();

renderer.render(scene, camera); }

animate();

Player Controller (Third-Person)

class PlayerController { constructor(camera, target) { this.camera = camera; this.target = target; this.distance = 10; this.height = 5; this.rotationSpeed = 0.005; this.moveSpeed = 0.1; }

update(input) { // Movement const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(this.target.quaternion); const right = new THREE.Vector3(1, 0, 0).applyQuaternion(this.target.quaternion);

if (input.forward) this.target.position.add(forward.multiplyScalar(this.moveSpeed));
if (input.backward) this.target.position.add(forward.multiplyScalar(-this.moveSpeed));
if (input.left) this.target.position.add(right.multiplyScalar(-this.moveSpeed));
if (input.right) this.target.position.add(right.multiplyScalar(this.moveSpeed));

// Rotation
if (input.rotateLeft) this.target.rotation.y += this.rotationSpeed;
if (input.rotateRight) this.target.rotation.y -= this.rotationSpeed;

// Update camera position
const offset = new THREE.Vector3(0, this.height, this.distance);
offset.applyQuaternion(this.target.quaternion);
this.camera.position.copy(this.target.position).add(offset);
this.camera.lookAt(this.target.position);

} }

Input Handling

class InputManager { constructor() { this.keys = {}; this.mouse = { x: 0, y: 0, buttons: {} };

window.addEventListener('keydown', (e) => this.keys[e.code] = true);
window.addEventListener('keyup', (e) => this.keys[e.code] = false);
window.addEventListener('mousemove', (e) => {
  this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
  this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
});

}

getInput() { return { forward: this.keys['KeyW'] || this.keys['ArrowUp'], backward: this.keys['KeyS'] || this.keys['ArrowDown'], left: this.keys['KeyA'] || this.keys['ArrowLeft'], right: this.keys['KeyD'] || this.keys['ArrowRight'], jump: this.keys['Space'], action: this.keys['KeyE'], rotateLeft: this.keys['KeyQ'], rotateRight: this.keys['KeyE'] }; } }

Collision Detection (Raycasting)

function checkCollisions(player, obstacles) { const raycaster = new THREE.Raycaster(); const directions = [ new THREE.Vector3(1, 0, 0), // right new THREE.Vector3(-1, 0, 0), // left new THREE.Vector3(0, 0, 1), // forward new THREE.Vector3(0, 0, -1), // backward ];

for (const direction of directions) { raycaster.set(player.position, direction); const intersects = raycaster.intersectObjects(obstacles);

if (intersects.length > 0 &#x26;&#x26; intersects[0].distance &#x3C; 1.0) {
  return {
    collision: true,
    object: intersects[0].object,
    distance: intersects[0].distance,
    point: intersects[0].point
  };
}

}

return { collision: false }; }

Loading 3D Models (GLTF)

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

const loader = new GLTFLoader();

function loadCharacter(path) { return new Promise((resolve, reject) => { loader.load( path, (gltf) => { const model = gltf.scene; model.scale.set(1, 1, 1); scene.add(model);

    // Setup animations if available
    const mixer = new THREE.AnimationMixer(model);
    const animations = {};
    gltf.animations.forEach(clip => {
      animations[clip.name] = mixer.clipAction(clip);
    });

    resolve({ model, mixer, animations });
  },
  (progress) => {
    console.log(`Loading: ${(progress.loaded / progress.total * 100).toFixed(2)}%`);
  },
  (error) => reject(error)
);

}); }

// Usage const character = await loadCharacter('/models/character.glb'); character.animations.idle.play();

Basic Physics (Gravity & Jumping)

class PhysicsBody { constructor(mesh) { this.mesh = mesh; this.velocity = new THREE.Vector3(); this.onGround = false; this.gravity = -9.8; this.jumpPower = 5; }

update(deltaTime) { // Apply gravity if (!this.onGround) { this.velocity.y += this.gravity * deltaTime; }

// Apply velocity
this.mesh.position.add(this.velocity.clone().multiplyScalar(deltaTime));

// Ground check
if (this.mesh.position.y &#x3C;= 0) {
  this.mesh.position.y = 0;
  this.velocity.y = 0;
  this.onGround = true;
}

}

jump() { if (this.onGround) { this.velocity.y = this.jumpPower; this.onGround = false; } } }

Interactive Objects (Picking)

const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2();

function onMouseClick(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(interactableObjects);

if (intersects.length > 0) { const object = intersects[0].object; object.userData.onInteract?.(); } }

window.addEventListener('click', onMouseClick);

Health & Damage System

class Entity { constructor(mesh, maxHealth) { this.mesh = mesh; this.maxHealth = maxHealth; this.health = maxHealth; this.isDead = false; }

takeDamage(amount) { if (this.isDead) return;

this.health = Math.max(0, this.health - amount);

if (this.health === 0) {
  this.die();
}

return this.health;

}

heal(amount) { this.health = Math.min(this.maxHealth, this.health + amount); return this.health; }

die() { this.isDead = true; this.mesh.visible = false; // Trigger death animation, effects, etc. } }

Key Concepts

Scene Graph

Organize game objects hierarchically
Use groups for complex objects
Parent-child transformations

Game Loop

Use requestAnimationFrame for 60fps
Calculate delta time for frame-independent movement
Separate update logic from rendering

Camera Systems

PerspectiveCamera: First/third-person games
OrthographicCamera: 2D/isometric games
Implement camera follow and smooth transitions

Lighting

AmbientLight: Base illumination
DirectionalLight: Sun/moonlight with shadows
PointLight: Torches, explosions
SpotLight: Flashlights, stage lights

Performance Optimization

Use instancing for repeated objects
Implement frustum culling
Use LOD (Level of Detail) for distant objects
Minimize draw calls
Use texture atlases
Enable shadow map optimization

Asset Loading

Preload all assets before game start
Show loading progress bar
Use LoadingManager for coordination
Cache loaded assets

Common Game Patterns

State Machine (Game States)

class GameStateMachine { constructor() { this.states = { menu: new MenuState(), playing: new PlayingState(), paused: new PausedState(), gameOver: new GameOverState() }; this.currentState = this.states.menu; }

changeState(stateName) { this.currentState.exit(); this.currentState = this.states[stateName]; this.currentState.enter(); }

update(deltaTime) { this.currentState.update(deltaTime); } }

Object Pooling

class ObjectPool { constructor(factory, initialSize = 10) { this.factory = factory; this.available = []; this.inUse = [];

for (let i = 0; i &#x3C; initialSize; i++) {
  this.available.push(factory());
}

}

acquire() { let obj = this.available.pop(); if (!obj) obj = this.factory(); this.inUse.push(obj); return obj; }

release(obj) { const index = this.inUse.indexOf(obj); if (index > -1) { this.inUse.splice(index, 1); this.available.push(obj); } } }

// Usage const bulletPool = new ObjectPool(() => createBullet(), 20); const bullet = bulletPool.acquire(); // ... use bullet bulletPool.release(bullet);

Reference Files

Detailed documentation organized by topic:

getting_started.md - Three.js fundamentals, setup, and basic concepts
game_development.md - Game loop, player controllers, game mechanics
scene_graph.md - Scene organization, hierarchy, transformations
materials.md - Material types, shaders, visual effects
textures.md - Texture loading, UV mapping, atlases
lighting.md - Light types, shadows, HDR
cameras.md - Camera types, controls, viewport management
geometry.md - Built-in geometries, custom geometry, buffers
loading.md - Asset loading (models, textures, audio)
animation.md - Animation system, skeletal animation, tweens
interactivity.md - Raycasting, picking, UI integration
effects.md - Post-processing, particles, fog

Resources

Official Documentation

Three.js Manual: https://threejs.org/manual/
Three.js API: https://threejs.org/docs/
Three.js Examples: https://threejs.org/examples/

Physics Integration

Cannon.js: Lightweight 3D physics
Ammo.js: Full Bullet physics engine port
Rapier: High-performance physics

Useful Libraries

three-mesh-bvh: Fast raycasting
three-pathfinding: Navigation meshes
postprocessing: Advanced effects

Working with This Skill

For Beginners

Start with basic scene setup
Learn the coordinate system
Understand the game loop
Practice with simple shapes before models

For Game Development

Plan your game architecture
Implement input handling first
Build a simple player controller
Add gameplay mechanics incrementally
Optimize performance throughout

For Advanced Features

Integrate physics engines
Implement advanced shaders
Add post-processing effects
Build multiplayer networking

Notes

Three.js uses a right-handed coordinate system (X right, Y up, Z out)
Optimize early: profile regularly, minimize draw calls
Use development builds for debugging, production builds for release
Consider WebGL 2 features for modern browsers
Mobile performance requires careful optimization

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

pair programming

github-multi-repo

github-release-management

github-code-review