webmaker-reactthreefiber

What it does and when to use it

Build interactive 3D scenes in React websites using Three.js and @react-three/fiber. Use for /webmaker-reactthreefiber, 3D product viewers, model scenes, or interactive 3D website sections; pair with Webmaker for the surrounding site.

How it works

SKILL.md has no level-two headings · 16 lines, 246 words

---
name: webmaker-reactthreefiber
description: Build interactive 3D scenes in React websites using Three.js and @react-three/fiber. Use for /webmaker-reactthreefiber, 3D product viewers, model scenes, or interactive 3D website sections; pair with Webmaker for the surrounding site.
---

# /webmaker-reactthreefiber

Use [pmndrs/react-three-fiber](https://github.com/pmndrs/react-three-fiber), the React renderer for Three.js.
Read [references/integration.md](references/integration.md) for setup and the scene pattern.

- Inspect the existing React major and package manager. R3F 8 pairs with React 18; R3F 9 pairs with React 19. Check the exact published peer ranges before installation. Reuse an existing compatible Three.js installation.
- Put `Canvas` in a container with explicit dimensions. Keep `useFrame`, `useThree`, and scene hooks inside components rendered under that canvas. In an SSR framework, mount the scene through a client boundary.
- Keep high-frequency animation in refs and `useFrame` with delta time. Avoid React setState per frame. Choose one renderer per canvas; GSAP may animate shared values without driving a competing render loop.
- For static or input-driven scenes, consider `frameloop="demand"` and invalidate when values change. Animated scenes need a suitable loop. Clamp pixel ratio and lazy-load expensive models.
- Keep navigation and readable content in HTML. Provide an image or HTML fallback for missing WebGL and reduced motion. Give essential pointer interactions an accessible DOM control.
- Dispose manually owned resources and remove subscriptions on unmount. Reuse geometry, materials and textures where practical; do not repeatedly recreate GPU resources during animation.
- Verify actual rendering and interaction, console errors, responsive sizing, reduced motion, and the production build. Type checking alone does not establish visual correctness.

Install optional Drei, loaders, postprocessing or physics only when the task needs them. Use current official docs at https://r3f.docs.pmnd.rs/ for APIs not covered by the bundled reference.

Versions

The database has no other skills named webmaker-reactthreefiber.

Database snapshot: 13.11.2026 · package version c92368f5e7cc (SHA-256 digest of the entire package)

Downloads in the last 30 days: 0 · ranking

Report a problem with this skill: harmful content, incorrect descriptions or an author’s removal request.

Similar skills

• 91webmaker-react-three-next
  Adapt persistent React Three Fiber canvases to Next.js App Router websites using react-three-next as an architecture reference. Use for /webmaker-react-three-next or route transitions that must preserve a 3D scene.
• 91webmaker-drei
  Add Drei helpers to React Three Fiber websites for loading glTF, camera controls, lighting, and performance. Use for /webmaker-drei or an existing R3F scene that needs reusable scene components.
• 1003d-web-experience
  Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
• 91react-three-fiber
  Build declarative 3D scenes with React Three Fiber (R3F) - a React renderer for Three.js. Use when building interactive 3D experiences in React applications with component-based architecture, state management, and reusable abstractions. Ideal for product configurators,…
• 100react-three-fiber-patterns
  Build interactive 3D experiences in React using react-three-fiber (R3F), drei helpers, and shader integration. Covers scene composition, performance optimization, and animation patterns. Triggers on R3F development, React + Three.js, or declarative 3D scene requests.
• 100react-three-fiber
  React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering meshes/lights/models/environments, or integrating Three.js with json-render catalogs.