Examples

A few examples that demonstrate what you can do with React Three Fiber

Showcase

  • shopping demo -- selection, tiltshift

  • cards-with-border-radius demo -- border-radius

  • threejs-journey-lv-1-fisheye demo -- bruno, simon, threejs-journey, fisheye

  • lusion-connectors demo -- lusion, n8ao

  • ecctrl-fisheye demo -- ecctrl, character-controller

  • monitors demo -- effects, bloom, dof, reflections

  • flying-bananas demo -- effects, dof, bananas

  • t-shirt-configurator demo -- configurator, t-shirt, soft-shadows

  • caustics demo -- caustics, effects, soft-shadows

  • ssgi-spheres-with-rapier-physics demo -- ssgi, rapier

  • thunder-clouds demo -- clouds

  • motionpathcontrols demo -- motion-path, clouds

  • room-with-soft-shadows demo -- caustics, effects, soft-shadows

  • volumetric-light-godray demo -- godrays, reflections

  • enter-portals demo -- portals

  • pass-through-portals demo -- portals

  • magic-box demo -- portals

  • video-cookies demo -- video, cookies, caustics

  • glass-flower demo -- glass, transmission, bloom

  • cards demo -- cards, image

  • image-gallery demo -- reflections, annotations

  • horizontal-tiles demo -- scroll, controls

  • bestservedbold-christmas-baubles demo -- physics

  • the-three-graces demo -- html, annotations

  • frosted-glass demo -- frosted, glass, transmission

  • gltfjsx-400kb-drone demo -- gltfjsx, effects, bloom, soft-shadows

  • starwars demo -- effects, reflections, ssr, bloom

  • bruno-simons-20k-challenge demo -- rapier, physics, soft-shadows

  • scrollcontrols-and-lens-refraction demo -- scroll, refraction, lens

  • building-dynamic-envmaps demo -- effects, bloom, reflections

  • nextjs-prism demo -- effects, bloom

  • building-live-envmaps demo -- custom, environments

  • shoe-configurator demo -- gltfjsx, configurator

  • audio-analyser demo -- audio, analyser

  • ground-reflections-and-video-textures demo -- ground, reflections, video-texture

  • threejs-journey-portal demo -- bruno-simon, threejs-journey

  • mixing-html-and-webgl-w-occlusion demo -- html, iframe

  • interactive-spline-scene-live-html demo -- splinetool, iframe

  • diamond-refraction demo -- refraction

  • diamond-ring demo -- refraction, instanced

  • envmap-ground-projection demo -- ground-projected-env

  • spline-glass-shapes demo -- splinetool, transmission

  • csg-bunny-usegroups demo -- transmission, csg

  • csg-house demo -- csg

  • gltf-animations-tied-to-scroll demo -- scroll, animation, effects, tiltshift

  • object-clump demo -- physics, effects, n8ao

  • html-input-fields demo -- html, input

  • useintersect-and-scrollcontrols demo -- scroll

  • infinite-scroll demo -- scroll

  • scrollcontrols-with-minimap demo -- scroll

  • instanced-particles-effects demo -- effects, particles

  • dbismut-furniture demo -- cross-fade, transitions

  • portal-shapes demo -- transmission, portals, physics

  • aquarium demo -- transmission, portals

  • portals demo -- portals, blend

  • inter-epoxy-resin demo

  • stage-presets-gltfjsx demo

  • react-ellipsecurve demo

  • iridescent-decals demo

  • baking-soft-shadows demo

  • ssr-test demo

  • csg-operations-rapier-physics demo

  • faucets-select-highlight demo

  • rapier-physics demo

  • bloom-hdr-workflow-gltf demo

  • ground-projected-envmaps-lamina demo

  • basic-ballpit demo

  • backdrop-and-cables demo

  • clones demo

  • lamina-1x demo

  • react-pp-outlines demo

  • gatsby-stars demo

  • pmndrs-vercel demo

  • sport-hall demo

  • night-train demo

  • bouncy-watch demo

  • transparent-aesop-bottles demo

  • raycast-cycling demo

  • landing-page demo

  • scrollcontrols-gltf demo

  • merged-instance demo

  • gpgpu-curl-noise-dof demo

  • hi-key-bubbles demo

  • floating-instanced-shoes demo

  • simple-audio-analyser demo

  • camera-scroll demo

  • springy-boxes demo

  • floating-diamonds demo

  • gltf-animations demo

  • sparks-and-effects demo

  • camera-shake demo

  • ragdoll-physics demo

  • react-spring-animations demo

  • mount-transitions demo

  • floating-laptop demo

  • zustand-site demo

  • cell-fracture demo

  • router-transitions demo

  • soft-shadows demo

  • lulaby-city demo

  • viking-ship demo

  • wobbling-sphere demo

  • moksha demo

  • flexbox-yoga-in-webgl demo

  • confetti demo

  • learn-with-jason demo

  • volumetric-spotlight demo

Game prototypes

  • racing-game demo

  • pinball-in-70-lines demo

  • space-game demo

  • minecraft demo

  • arkanoid demo

  • rapier-ping-pong demo

  • arkanoid-under-60-loc demo

Basic examples

  • basic-demo demo

  • drei-rendertexture demo

  • bvh demo

  • environment-blur-and-transitions demo

  • pairing-threejs-to-ui demo

  • inverted-stencil-buffer demo

  • stencil-mask demo

  • transformcontrols-and-makedefault demo

  • bounds-and-makedefault demo

  • instanced-vertex-colors demo

  • progressive-loading-states-with-suspense demo

  • view-tracking demo -- views, portals

  • multiple-views-with-uniform-controls demo -- views, portals

  • canvas-text demo -- html, scroll

  • gltf-animations-re-used demo

  • re-using-gltfs demo

  • svg-renderer demo

  • mixing-html-and-webgl demo

  • viewcube demo

  • mixing-controls demo

  • video-textures demo

  • sky-dome-with-annotations demo

  • tying-canvas-to-scroll-offset demo

  • edgesgeometry demo

  • html-annotations demo

  • shadermaterials demo

  • simple-physics-demo demo

  • trigger-meshes demo

  • simple-physics-demo-with-debug-bounds demo

  • selective-outlines demo

  • instances demo

  • physics-with-convex-polyhedrons demo

  • color-grading demo

  • grass-shader demo

  • clouds demo

  • svg-maps-with-html-annotations demo

  • re-using-geometry-and-level-of-detail demo

  • html-markers demo

  • bezier-curves-and-nodes demo

  • shader-fire demo

  • water-shader demo

  • staging-and-camerashake demo

  • shader-hmr demo