Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →athevon/threejs-r3f
Three.js and React Three Fiber sub-skill - 3D scenes, shaders, postprocessing.
Passed 25 of 25 test cases with the skill, and 23 of 25 without it.
2 fixed23 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
A newer attempt on gemini-3.6-flash on 10/3/2026 did not produce a publishable comparison (not comparable). The snapshot above is the previously measured run.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
A 3D product viewer uses `<Canvas frameloop="demand">` to save power when the scene is static. When a user clicks a button to update a material color from an external UI, what function from `@react-three/fiber` must be called to request a new frame render?
| Checked | Without skill | With skill |
|---|---|---|
| Calls the invalidate function obtained from useThree to request a frame render. | Missed | Passed |
The instructions your model reads when the skill loads.
Version-sensitive. Every API name, SDK gate and browser-support claim below was verified on 2026-09-08 against primary sources. What against, and when, is in
_jutsu/VERSIONS.md. If that date is old, re-verify before acting on a version number.
3D on the web. Three.js is the engine, R3F is the React renderer. Concise rules here. Deep-dive in
references/.Versions:
threer185 (0.185.x) ·@react-three/fiber9.x ·@react-three/drei10.x ·@react-three/postprocessing3.x. R3F 9 is React 19 only - its declared peer range isreact/react-dom>=19 <19.3(drei 10 asks^19). React 18 projects must stay on R3F 8 + drei 9. Check the installed React major before scaffolding. Renderers:WebGLRendereris still R3F's default.WebGPURenderer+ TSL is shipped (not flagged) and self-falls-back to WebGL 2, but three's docs call it "the new alternative ofWebGLRenderer", not the default. Opt in with an asyncglcallback:import * as THREE from 'three/webgpu' <Canvas gl={async (props) => { const r = new THREE.WebGPURenderer(props as any); await r.init(); return r }} />
| Need | Tool | Why |
|---|---|---|
| Full 3D scene (models, lights, physics) | R3F + drei | Declarative, React-friendly, ecosystem |
| Vanilla 3D (no React) | Three.js direct | Lighter, no React overhead |
| Simple 3D transforms on UI | CSS transform3d | GPU-composited, no WebGL context |
| 2D particles / generative | Canvas 2D | Simpler API, less GPU overhead |
| Shader-only visuals (no scene graph) | Raw WebGL / ShaderMaterial | Maximum control, minimal abstraction |
import { Canvas } from '@react-three/fiber'
import { Environment, OrbitControls } from '@react-three/drei'
import { Suspense } from 'react'
<Canvas camera={{ position: [0, 2, 5], fov: 45 }} dpr={[1, 2]} gl={{ antialias: true }}>
<Suspense fallback={null}>
test cases passed, vs 23 / 25 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.