Build verifiable 3D web scenes with ak:threejs

Use ak:threejs to plan, implement, or review a Three.js scene involving WebGL or WebGPU, models, materials, interaction, animation, post-processing, physics, or XR. The Skill combines progressive reference files with a local search index of packaged examples, API summaries, categories, and use cases.

Choose ak:threejs for browser 3D

Use it when

• You need a product configurator, game, visualization, panorama, architectural scene, particle system, custom shader, or WebXR experience.
• You need to load GLTF, FBX, OBJ, textures, animation clips, or environment maps.
• You are profiling draw calls, geometry, textures, materials, shadows, post-processing, or WebGPU compute work.
• You want local example discovery before adapting code to the installed Three.js version.

Choose another workflow when

• You need frame-deterministic 3D inside a programmatic video. Use ak:remotion and its Remotion-specific Three.js rules.
• You need ordinary UI styling or product UX rather than a rendered 3D scene.
• You only need official current API facts. Check the installed version and primary Three.js documentation; bundled references can age.

Prepare the scene contract

• State the framework and exact Three.js version, target browsers and devices, WebGL/WebGPU fallback policy, canvas size, interaction model, asset formats, and performance budget.
• Provide licensed models, textures, HDR maps, audio, and fonts. Identify remote URLs, CORS requirements, decoder or transcoder files, and maximum download size.
• Define accessibility alternatives for information or actions represented only in the canvas, including keyboard controls, labels, reduced motion, and a non-3D fallback where necessary.
• Install Python only if using the bundled search CLI. Search reads packaged CSV files and does not fetch the live examples listed in its results.

Run the Skill

/ak:threejs "Add an accessible GLTF product viewer with OrbitControls, loading and error states, WebGL fallback, keyboard alternatives, disposal on unmount, and a 60 fps target on mid-range mobile"

/ak:threejs "Add an accessible GLTF product viewer with OrbitControls, loading and error states, WebGL fallback, keyboard alternatives, disposal on unmount, and a 60 fps target on mid-range mobile"

$ak:threejs "Add an accessible GLTF product viewer with OrbitControls, loading and error states, WebGL fallback, keyboard alternatives, disposal on unmount, and a 60 fps target on mid-range mobile"

The Skill has no documented top-level modes. The local search helper supports:

Follow the observable stages

1. Inspect the renderer boundary. Confirm installed versions, browser support, canvas ownership, scene lifecycle, assets, fallbacks, and budgets.
2. Search and select a pattern. Use packaged examples and progressive references, then reconcile imports and APIs with the installed release.
3. Build the minimum scene. Establish scene, camera, renderer, resize handling, loading/error feedback, color space, lighting, and cleanup before effects.
4. Add interaction and content. Load assets, provide controls and accessible alternatives, and keep state transitions observable.
5. Optimize from measurements. Profile draw calls, triangles, texture memory, frame time, loading, layout shift, and target-device behavior before choosing instancing, LOD, compression, lower-resolution passes, or WebGPU.
6. Verify and report. Record files, assets, browsers, devices, fallbacks, performance measurements, visual checks, accessibility evidence, and gaps.

Keep assets, devices, and experimental APIs explicit

• Model, texture, font, audio, decoder, and environment-map URLs can create network requests and expose user IP or referrer data to their hosts.
• WebXR can request immersive sessions, controllers, hand tracking, spatial audio, hit testing, or room-scale features. Obtain user intent and browser permission; do not assume hardware support.
• Physics requires an external library. WebGPU compute and node-material features can require a WebGPU renderer; provide a tested WebGL path where required.
• Dispose geometries, materials, textures, controls, listeners, render targets, and the renderer when ownership ends. Keep source assets unchanged.
• Shaders and remote assets are code or content inputs. Review licensing, provenance, CORS, memory, and failure behavior before shipping.

Verify outputs and limits

A complete run should include the source diff, asset manifest, loading and error states, renderer fallback, cleanup evidence, keyboard and pointer behavior, reduced-motion handling, and measured results on target devices. Inspect visual correctness, color space, material and light behavior, resize, pixel ratio, mobile orientation, focus, canvas alternatives, draw calls, frame time, memory, and failures for missing or undecodable assets.

The packaged examples, API summaries, browser notes, and reference code are point-in-time guidance, not live Three.js documentation. Stable and beta contain identical ak:threejs resources in the documented releases. Continue with Runtime adapters or the Engineer Kit overview.