Three.js game development. Use for 3D web games, WebGL rendering, game mechanics, physics integration, character controllers, camera systems, lighting, animations, and interactive 3D experiences in the browser.

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 Player Controller (Third Person) Input Handling Collision Detection (Raycasting) Loading 3D Models (GLTF) Basic Physics (Gravity & Jumping) Interactive Objects (Picking) Health & Damage System 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) Object Pooling 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 1. Start with basic scene setup 2. Learn the coordinate system 3. Understand the game loop 4. Practice with simple shapes before models For Game Development 1. Plan your game architecture 2. Implement input handling first 3. Build a simple player controller 4. Add gameplay mechanics incrementally 5. Optimize performance throughout For Advanced Features 1. Integrate physics engines 2. Implement advanced shaders 3. Add post processing effects 4. 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

threejs-game