Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Before & after
Same prompt, same agent — the only difference is the skill.
Building a 3D learning game in the browser is a cool idea. You'd need to use a 3D library like Three.js to handle the graphics, create 3D models or use existing ones, and build the game mechanics on top of that. You'd probably also want some kind of UI overlay for instructions, scoring, or quiz content. There are various ways to approach this—you could use existing game engines, but Three.js is a good choice if you want more control. The challenge is that it involves multiple skills: 3D modeling or asset creation, shader programming if you want advanced effects, and then the game logic itself. If you can tell me what the learning objective is and what kind of game mechanics you're imagining, I can help you think through the architecture.
THREE.JS LEARNING GAME ARCHITECTURE
NESTED SKILLS STRUCTURE
.agents/
skills/
three-js-canvas-setup/
SKILL.md: Canvas initialization, resize handler, animation loop, camera setup
tsl-shader-language/
SKILL.md: Tiny Shader Language reference, material patterns, lighting techniques
html-gui-overlay/
SKILL.md: HTML positioned above canvas, button/input bindings, CSS isolation
quiz-interactivity/
SKILL.md: Click-to-planet mapping, quiz flow, score tracking, DOM updates
CANVAS SETUP SKILL COVERAGE
-> Renderer (WebGL), camera (PerspectiveCamera), lighting (DirectionalLight + AmbientLight)
-> Resize handler (window.addEventListener + camera.aspect update)
-> Animation loop (requestAnimationFrame, deltaTime for frame-independent motion)
SHADER SKILL COVERAGE
-> TSL shader compilation (MeshStandardMaterial with custom shader)
-> Lighting modes: Phong (shiny), Lambert (matte), PBR (realistic)
-> Vertex animation (planet rotation, orbit motion via shader)
GUI OVERLAY SKILL COVERAGE
-> HTML div positioned absolute (z-index above canvas)
-> Event listeners: Quiz submit button, planet info close button
-> CSS containment: Prevent canvas scroll, UI stays in viewport
QUIZ FLOW SKILL COVERAGE
1. User clicks 3D planet (Raycaster detects intersection)
2. Quiz panel appears (HTML overlay shows 3 questions)
3. Submit answers (update score in-memory)
4. Display results (planet highlights if correct)
5. Next planet unlock (progress state)
SAMPLE GAME: SOLAR SYSTEM EXPLORER
-> Scene: 8 planets orbiting sun (procedural Three.js geometries)
-> Interaction: Click planet -> quiz appears (facts about that planet)
-> Win condition: All 8 planets answered correctly
-> Score: Visual progress bar, streak counter
FRAME BUDGET
• Canvas render: 16ms (60 FPS target)
• UI updates: Batch DOM changes (avoid per-frame reflow)About this skill
You asked for a 3D solar system quiz and got a black screen. Or the planets are too small to click, every orbit drag pops open a quiz, and the facts are made up. This skill builds browser-based educational 3D scenes in Three.js that render, respond to clicks the way learners expect, and teach accurate content with real feedback.
What it does
- Sets up WebGPURenderer and TSL node materials without mixing in WebGL-only APIs. ShaderMaterial, onBeforeCompile, and EffectComposer silently break TSL projects.
- Builds a renderer lifecycle that survives resizing, React StrictMode, and teardown: container-based resize, one animation loop, and full disposal.
- Makes picking reliable. Clicks are measured against the canvas, drags are told apart from clicks, and small objects get invisible hit proxies.
- Layers an HTML fact-card and quiz overlay that never blocks camera controls. It pauses the simulation while open and works with keyboard and screen readers.
- Keeps learning content in a separate data file. Questions use misconception-based distractors and explain every answer, and any number that needs checking is flagged.
- Flags premise problems up front, including real-scale distances, missing texture files, GLSL on WebGPU, and file:// loading.
What you get
Working, modular code (scene, materials, picking, UI, content file) with stated assumptions. Or a targeted fix when you paste an existing scene that misbehaves.
Best for
Developers, teachers who code, and edtech teams building interactive 3D lessons in the browser: solar systems, anatomy models, molecules, machines, maps.
SKILL.md preview
---
name: threejs-click-to-learn-3d-game
description: Builds browser-based educational 3D games in Three.js. Covers the renderer and resize lifecycle, TSL node materials on WebGPURenderer, click-to-learn raycasting with hit proxies, and an accessible HTML fact/quiz overlay driven by a separate content file. Use when the user says "build a 3D solar system quiz game", "make a 3D model students can click to learn about", "show a quiz when I click an object in three.js", "write a TSL glow shader", "my ShaderMaterial doesn't work with WebGPURenderer", "clicking the planet does nothing", "my popup blocks OrbitControls", or "the canvas is blurry/stretched after resize".
---
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.
Design-Matched SEO Pages and Graded Site Audit
Add about, team, or testimonial pages that match your site's design, with unique meta, canonicals, and JSON-LD, plus a graded audit.