3D Learning Game Skill For Three.js
Create per-project skills for Three.js canvas setup, TSL shader language, and HTML GUI overlays so the agent can one-shot educational 3D games.
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
name: 3d-learning-game-threejs-skill description: Create per-project skills for Three.js canvas setup, TSL shader language, and HTML GUI overlays so the agent can one-shot educational 3D games.
3D Learning Game Skill For Three.js
What This Does
the original author walks through creating a nested .agents/skills folder with skill.md files for three.js canvas setup with resize and animation loops, TSL tiny shader language, and HTML GUI that sits above the canvas. Then a fresh chat asks for a 3D solar system learning game and the agent loads the right skills automatically.
What You Get
- Nested agent skills folder convention
- three.js canvas skill with resize and animation loop
- TSL tiny shader language reference skill
- HTML GUI overlay skill
- per-planet quiz and facts skill
Customize
- framework: Three.js version to target
- shader_style: TSL, GLSL, or none
- gui_position: overlay location
- game_topic: what educational subject
- interactivity: click-per-object quiz
Sample Output
The agent builds a 3D solar system where clicking a planet triggers a generated quiz and fact card, loading the canvas, shader, and GUI skills as it works.
Target Audience
Developers building interactive 3D educational apps in the browser
SKILL.md preview
---
name: 3d-learning-game-threejs-skill
description: Use when creating an educational 3D game or interactive scene with Three.js, including canvas setup, TSL shader work, and HTML GUI overlays.
version: 1.0.0
category: Development
author: AgentVolt
license: proprietary
tags:
- development
- p3
---
# 3D Learning Game Skill For Three.js
Sets up a skills structure for Three.js educational experiences — canvas lifecycle, TSL shader work, and an HTML GUI layer — so one prompt can one-shot an interactive 3D learning game.
## When to use
… (sign up to view the full skill)More development skills
View all Development skills →Business Automation Stack
A connected set of agents that handle the repetitive ops work — follow-ups, summaries, and handoffs.
Generate
Scaffold code, tests, and boilerplate from a short spec.
Performance Profiler
Systematic performance profiling for Node.js, Python, and Go applications.
Chaos Engineer
Designs controlled failure experiments — from a single fault injection to a full game day — and produces the runbook, rollback plan.