Examples
A few examples that demonstrate what you can do with React Three Fiber
Showcase
Cards with border radius
border-radiusThreeJS Journey Lv 1 Fisheye
brunosimonthreejs-journeyfisheyeLusion connectors
lusionn8aoEcctrl + Fisheye
ecctrlcharacter-controllerMonitors
effectsbloomdofreflectionsFlying bananas
effectsdofbananasT-Shirt configurator
configuratort-shirtsoft-shadowsCaustics
causticseffectssoft-shadows
SSGI spheres with rapier physics
ssgirapierThunder clouds
cloudsMotionPathControls
motion-pathcloudsRoom with soft shadows
causticseffectssoft-shadowsVolumetric light, Godray
godraysreflectionsEnter portals
portalsPass through portals
portalsMagic box
portalsVideo cookies
videocookiescausticsglass flower
glasstransmissionbloomCards
cardsimageDiamond ring
refractionImage 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 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
Spherical word-cloud
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