Making Web Games (Three.js)

Quest Toolkit · Guide 4

Three.js draws 3D in the browser with WebGL. Use it when the quest is about a scene, camera, or shader — not a full platformer toolkit.

When to use Three.js

• Walkable diorama, rotating model, or abstract 3D toy.
• You want control over lights, materials, and camera.
• Phaser feels too 2D for the idea.

Core pieces

1. Scene — holds objects.
2. Camera — what the player sees.
3. Renderer — draws to a <canvas>.
4. Mesh — geometry + material (box, sphere, imported GLB).
5. Animation loop — requestAnimationFrame, update, render.

Quest-sized scope

One room, one interactive object, one nice lighting setup. Or a shader on a fullscreen quad. Ship a static page on itch.io or GitHub Pages.

Tips

• Start with BoxGeometry and MeshStandardMaterial before importing models.
• Add OrbitControls so you can inspect the scene while building.
• Use glTF/GLB for anything beyond primitives.
• Watch draw calls — merge meshes when possible on low-end laptops.

Docs: threejs.org. For 2D gameplay in the browser, use Phaser instead.