Introduction

Browser-based 3D graphics have come a long way from the early WebGL experiments. Three.js, the most widely used JavaScript 3D library, abstracts the complexity of raw WebGL into a developer-friendly API that handles scene graphs, cameras, lighting, materials, and rendering. Combined with physics engines like cannon-es, it enables the creation of interactive 3D experiences -- from product configurators to full browser games -- that run without any plugins or installations.

Understanding the core concepts of Three.js is essential for anyone working with 3D in the browser, whether you are building from scratch or working with AI-generated game code.

The Core Architecture

Every Three.js application is built around three fundamental objects: the Scene, the Camera, and the Renderer. The Scene is a container for all 3D objects, lights, and effects. The Camera defines the viewpoint from which the scene is observed. The Renderer takes the scene and camera and produces a 2D image on a canvas element.

The render loop -- a function that runs approximately 60 times per second -- updates object positions, applies physics calculations, and tells the renderer to draw the current frame. This loop is the heartbeat of every Three.js application, and keeping it efficient is the key to smooth performance.

Meshes, Materials, and Geometry

Visible objects in Three.js are called Meshes, and each Mesh is a combination of Geometry (the shape) and Material (the appearance). Geometry defines the vertices, faces, and normals that make up a 3D shape. Material defines how light interacts with that shape -- its color, reflectivity, roughness, and transparency.

Three.js provides both basic materials (MeshBasicMaterial, which ignores lighting) and physically-based rendering (PBR) materials (MeshStandardMaterial, MeshPhysicalMaterial) that simulate realistic light interaction. PBR materials use metalness and roughness maps to create convincing surfaces like brushed metal, worn concrete, or polished glass.

Lighting

Lighting is what makes 3D scenes feel real. Three.js offers several light types: AmbientLight for base illumination, DirectionalLight for sun-like parallel rays, PointLight for omnidirectional sources like light bulbs, SpotLight for focused beams, and HemisphereLight for outdoor sky-ground color blending. Most scenes use a combination of ambient and directional lighting as a baseline, with point lights and spotlights for specific effects.

Shadows add another layer of realism but come with a performance cost. Each shadow-casting light requires an additional render pass. For browser games, limiting shadow-casting lights to one or two directional lights is a common optimization.

Physics with cannon-es

Three.js handles rendering, but it does not simulate physics. For realistic movement, collisions, and gravity, most browser games pair Three.js with cannon-es (a maintained fork of cannon.js). The physics engine runs its own simulation loop, and you synchronize the physics body positions with the Three.js mesh positions each frame.

Key concepts in cannon-es include Bodies (objects with mass and shape), Shapes (spheres, boxes, cylinders, convex hulls), and the World (the physics simulation container with gravity and collision detection). For vehicle physics, cannon-es provides a RaycastVehicle class that simulates suspension, steering, and wheel friction.

Loading 3D Models

While simple shapes can be created with built-in geometry, complex objects like characters, vehicles, and buildings are typically created in 3D modeling software and loaded as GLB or GLTF files. The GLTFLoader in Three.js handles this, parsing the file and returning a scene graph that you can add to your Three.js scene.

GLTF (GL Transmission Format) has become the standard for web 3D because it supports meshes, materials, textures, animations, and scene hierarchy in a single, efficient binary format. Model optimization -- reducing polygon count, compressing textures, and using efficient UV layouts -- is important for browser performance.

Performance Optimization

Browser games face stricter performance constraints than native applications. Key optimization strategies include:

• Instanced rendering: Drawing many copies of the same geometry (trees, buildings, particles) in a single draw call
• Level of detail (LOD): Showing simpler models for distant objects and detailed models for close ones
• Frustum culling: Skipping rendering for objects outside the camera's view (Three.js handles this automatically)
• Texture atlases: Combining multiple textures into a single image to reduce draw calls
• Object pooling: Reusing objects instead of creating and destroying them to reduce garbage collection

Building a Game Loop

A typical game loop in Three.js follows this pattern: read input (keyboard, mouse, gamepad), update game state (player position, NPC behavior, physics step), sync physics bodies with meshes, update the camera, and render the frame. Keeping each step efficient ensures the game runs smoothly at 60fps.

For complex games, separating game logic into modules -- an Engine class for rendering and loops, a World class for level geometry, a Character class for player control, a Vehicle class for driving mechanics -- keeps the codebase organized and maintainable.

Conclusion

Three.js makes sophisticated 3D experiences accessible to web developers. The learning curve is real -- understanding scenes, cameras, materials, lighting, and physics takes time -- but the payoff is the ability to create interactive 3D applications that run in any browser on any device.

Whether you are building a product visualizer, an educational simulation, or a full browser game, Three.js provides the foundation. And with AI code generation capable of producing Three.js scenes from natural language descriptions, the barrier to entry for 3D web development has never been lower.