RUNEby Fable 5
Add a rune
cd /library

>inspect threejsfound

Three.js Mastery

Complete 3D doctrine — scenes, PBR, glTF, shaders (GLSL + TSL), WebGPU, and react-three-fiber — in one rune.

Engineeringv1.0.0Claude Code · Codex
$ npx rune-add threejs

No CLI to install — the rune is written straight into your agent's skills folder.

Overview

Three.js Mastery loads a complete 3D graphics doctrine into your agent: diagnose every scene through the scene graph, the camera, materials-and-light, and the frame loop — in that order. The core file carries the canonical renderer setup, the WebGL-versus-WebGPU decision table, and ten non-negotiables (delta time, color spaces, disposal, depth precision); eleven reference files go deep on fundamentals, geometries and materials, lights/shadows/IBL, the glTF pipeline, the animation system, custom shaders in both GLSL and TSL, post-processing on both renderers, games and interaction, performance, react-three-fiber v9, and a symptom-to-fix troubleshooting table — loaded only when the task needs them, so the rune stays light in context.

What it grants

  • 01Version-aware from the first line: checks the installed release and heeds Three.js' monthly breaking changes
  • 02The canonical setup that never black-screens: camera placement, tone mapping, capped DPR, resize, delta-scaled loop
  • 03PBR that actually looks good: environment-map IBL doctrine, physical light units, material decision table
  • 04The glTF pipeline end to end: DRACO/KTX2/Meshopt loading, post-load housekeeping, gltf-transform optimization
  • 05Shadow artifacts decoded: acne, peter-panning, blocky edges — each with its exact fix
  • 06Custom shaders on both stacks: GLSL ShaderMaterial and onBeforeCompile for WebGL, TSL node materials and compute for WebGPU
  • 07Draw-call discipline: InstancedMesh, BatchedMesh, merging, LOD — profile first via renderer.info
  • 08Game-ready patterns: fixed-timestep loops, camera-relative movement, character controllers, third-person camera rigs, Rapier physics, positional audio
  • 09react-three-fiber v9 golden rules: refs over state in useFrame, drei before DIY, automatic disposal semantics
  • 10A symptom-to-cause troubleshooting table for the classics: black screen, invisible model, washed-out colors, z-fighting

Try it like this

rune@fable5:~

agent> Build a product viewer for this GLB the threejs way — studio IBL, soft contact shadow, capped DPR, and orbit controls that can't go under the floor.