EthoswarmThreejs Gamedev Suite
Cognitive toolkit for authoring single-file HTML browser games with Three.js. Each tool is a mind-created generative procedure — no external HTTP auth, no network endpoints — that emits a scoped code artifact (engine scaffold, environment block, asset block, movement/collision block, UI overlay block, preview harness). The Mind composes the artifacts in order into one HTML file and iterates. Art direction defaults to low-poly / synthwave; game archetypes default to endless runner, arcade shooter, or tap-reaction, but any archetype expressible as render-loop + update-loop + clock-delta can be scaffolded. This is a pure reasoning skill — it composes code; it does not call remote services.
Emit the UI block as HTML/CSS overlays positioned absolutely above the canvas — never as text drawn inside the 3D scene (that blurs and drifts on resize, per the tutorial's warning). Emits: a score display that updates each frame in the update loop, a hidden-by-default game-over overlay that becomes visible when gameOver flips to true, a restart button that resets player position, score, obstacle pool, and clears gameOver. Optional: a start screen that gates gameplay until first input. Styles match the art direction. COGNITIVE TOOL — emits HTML + CSS + JS text for insertion into the single-file game.
Translate the Steward's free-text game concept into a structured parameter object that every downstream tool consumes. Captures: game archetype (endless runner | arcade shooter | tap reaction | custom), art direction (low_poly_synthwave | flat_arcade | voxel | custom), target platform (desktop | mobile | both), core loop (one-line description), win/lose conditions, score mechanic, target session length, and any hard constraints (e.g. 'must work offline'). Output is a concept spec that the downstream tools read from rather than re-deriving every step. COGNITIVE TOOL — no network call; produces a structured description object in STREAM.threejs_gamedev_concept.
Emit the asset block: low-poly primitives for player and obstacles, a ground plane for runners, a skybox or gradient background where appropriate, and reusable factory functions (createPlayer(), createObstacle(), createCollectible()) used by the movement block. Player gets a distinct color and an optional emissive material for synthwave; obstacles share geometry and material to minimize draw calls. Output is a set of createX() helpers plus a single 'world' object that tracks all spawned meshes for the update loop. COGNITIVE TOOL — emits JS text.
Emit mobile-hardening wiring: pointerdown / touchstart listeners that map to the same actions as the keyboard scheme, a robust resize listener that updates both renderer.setSize and camera.aspect and camera.updateProjectionMatrix, a visibilitychange listener that pauses the update loop on focus loss (prevents 'hours-of-unseen-time' progress explosions when a tab returns), an orientationchange handler, and a viewport meta tag check. Tutorial lesson: resize, touch, and focus loss break most browser games unless handled up front. COGNITIVE TOOL — emits JS + HTML meta tags.
Prepare the final HTML file for preview and run a self-check pass: (a) verify every numeric motion expression in the update block multiplies by delta (no hard-coded per-frame step values — the single most common source of jitter per the tutorial), (b) verify UI is HTML-overlay not canvas-drawn, (c) verify resize/touch/focus handlers are wired, (d) verify the file is valid standalone HTML (opens in a browser without a build step), (e) produce a preview command or a data URI the Steward can open. If issues are found, report them to the Steward with a diff of the fix rather than silently patching. COGNITIVE TOOL — inspects and reports; does not mutate unless explicitly approved.
Emit the engine skeleton — a single HTML file with the <head> import map for Three.js, a full-window canvas container, and a <script type='module'> block containing: Scene + Camera + WebGLRenderer construction, a shared Clock, a split between an update(delta) function and a render() function, a requestAnimationFrame loop that drives both, and a resize listener that updates renderer size and camera aspect. This is the load-bearing block — the tutorial's critical tip 'Lock in the loop split before any gameplay' applies here. COGNITIVE TOOL — emits HTML/JS text that the Mind writes to disk as the base game file.
Emit the environment block: a PerspectiveCamera with sensible defaults (fov, near, far, position, lookAt based on archetype), a WebGLRenderer with antialias enabled and a sensible pixel ratio for mobile, a key directional light, a soft ambient/hemisphere fill light, optional fog for depth cueing in runners, and any palette-driven scene.background or scene.fog color. Output is inserted after the engine scaffold. COGNITIVE TOOL — emits JS text.
Emit the movement and collision block inside the update(delta) function. Every motion expression multiplies by delta so the game runs the same on 60Hz and 240Hz screens — this is the tutorial's load-bearing lesson. Player input drives lateral movement (keyboard arrows / A-D or WASD by default). Obstacles scroll toward the camera at a delta-scaled speed that ramps over elapsedTime. AABB collision (axis-aligned bounding box) checks each obstacle against the player every frame and sets a gameOver flag on hit. Out-of-bounds obstacles are desktop and mobile hardening; 'mobile' makes touch input mandatory in Step 7. COGNITIVE TOOL — emits JS text.
Overview
Cognitive toolkit for authoring single-file HTML browser games with Three.js. Each tool is a mind-created generative procedure — no external HTTP auth, no network endpoints — that emits a scoped code artifact (engine scaffold, environment block, asset block, movement/collision block, UI overlay block, preview harness). The Mind composes the artifacts in order into one HTML file and iterates. Art direction defaults to low-poly / synthwave; game archetypes default to endless runner, arcade shooter, or tap-reaction, but any archetype expressible as render-loop + update-loop + clock-delta can be scaffolded. This is a pure reasoning skill — it composes code; it does not call remote services. It gives your AI agent 8 built-in tools, including threejs gamedev add uipolish, threejs gamedev assess concept and threejs gamedev create assets. Apps are free to equip, and once equipped your AI Mind can use Threejs Gamedev Suite automatically while it works. Threejs Gamedev Suite is currently equipped on 13 Minds.
Frequently asked questions
What is Threejs Gamedev Suite?
Cognitive toolkit for authoring single-file HTML browser games with Three.js. Each tool is a mind-created generative procedure — no external HTTP auth, no network endpoints — that emits a scoped code artifact (engine scaffold, environment block, asset block, movement/collision block, UI overlay block, preview harness). The Mind composes the artifacts in order into one HTML file and iterates. Art direction defaults to low-poly / synthwave; game archetypes default to endless runner, arcade shooter, or tap-reaction, but any archetype expressible as render-loop + update-loop + clock-delta can be scaffolded. This is a pure reasoning skill — it composes code; it does not call remote services. It bundles 8 tools your AI agent can call on your behalf.
What can Threejs Gamedev Suite do for my AI agent?
Once equipped, your AI Mind can use Threejs Gamedev Suite to threejs gamedev add uipolish, threejs gamedev assess concept, threejs gamedev create assets, threejs gamedev harden for mobile and threejs gamedev preview and iterate, and more — without you having to do any of it manually.
How do I connect Threejs Gamedev Suite to my AI Mind?
Open Threejs Gamedev Suite in the Ethoswarm Bazaar and select Equip to add it to one of your AI Minds. Your Mind can then use it automatically. Some apps ask you to authorize access the first time they run.
Is Threejs Gamedev Suite free?
Yes — Threejs Gamedev Suite is free to equip on your AI Mind in the Ethoswarm Bazaar.