m4bwav/threewright

Build, fix, upgrade and verify three.js work with current r186 APIs: WebGL or WebGPU scenes, TSL, glTF models, 3D charts, animation, from a one-file HTML page to a Vite or React app, proven with a headless check before it is called done. Use whenever the user mentions three.js, threejs, THREE, WebGL, WebGPU, TSL, a GLB or glTF on the web, a 3D scene, a 3D model viewer, 'make it 3D', 'upgrade my three.js code', or asks which three.js API or version to use; also 'refresh threewright' and 'is threewright stale'. Hands clear cases to its siblings: threewright-docs, -video, -games, -web, -assets, -shaders, -r3f, -debug, -curate. Not for 2D charts (chartwright), Babylon.js, PlayCanvas, Unity or Blender-only work.

Find, make, convert, optimize and license 3D assets for three.js: glTF and GLB models, textures, HDRI environments and Gaussian splats; report a model's size, draw calls, texture pixels and needed decoders with tw glb, compress with glTF Transform or gltfpack (meshopt, Draco, KTX2, WebP), source CC0 packs (Poly Haven, ambientCG, Kenney, Quaternius), and point to Blender and AI generation tools, keeping a credits file. Use whenever the user asks for a model, texture or HDRI to use in three.js, to convert FBX, OBJ or STL to glTF, to make a GLB smaller or faster, to inspect or validate a model, or where to get free 3D assets; also 'refresh threewright-assets'. Not for 2D images or general Blender modelling help.

Grow and correct threewright's three.js knowledge base and keep it current: add or fix an entry (topic, scenario, library, recipe, rule), record a dated note or correction, add lint rules when a new three.js release deprecates APIs (tw deprecations), bring library versions up to date (tw versions), research a request the knowledge base cannot answer, and audit for stale or unverified entries. Use whenever the user says add this to the three.js knowledge base, note that, the threewright entry on X is wrong, a new three.js release is out, check threewright for stale versions, audit the knowledge base, or when another threewright skill hands over a gap or an error; also 'refresh threewright-curate'. Building scenes is threewright; this skill edits kb/, lint rules, hints and templates' pins.

Diagnose and fix three.js pages that are black, blank, broken, slow, flickering or wrong-looking, with text evidence first: tw check (console errors, failed requests, renderer and scene numbers, pixel coverage and brightness, fix hints), tw scene, tw glb, tw lint, and one small screenshot only when the question is visual. Use whenever the user says their three.js or WebGL or WebGPU page shows a black or white screen, nothing appears, the model is missing, tiny or huge, colours look washed out or too dark, it lags or leaks memory, shadows or textures are wrong, it works locally but not deployed, or they paste a three.js error or warning; also 'refresh threewright-debug'. Building new features stays with threewright and its siblings.

Put 3D where people read: 3D charts (scatter, surface, globe, network, terrain, point cloud) and 3D figures or model embeds for READMEs, reports, wikis, Office files, notebooks and Claude artifacts, with the right fallback when the destination cannot run three.js (a GLB, a turntable GIF or MP4, or a PNG plus a data table). Use whenever the user asks for a 3D chart or plot, 'visualize this in 3D', a 3D figure for a document, README or slide, a model in a report, or asks whether a chart should be 3D; also 'refresh threewright-docs'. Refuses decorative 3D and hands 2D charts to chartwright. Not for standalone 3D websites (threewright-web) or videos (threewright-video).

Build browser games with three.js that run, feel right and pass automated checks: a Vite and TypeScript starter with Rapier physics, a fixed-timestep loop, an input action map (keyboard, gamepad, touch), a follow camera, seeded randomness, save and pause, and test hooks that let a headless run press keys and assert that the player moved. Use whenever the user wants to make, prototype or fix a 3D web game, a game jam entry, a platformer, racer, shooter or physics toy in three.js, or asks about game loops, character controllers, Rapier, game input or shipping to itch.io, Poki or CrazyGames; also 'refresh threewright-games'. React games go through threewright-r3f first; non-game scenes stay with threewright.

Build and fix React Three Fiber apps (R3F 9.8 with drei 10.7 on React 19.3, three r186): scenes as JSX components, useFrame animation on refs, drei helpers, Rapier physics through @react-three/rapier, post-processing, WebGPU through the async gl factory, and the v10 alpha caveats; verified by building and running tw check on the output. Use whenever the user mentions React Three Fiber, R3F, @react-three/fiber, drei, a Canvas component, useFrame, useThree, a 3D scene in a React or Next.js app, asks to move a three.js scene into React, or asks whether an R3F app (a folder whose package.json has @react-three/fiber) builds and runs clean; also 'refresh threewright-r3f'. Plain three.js pages stay with threewright; games add threewright-games.

Write custom materials, shaders and effects for three.js r186: TSL node materials (colorNode, positionNode, emissiveNode, uniforms, time), GPU compute for particles and simulations, node post-processing with RenderPipeline (bloom, SSAO, SSR, depth of field, FXAA, TRAA), GLSL ShaderMaterial and onBeforeCompile on the WebGL path, and porting GLSL or Shadertoy code to TSL with three's Transpiler. Use whenever the user asks for a shader, a custom or procedural material, a glow, dissolve, hologram, toon or water effect, post-processing, compute or GPGPU particles, TSL, WGSL or GLSL in three.js, or a shader that fails to compile; also 'refresh threewright-shaders'. Page-level debugging goes to threewright-debug; React projects add threewright-r3f.

Make videos, GIFs and stills from three.js scenes: product turntables, explainer and data animations, social clips in 16:9, 1:1 or 9:16, README GIFs, transparent overlays, image sequences; frame-exact and headless with tw video and ffmpeg, then checked without watching (frame count, colour tags, black or frozen frames, a frame strip). Use whenever the user asks to record, render, export or capture a three.js scene or page as MP4, WebM, GIF, MOV or PNG frames, make a turntable or a seamless loop, or 'turn this scene into a video'; also 'refresh threewright-video'. Not for editing existing footage and not for live screen recording of a desktop app.

Build three.js experiences for websites: product viewers and configurators with material variants and AR, scroll-driven heroes and storytelling (GSAP ScrollTrigger and Lenis), landing and portfolio pages, globes and maps on a site, with a poster-first load, mobile budgets, reduced motion and keyboard access, verified headless. Use whenever the user wants a 3D hero, a product or model viewer, a configurator, a 3D landing page, scroll animation with three.js, a globe on a website, or asks to make a site's 3D fast or accessible; also 'refresh threewright-web'. Charts and figures in documents go to threewright-docs, games to threewright-games, React apps to threewright-r3f.