Examples
A few examples that demonstrate what you can do with React Three Fiber
Showcase
Flying bananas
effectsdofbananasRoom with soft shadows
causticseffectssoft-shadowsT-Shirt configurator
configuratort-shirtsoft-shadowsCaustics
causticseffectssoft-shadows
Volumetric light, Godray
godraysreflectionsEnter portals
portalsPass through portals
portalsMagic box
portalsglass flower
glasstransmissionbloomImage Gallery
reflectionsannotationsHorizontal tiles
scrollcontrolsBestServedBold Christmas Baubles
physicsThe three graces
htmlannotationsFrosted glass
frostedglasstransmissionGLTFJSX 400kb drone
gltfjsxeffectsbloomsoft-shadowsStarwars
effectsreflectionsssrbloomBruno Simons 20k challenge
rapierphysicssoft-shadowsScrollcontrols and lens refraction
scrollrefractionlensBuilding dynamic envmaps
effectsbloomreflectionsNextjs prism
effectsbloomBuilding live envmaps
customenvironmentsShoe configurator
gltfjsxconfiguratorAudio analyser
audioanalyserGround reflections and video textures
groundreflectionsvideo-textureThreeJS Journey Lv 1
bruno-simonthreejs-journeyThreeJS Journey Portal
bruno-simonthreejs-journeyMixing HTML and WebGL w/ occlusion
htmliframeInteractive spline scene + live HTML
splinetooliframeDiamond refraction
refractionDiamond ring
refractioninstancedEnvmap ground projection
ground-projected-envSpline glass shapes
splinetooltransmissionCSG bunny, useGroups
transmissioncsgCSG house
csgGLTF Animations tied to scroll
scrollanimationeffectstiltshiftObject clump
physicseffectsn8aoHTML Input fields
htmlinputUseIntersect and scrollcontrols
scrollInfinite scroll
scrollScrollcontrols with minimap
scrollInstanced particles + Effects
effectsparticlesDbismut furniture
cross-fadetransitionsPortal shapes
transmissionportalsphysicsAquarium
transmissionportalsPortals
portalsblendInter, epoxy resin
Stage presets, gltfjsx
React EllipseCurve
Iridescent decals
Baking soft shadows
SSR Test
CSG operations + Rapier physics
Faucets, select highlight
Rapier physics
bloom hdr workflow, GLTF
Ground projected envmaps + lamina
Basic ballpit
Backdrop and cables
Clones
lamina 1.x
React-pp outlines
Gatsby stars
Pmndrs + Vercel
Sport hall
Night train
Bouncy watch
Transparent aesop bottles
Raycast cycling
Landing page.
Scrollcontrols + GLTF
Merged Instance
GPGPU Curl-noise + DOF
Hi-key bubbles
Floating, instanced shoes.
Simple audio analyser
Camera Scroll
Springy boxes
Floating diamonds
GLTF Animations
Sparks and effects
Camera shake
Ragdoll physics
React-spring animations
Mount transitions
Floating laptop
Zustand site
Cell fracture
Router transitions
Soft shadows
Lulaby city
Viking ship
Wobbling sphere
Moksha
Flexbox/Yoga in Webgl
Confetti
Learn with Jason
Volumetric spotlight
Game prototypes
Basic examples
Basic demo
drei/RenderTexture
BVH
Environment blur and transitions
Pairing Threejs to UI
Inverted stencil buffer
Stencil mask
TransformControls and makeDefault
Bounds and makeDefault
Instanced vertex-colors
Progressive loading states with suspense
View tracking
viewsportalsMultiple views with uniform controls
viewsportalsCanvas + text
htmlscrollGLTF Animations re-used
Re-using GLTFs
SVG-renderer
Mixing HTML and Webgl
Viewcube
Mixing controls
Video textures
Sky dome with annotations
Tying canvas to scroll-offset
EdgesGeometry
HTML annotations
Shadermaterials
Simple physics demo.
Trigger meshes
Simple physics demo with debug bounds
Selective outlines
Instances
Physics with convex-polyhedrons
Color grading
Grass shader
Clouds
SVG maps with HTML annotations
Re-using geometry and level of detail
HTML Markers
Bezier curves & nodes
Shader fire
Water shader
Staging and CameraShake
Shader HMR