React Three Fiber

Three.js as React components

Visit site

Shaders & WebGLOpen sourceReactThree.js

Live site

Open

r3f.docs.pmnd.rs

Preview React Three Fiber inline

Loads the real site in a frame. Some sites block embedding — if it comes up blank, use Open instead.

What it is

A renderer that lets you declare a 3D scene as JSX. State, suspense and the React ecosystem apply to your scene graph — no imperative render loop to maintain.

Get started

terminal

npm i three @react-three/fiber

Related in Shaders

View all

Shadertoy

shadertoy.com

The GLSL fragment shader archive

ShadersFreeGLSLWebGL

Drei

drei.docs.pmnd.rs

The R3F standard library

ShadersOpen sourceReactThree.js

by Poimandres@pmndrs

Paper Shaders

shaders.paper.design

Zero-dependency animated shader backgrounds

ShadersOpen sourceReactWebGL