three-webgl-game

three-webgl-game is a skill for Codex from fanfan-de/anybox. It costs 45 tokens per session (1,315 once invoked), scanned A, original, MIT.

A guide for building three-dimensional browser games with plain Three.js, TypeScript, and Vite. Three.js is a JavaScript library for displaying 3D graphics in a web page; TypeScript adds type checking to JavaScript, and Vite is a web development build tool.

In plain words
What is it for?
Use it for non-React browser games that need direct control over 3D rendering, GLB or glTF model loading, physics, and performance investigation.
Why use it?
It provides a clear structure for directly controlling the game loop, scene, camera, asset loading, physics, and graphics debugging.

Skill for Codex

Written for Codex: agents/openai.yaml present. Also seen: mentions Codex.

Good fit Use it for non-React browser games that need direct control over 3D rendering, GLB or glTF model loading, physics, and performance investigation.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/fanfan-de/anybox/three-webgl-game
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add fanfan-de/anybox --skill three-webgl-game
Clone the repo
git clone --depth 1 https://github.com/fanfan-de/anybox

Made for: Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for three-webgl-game

README.md
[![agentmods](https://agentmods.dev/badge/skills/fanfan-de/anybox/three-webgl-game/github.svg)](https://agentmods.dev/skills/fanfan-de/anybox/three-webgl-game)
Your own site
<a href="https://agentmods.dev/skills/fanfan-de/anybox/three-webgl-game"><img src="https://agentmods.dev/badge/skills/fanfan-de/anybox/three-webgl-game/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for three-webgl-game

Your own site · 80×15
<a href="https://agentmods.dev/skills/fanfan-de/anybox/three-webgl-game"><img src="https://agentmods.dev/badge/skills/fanfan-de/anybox/three-webgl-game.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 45 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,315 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00045 $0.01315
Opus 5 $0.00023 $0.00658
Sonnet 5 $0.00009 $0.00263
Haiku 4.5 $0.00005 $0.00131

Measured 9d ago against content hash 0e7dabddb984, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

three-webgl-game scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/Anybox-Plugins/game-studio/skills/three-webgl-game/SKILL.md · 125 lines

How it starts

The opening of the file, as written. The whole thing — 125 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Three WebGL Game

Overview

Use this skill for the default non-React 3D path in the plugin. This is not generic WebGL advice. It is an opinionated stack for browser 3D work:

  • three
  • TypeScript
  • Vite
  • GLB or glTF 2.0 assets
  • Three.js loaders such as GLTFLoader, DRACOLoader, and KTX2Loader
  • Rapier JS for physics
  • SpectorJS for GPU and frame debugging
  • DOM overlays for HUD, menus, and settings

Use this skill when the project wants direct scene, camera, renderer, and game-loop control. If the app already lives in React, route to ../react-three-fiber-game/SKILL.md instead.

Use This Skill When

  • the app is plain TypeScript or Vite rather than React-first
  • the project wants direct imperative control over the render loop
  • the user asks for Three.js specifically
  • the runtime needs engine-like control over scene, camera, loaders, and physics

Do Not Use This Skill When

  • the 3D scene lives inside an existing React app
  • the main problem is shipped-asset optimization rather than runtime code
  • the user explicitly chose Babylon.js or PlayCanvas

Core Rules

  1. Keep simulation state outside Three.js objects.
    • Game rules, AI, quest state, timers, and progression should not live inside meshes or materials.
  2. Treat the render graph as an adapter.
    • Scene graph, cameras, materials, loaders, and post-processing are view concerns layered over simulation state.
  3. Keep camera behavior explicit.
    • Orbit, follow, chase, rail, and first-person styles each need their own control boundary.
  4. Keep UI out of WebGL unless the presentation absolutely depends on it.
    • Menus, HUD, inventories, and settings should default to DOM.
  5. Use GLB or glTF 2.0 as the default shipping model format.
    • Do not build the runtime around DCC-native formats.
  6. Use Rapier instead of ad hoc collision code when the game has meaningful 3D physics or collision response.
  7. Keep the first playable view low-chrome.
    • Default to one compact objective or status cluster plus transient prompts.
    • Long notes, lore, and controls references should be collapsed until asked for.
    • Do not frame the scene with multiple equal-weight cards during normal play.

Read the full file on GitHub · 125 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 9d ago First seen · 125 lines · 45 tokens per session scan A 0e7dabddb984

Subscribe to this mod's changes

three-webgl-game is a skill published in the GitHub repository fanfan-de/anybox (57 stars, last pushed 1mo ago), licensed MIT. It adds 45 tokens to every session and 1,315 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

gameobject-component-destroy

Destroy one or more Components from a target GameObject. Missing (null) components are skipped — they cannot be destroyed. Use 'gameobject-find' and 'gameobject-component-get' to identify the components first.

IvanMurzak/Unity-MCP · 49 tokens

unity-version-split

Split a C# file into Unity 6.5+ and pre-Unity 6.5 variants. Use when a file needs different implementations for different Unity versions due to API changes (e.g., EntityId vs int, GetEntityId vs GetInstanceID).

IvanMurzak/Unity-MCP · 59 tokens

godot-signals-groups

Build event-driven, decoupled Godot 4.7 gameplay with signals and node groups: declare and emit custom signals, connect with Callables (incl. bind/one-shot), and broadcast to many nodes via groups and callgroup. Use when wiring node communication in a Godot project, replacing tight references with signals…

gamedev-skills/awesome-gamedev-agent-skills · 95 tokens

motion

How an agent turns a character mesh into a usable animated FBX — and how to judge whether the result is shippable.

OpenDCAI/GameFactory-3A · 0 tokens

unity-addressables

Manage Addressables groups, entries, profiles and content builds (com.unity.addressables, reflection-based).

Besty0728/Unity-Skills · 25 tokens

threejs-exposure-color-grading

Build a measured exposure and grading path in Three.js. Use for a 64x36 encoded luminance meter, asynchronous readback, weighted log-average exposure, asymmetric adaptation, single tone-map ownership, and a generated 32-cube post-tone-map LUT.

scottstts/Threejs-Awesome-Graphics-Agent-Skills · 60 tokens