by bOpen
[ PORTABLE SKILL ]
threejs-r3f
This skill should be used when the user asks to "build a Three.js scene", "set up React Three Fiber", "animate a mesh with useFrame", "load a GLTF or GLB model", or "add physics with react-three/rapier". Covers scene setup, Drei helpers, the asset pipeline, responsive canvas, and performance budgets for Three.js and React Three Fiber projects.
PART OF
bOpen Creative →Install the complete plugin to include its agents, hooks, commands, and runtime context.
Runtime support:Claude pluginCodex pluginGrok BuildOpenCode + portable skills
- PUBLISHER
- b-open-io
- RELATIONSHIP
- authored
- VERSION
- 1.0.1
- BENCHMARK
- unknown
[ RECOMMENDED INSTALL ]
Install bOpen Creative
The complete plugin is the supported path. It preserves everything the publisher designed to work alongside this skill.
Codex
VERIFIEDGrok Build
VERIFIED- This is the grok CLI, not Grok Bot.
- grok plugin details creative
Grok Bot
GUIDED SETUP- Paste this request into your Bot’s conversation. It will report what it can add.
OpenCode
VERIFIED- Paste into OpenCode. Restart after installation.
- Includes native agents, commands, skills and supported hooks/MCP. HammerTime uses bounded follow-up turns in persistent sessions.
[ ADVANCED · INDIVIDUAL SKILL ]
Install only this skill
Use this narrower path only when you intentionally want the portable SKILL.md without the plugin’s surrounding capabilities.
Skills CLI
VERIFIED- Installs only the portable skill; it omits plugin hooks, agents, commands, apps/MCP configuration, and unlisted companion skills.
Grok Bot
GUIDED SETUP- Paste into your Bot’s conversation. Once saved, use / to select the skill.
[ PROVENANCE ]
Trace it to the source.
- DISTRIBUTED SOURCE
- modules/creative/skills/threejs-r3f/SKILL.md ↗
- UPSTREAM SOURCE
- No separate upstream declared
- DISTRIBUTED DIGEST
- sha256:734f45e8d1f57bb77641c6c3fef315b1edf82a3849365806e180d1f4010fe604
- LOCK HASH
- Not applicable
Companion skills
No required companion skills are declared.
Agents using this skill
Leaf
Map and geospatial specialist covering MapLibre, Mapbox, Leaflet, CesiumJS, deck.gl, OpenLayers, Turf.js, and Protomaps/PMTiles. Use this agent when the user asks to "build a map", "add marker clustering", "add a heatmap", "debug why tiles aren't loading", "swap Leaflet for MapLibre", "build a 3D globe", "visualize millions of points on a map", or needs help choosing a mapping platform, theming maps, self-hosting tiles, or geospatial analysis. Not for general React architecture (use nextjs) or backend APIs (use integration-expert).
Kris
Creative 3D web developer for Three.js and React Three Fiber, including diegetic and world-space UI. Use this agent when the user asks to "create a 3D scene", "build a Three.js demo", "write a shader", "add physics to a scene", "build a WebGL prototype", or "optimize 3D performance". Covers R3F, Drei, GLSL, TSL, and 3D asset pipelines. Not for 2D interface design (use designer).
[ SOCIAL SHARE ]
Share this skill.
Pass the canonical page to a teammate or keep it close for later.