In short:
ak-threejsbuilds 3D that runs in the browser: product viewers, 3D scatter plots, particle effects, 360 tours with VR, scenes with physics. It reads the installed Three.js version and renderer, looks up examples in its bundled data, then writes code for that exact version, including cleanup when the scene is removed. It counts the work done only after seeing the image and trying the interaction, not when the console merely shows no errors.
Disclosure: I maintain AgentKit and have an affiliate relationship with it: the AgentKit link in this post is an affiliate link; buying through it gets you 30% off.
Summary
Use it when you need a 3D scene or feature in the browser, or when an existing scene stutters and needs measuring and fixing. Name the renderer (WebGL or WebGPU) and any performance constraints if you know them, so it has less to guess.
flowchart LR
A["Describe the 3D scene or feature"] --> B["ak-threejs"]
B --> C["Three.js code for the installed version"]
C --> D["Image viewed and interaction tried"]
C --> E["Measurements when performance is a requirement"]It rests on 4 ideas:
| Idea | Question | Example |
|---|---|---|
| Look up before writing | Where do the right examples and APIs come from? | Ask for a "product viewer" and it looks up that project type, finding GLTF, PBR material and environment lighting examples |
| Right version, right renderer | Which Three.js version, WebGL or WebGPU? | WebGPU or TSL recipes do not paste straight into a WebGL project; the GLTFLoader import path must match the installed version |
| Done means you see it | What evidence shows the scene is right? | Open the page, see the model, drag to rotate; if performance is required, measure frame time |
| Clean up on teardown | What must happen when leaving a page with a scene? | Stop requestAnimationFrame, remove listeners, dispose geometry, materials, textures |
The bundled knowledge is split into levels, from basics (the scene graph) to specialized topics (physics, WebXR, WebGPU and compute shaders). It opens only the level your request needs.
Sample prompt for a product viewer:
/ak-threejs A 3D product viewer for the <product name> page, loading model.glb.
Customers drag to rotate, scroll to zoom, and click buttons to switch between 3 shell colors.
Constraints: keep the current page layout, work on phones.
Done when: the model shows on the running page, and switching colors needs no reload.This skill has no flags. After /ak-threejs you describe the 3D scene or feature. The filter options of the internal search tool are run by the skill itself, so you do not type them.
Below is the detailed version: the run flow, 5 situations with prompts, how to write the input, the change history by ak release, and common pitfalls. The detailed version and the interactive page are for subscribers. Your agent can also search them through the portal's MCP.
Opens when your account has subscriber access
This guide is for subscribers
Once your account has access, the full piece, the interactive visual and the agent call all open.
- Sign in or create a modernEngineer accountReading access belongs to your account email.
- Choose a plan on the pricing page1, 3 or 12 months, paid by VietQR bank transfer. Access opens about a minute after the money arrives.
- Or redeem a Facebook subscriber codePeople supporting the page on Facebook get an activation code by message each month.
Already a subscriber? Sign in to read.
Use this piece in your agent
Get an API keyCopy the text below and paste it into Claude Code, Codex or whichever agent you use. The agent reads the piece and checks it against the repo you have open.
Read "ak-threejs: build Three.js 3D scenes for your installed version" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-threejs". If the modernengineer MCP server is not connected, stop and walk me through connecting it from https://modernengineer.dev/en/mcp.
2. Summarize the main steps of the piece and point out which apply to this repo.
3. Propose concrete changes and ask me before editing any file.Connect MCP in Claude Code (once)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Reading the full piece over MCP needs an API key from a subscriber account or one that bought this guide. Without access, the agent only gets the opening.
- Version
- v1.0.0
- Updated
- 22/10/2026
- Licence
- All rights reserved
- Slug
- ak-threejs
