Skip to content
Open menu

Three.js Experiments

Three.js For 3D Browser Experiments

A practical path for learning 3D scenes, cameras, lights, models, picking, controls, and glow-style polish.

Three.js is where the BadGames experiment track moves from 2D systems into browser-native 3D presentation and interaction.

6 Three.js experiments
3D scene foundation
GLTF model loading path

Key Takeaways

01

Three.js is the right track when the work needs 3D scenes, cameras, lights, and WebGL rendering.

02

Real 3D work quickly moves beyond primitives into materials, GLTF assets, raycasting, and camera controls.

03

Use Three.js for 3D browser experiences, PixiJS for 2D rendering, and Phaser for 2D game systems.

BadGames library tracks

Browser game libraries in practice.

Learn the difference between rendering, game systems, 3D scenes, and motion polish through focused articles and runnable experiments.

Start with Phaser Explore PixiJS
Phaser Phaser For Browser Game Systems Scenes, Arcade Physics, collision, scoring, cameras, and game flow for playable 2D systems. Open article PixiJS PixiJS For Game Experiments Fast 2D rendering for sprites, particles, filters, canvas UI, tile worlds, and feedback loops. Open article Three.js Three.js For 3D Browser Experiments 3D scenes, cameras, lights, materials, GLTF models, picking, controls, and visual polish. Open article GSAP GSAP For Game UI And Interactive Articles Timelines, micro-interactions, ScrollTrigger stories, drag interfaces, SVG motion, and FLIP transitions. Open article
Category Game Development
Tags Code Experiments

Related articles

Three.js Experiments

Three.js is one of the most useful libraries for creating 3D experiences on the web. It lets us build scenes with cameras, lights, materials, models, controls, effects, and interaction directly in the browser.

It is not a full game engine like Phaser. It does not give us a complete gameplay framework with built-in game state, scoring, collision, levels, and scene flow. Instead, Three.js gives us the 3D rendering foundation.

That makes it a great fit for our games, experiments, visual tools, interactive articles, and browser-based 3D prototypes.

When we want to explore a 3D idea without starting a large engine project, Three.js is often the right tool.

Three.js For 3D Browser Experiments featured image

What Is Three.js?

Three.js is a JavaScript 3D library built on top of WebGL. It makes it much easier to create 3D graphics in the browser without writing raw WebGL code.

A basic Three.js project usually has three core parts:

  • a scene
  • a camera
  • a renderer

The scene contains the 3D objects. The camera decides what the viewer sees. The renderer draws the result to the screen.

From there, we can add lights, materials, models, animation, controls, effects, and interaction.

That simple structure makes Three.js a good learning tool. It teaches the basic building blocks of 3D graphics while still being practical enough for real projects.

Why We Use Three.js

We use Three.js when we want to create 3D scenes and interactive visual experiences in the browser.

It is useful for:

  • 3D hero sections
  • small 3D games
  • interactive worlds
  • product viewers
  • model previews
  • visual experiments
  • game prototypes
  • animated backgrounds
  • interactive articles
  • 3D UI concepts
  • mini-worlds
  • simulations
  • lighting and material tests
  • shader and post-processing experiments

Three.js is especially useful when the goal is to explore how something looks, feels, moves, or reacts in 3D.

It gives us direct control over the scene without forcing us into a full game engine workflow.

Three.js Is Not A Full Game Engine

Three.js does not replace Phaser, Unity, Godot, or Unreal Engine.

We use Phaser when we need a complete 2D game framework with scenes, physics, collision, cameras, scoring, input, and game flow.

We use PixiJS when we need fast 2D rendering, sprites, filters, layers, particles, and canvas/WebGL control.

We use GSAP when we need animation timing, interface polish, transitions, and motion feedback.

We use Three.js when we need 3D rendering in the browser.

That can include games, but Three.js itself is not the whole game system. If we need physics, level management, AI, inventory, UI, saving, or multiplayer, we either build those systems ourselves or combine Three.js with other tools.

The strength of Three.js is that it gives us a flexible 3D foundation.

Where Three.js Works Best

Three.js works best when the project needs interactive 3D but does not need the full weight of a large game engine.

For example, we might use it for:

  • a 3D background on an article page
  • a rotating model preview
  • a small space scene
  • a mini-world with camera controls
  • a clickable 3D object gallery
  • a visual explanation of lighting
  • a stylized game prototype
  • a 3D experiment embedded in WordPress
  • a post-processing glow effect
  • a simple scene where users can inspect objects

Three.js is also a good fit for learning because every experiment reveals an important 3D concept: camera position, field of view, lighting, shadows, materials, models, object picking, controls, and render effects.

Three.js And Game Development

Three.js is useful for game development because it teaches us how 3D worlds are built.

Even a simple scene introduces important ideas:

  • objects exist in 3D space
  • cameras define the view
  • lights affect how objects appear
  • materials control surface behavior
  • models need to be loaded and placed
  • users interact through mouse, touch, keys, or raycasting
  • effects can change the mood of a scene
  • performance matters because everything renders in real time

These are not just web design ideas. They are game development ideas.

A small Three.js experiment can become a prototype for a game mechanic, a menu scene, a world map, a character viewer, a product configurator, or an interactive learning tool.

Useful Three.js Concepts

Scene, Camera, And Renderer

The scene, camera, and renderer are the foundation of Three.js.

The scene is the world.
The camera is the viewer.
The renderer draws what the camera sees.

Understanding this structure is the first step toward building anything in Three.js.

Geometry, Meshes, And Materials

A mesh combines geometry and material.

The geometry defines the shape. The material defines how the surface looks.

A cube, sphere, plane, character model, or imported object all need some form of geometry and material. This is where we start understanding 3D objects as more than images on a screen.

Lights And Shadows

Lighting is one of the biggest differences between 2D and 3D work.

A scene can look flat, dramatic, realistic, soft, harsh, mysterious, or game-like depending on the lights and materials.

Learning lights is important because 3D scenes are not only about objects. They are about how those objects are revealed.

3D Model Loading

Three.js can load external 3D models, commonly using formats like glTF.

This is important when we want to move beyond cubes and spheres into characters, props, buildings, vehicles, items, and environments.

Model loading is where Three.js starts to feel like a real production tool.

Raycasting And Object Picking

Raycasting is how we can detect what 3D object the user is pointing at or clicking on.

This is essential for interactive 3D.

It allows us to select objects, trigger actions, show labels, open panels, inspect models, pick items, or build simple 3D game interactions.

Camera Controls

Camera controls let the user move around or inspect a scene.

This can be orbit controls for rotating around an object, first-person controls for exploring a world, or custom controls for a game-like camera.

Camera control is one of the most important parts of making a 3D scene feel usable.

Post-Processing

Post-processing adds effects after the scene has been rendered.

This can include glow, bloom, color correction, blur, depth of field, outlines, and stylized visual effects.

Post-processing is useful when we want a scene to feel more cinematic, game-like, or visually distinct.

When We Should Use Three.js

We should use Three.js when the project needs:

  • browser-based 3D
  • interactive 3D objects
  • 3D model viewing
  • camera movement
  • lighting and material experiments
  • clickable 3D scenes
  • visual effects
  • 3D backgrounds
  • small 3D prototypes
  • interactive world experiments

It is a good choice when we want control over the 3D scene without starting a full engine project.

When We Should Not Use Three.js

We do not need Three.js for everything.

If the project only needs normal page animation, GSAP is usually a better fit. If the project needs a full 2D game framework, Phaser is usually better. If the project needs fast 2D sprites and canvas rendering, PixiJS is often the better choice.

Three.js also requires more care than ordinary HTML and CSS. We need to think about performance, file sizes, model optimization, mobile devices, lighting, controls, and accessibility.

The rule is simple:

Use GSAP for controlled motion.
Use PixiJS for fast 2D rendering.
Use Phaser for complete 2D game structure.
Use Three.js for interactive 3D in the browser.

Three.js Examples In The Article

The standalone experiment pages go deeper into models, controls, picking, and polish. These smaller examples keep the core Three.js workflow visible in the article: load Three through WP Lazy Lib, create a WebGL scene, and render one focused 3D idea at a time.

Scene, Camera, Renderer

The smallest useful Three.js setup: a scene, perspective camera, WebGL renderer, mesh, material, and render loop.

Loading 
const { THREE } = await window.wpLazyLib.load('three');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, width / height, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1.4, 1.4, 1.4),
  new THREE.MeshNormalMaterial()
);
scene.add(cube);

renderer.setAnimationLoop(() => {
  cube.rotation.x += 0.012;
  cube.rotation.y += 0.018;
  renderer.render(scene, camera);
});

Lights and Materials

Compare an unlit material with a lit standard material so the role of lights becomes visible.

Loading 
const { THREE } = await window.wpLazyLib.load('three');
const scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0xffffff, 0.4));

const keyLight = new THREE.DirectionalLight(0xffffff, 2.5);
keyLight.position.set(3, 4, 5);
scene.add(keyLight);

const flat = new THREE.Mesh(
  new THREE.SphereGeometry(0.7, 48, 32),
  new THREE.MeshBasicMaterial({ color: 0x64748b })
);

const lit = new THREE.Mesh(
  new THREE.SphereGeometry(0.7, 48, 32),
  new THREE.MeshStandardMaterial({ color: 0xef4444, roughness: 0.24, metalness: 0.62 })
);

Raycasting and Picking

Use pointer coordinates and a Raycaster to select an object in a 3D scene.

Loading 
const { THREE } = await window.wpLazyLib.load('three');
const pointer = new THREE.Vector2(0, 0);
const raycaster = new THREE.Raycaster();

raycaster.setFromCamera(pointer, camera);
const hit = raycaster.intersectObjects(pickables)[0];

if (hit) {
  hit.object.scale.setScalar(1.25);
  hit.object.material.emissive = new THREE.Color(0x441111);
}

Three.js Experiment Path

A good way to learn Three.js is to build small experiments. Each experiment should teach one important 3D concept.

Three.js Scene, Camera And Renderer Playground

This is the foundation experiment.

We create a basic scene, add a camera, render an object, and learn how the core Three.js loop works.

This teaches the basic structure behind every Three.js project.

Three.js Lights And Materials Experiment

This experiment focuses on how light and materials change the look of a scene.

We can test different light types, material settings, colors, roughness, metalness, and shadows.

This teaches how 3D objects become readable, dramatic, or stylized.

Three.js 3D Model Loader Experiment

This experiment loads an external 3D model into the scene.

The goal is to understand model loading, scaling, positioning, and basic model presentation.

This is useful for character viewers, props, items, product previews, and game assets.

Three.js Raycasting And Object Picking Experiment

This experiment lets the user click or hover over 3D objects.

The goal is to understand how raycasting works and how we can turn a visual scene into an interactive scene.

This is useful for object selection, inspection, inventory, puzzle interaction, and 3D UI.

Three.js Camera Controls And Mini World Experiment

This experiment creates a small 3D world that the user can explore or inspect.

The goal is to understand camera movement, scene scale, navigation, and spatial layout.

This is useful for world maps, small game prototypes, architectural scenes, and interactive showcases.

Three.js Post-Processing And Glow Experiment

This experiment adds post-processing effects such as bloom or glow.

The goal is to understand how final image effects can change the mood and style of a scene.

This is useful for sci-fi scenes, magic effects, neon worlds, UI highlights, and cinematic presentation.

Why Three.js Matters

Three.js matters because it brings interactive 3D to the web.

It lets us create 3D scenes without requiring players or readers to install anything. That makes it useful for games, prototypes, visual experiments, interactive articles, product demos, educational tools, and creative web design.

For us, Three.js is the tool we use when an idea needs space, depth, camera movement, lighting, models, and real-time visual feedback.

It gives us a practical path into 3D web development while still fitting our experiment-first way of working.

Official project site: threejs.org.

Try the Three.js Material And Light Inspector as a practical companion to this article.

More from BadGames

Read the latest game development articles.

Browse practical notes on browser libraries, production choices, game business, careers, and the decisions behind playable work.

Open Blog