Guides
Embed with React Three Fiber
Use a shader's output inside your own R3F scene.
<Shader> brings its own canvas. If you already have a React Three Fiber
scene, use useShaderNode instead. It gives you the shader as a TSL node to
use in your own materials:
import { useShaderNode } from "@fluorite-studio/react";
const Material = ({ id }: { id: string }) => {
const { node } = useShaderNode(id);
return <meshBasicNodeMaterial colorNode={node} />;
};Use it inside a WebGPU-backed R3F canvas. Node materials like
meshBasicNodeMaterial come from three/webgpu.
What you get back
const { node, state, error, animated } = useShaderNode(id);| Field | Type | Notes |
|---|---|---|
node | unknown | Pass it to a material's colorNode |
state | ShaderState | "idle", "fetching", "ready", "error" |
error | ShaderError | null | See the error codes |
animated | boolean | Whether the shader changes over time |
node is null until state is "ready", so show a fallback material until
then. Animated shaders run with your R3F frame loop, nothing extra needed.
Exported code
View code in the canvas's right-click menu gives you the shader as a React Three Fiber component. If it uses a filter, Switch, Repeat, Feedback, a video or the webcam, also install:
npm install @fluorite-studio/tsl three