r3f.docs

Examples

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

Showcase
  • Shopping
    Shopping
    selectiontiltshift
  • Cards with border radius
    Cards with border radius
    border-radius
  • ThreeJS Journey Lv 1 Fisheye
    ThreeJS Journey Lv 1 Fisheye
    brunosimonthreejs-journeyfisheye
  • Lusion connectors
    Lusion connectors
    lusionn8ao
  • Ecctrl + Fisheye
    Ecctrl + Fisheye
    ecctrlcharacter-controller
  • Monitors
    Monitors
    effectsbloomdofreflections
  • Flying bananas
    Flying bananas
    effectsdofbananas
  • T-Shirt configurator
    T-Shirt configurator
    configuratort-shirtsoft-shadows
  • Caustics
    Caustics
    causticseffectssoft-shadows
  • SSGI spheres with rapier physics
    SSGI spheres with rapier physics
    ssgirapier
  • Thunder clouds
    Thunder clouds
    clouds
  • MotionPathControls
    MotionPathControls
    motion-pathclouds
  • Room with soft shadows
    Room with soft shadows
    causticseffectssoft-shadows
  • Volumetric light, Godray
    Volumetric light, Godray
    godraysreflections
  • Enter portals
    Enter portals
    portals
  • Pass through portals
    Pass through portals
    portals
  • Magic box
    Magic box
    portals
  • Video cookies
    Video cookies
    videocookiescaustics
  • glass flower
    glass flower
    glasstransmissionbloom
  • Cards
    Cards
    cardsimage
  • Diamond ring
    Diamond ring
    refraction
  • Image Gallery
    Image Gallery
    reflectionsannotations
  • Horizontal tiles
    Horizontal tiles
    scrollcontrols
  • BestServedBold Christmas Baubles
    BestServedBold Christmas Baubles
    physics
  • The three graces
    The three graces
    htmlannotations
  • Frosted glass
    Frosted glass
    frostedglasstransmission
  • GLTFJSX 400kb drone
    GLTFJSX 400kb drone
    gltfjsxeffectsbloomsoft-shadows
  • Starwars
    Starwars
    effectsreflectionsssrbloom
  • Bruno Simons 20k challenge
    Bruno Simons 20k challenge
    rapierphysicssoft-shadows
  • Scrollcontrols and lens refraction
    Scrollcontrols and lens refraction
    scrollrefractionlens
  • Building dynamic envmaps
    Building dynamic envmaps
    effectsbloomreflections
  • Nextjs prism
    Nextjs prism
    effectsbloom
  • Building live envmaps
    Building live envmaps
    customenvironments
  • Shoe configurator
    Shoe configurator
    gltfjsxconfigurator
  • Audio analyser
    Audio analyser
    audioanalyser
  • Ground reflections and video textures
    Ground reflections and video textures
    groundreflectionsvideo-texture
  • ThreeJS Journey Portal
    ThreeJS Journey Portal
    bruno-simonthreejs-journey
  • Mixing HTML and WebGL w/ occlusion
    Mixing HTML and WebGL w/ occlusion
    htmliframe
  • Interactive spline scene + live HTML
    Interactive spline scene + live HTML
    splinetooliframe
  • Diamond refraction
    Diamond refraction
    refraction
  • Diamond ring
    Diamond ring
    refractioninstanced
  • Envmap ground projection
    Envmap ground projection
    ground-projected-env
  • Spline glass shapes
    Spline glass shapes
    splinetooltransmission
  • CSG bunny, useGroups
    CSG bunny, useGroups
    transmissioncsg
  • CSG house
    CSG house
    csg
  • GLTF Animations tied to scroll
    GLTF Animations tied to scroll
    scrollanimationeffectstiltshift
  • Object clump
    Object clump
    physicseffectsn8ao
  • HTML Input fields
    HTML Input fields
    htmlinput
  • UseIntersect and scrollcontrols
    UseIntersect and scrollcontrols
    scroll
  • Infinite scroll
    Infinite scroll
    scroll
  • Scrollcontrols with minimap
    Scrollcontrols with minimap
    scroll
  • Instanced particles + Effects
    Instanced particles + Effects
    effectsparticles
  • Dbismut furniture
    Dbismut furniture
    cross-fadetransitions
  • Portal shapes
    Portal shapes
    transmissionportalsphysics
  • Aquarium
    Aquarium
    transmissionportals
  • Portals
    Portals
    portalsblend
  • Inter, epoxy resin
    Inter, epoxy resin
  • Stage presets, gltfjsx
    Stage presets, gltfjsx
  • React EllipseCurve
    React EllipseCurve
  • Iridescent decals
    Iridescent decals
  • Baking soft shadows
    Baking soft shadows
  • SSR Test
    SSR Test
  • CSG operations + Rapier physics
    CSG operations + Rapier physics
  • Faucets, select highlight
    Faucets, select highlight
  • Rapier physics
    Rapier physics
  • bloom hdr workflow, GLTF
    bloom hdr workflow, GLTF
  • Ground projected envmaps + lamina
    Ground projected envmaps + lamina
  • Basic ballpit
    Basic ballpit
  • Backdrop and cables
    Backdrop and cables
  • Clones
    Clones
  • lamina 1.x
    lamina 1.x
  • React-pp outlines
    React-pp outlines
  • Gatsby stars
    Gatsby stars
  • Pmndrs + Vercel
    Pmndrs + Vercel
  • Sport hall
    Sport hall
  • Night train
    Night train
  • Bouncy watch
    Bouncy watch
  • Transparent aesop bottles
    Transparent aesop bottles
  • Raycast cycling
    Raycast cycling
  • Landing page.
    Landing page.
  • Scrollcontrols + GLTF
    Scrollcontrols + GLTF
  • Merged Instance
    Merged Instance
  • GPGPU Curl-noise + DOF
    GPGPU Curl-noise + DOF
  • Hi-key bubbles
    Hi-key bubbles
  • Floating, instanced shoes.
    Floating, instanced shoes.
  • Simple audio analyser
    Simple audio analyser
  • Camera Scroll
    Camera Scroll
  • Springy boxes
    Springy boxes
  • Floating diamonds
    Floating diamonds
  • GLTF Animations
    GLTF Animations
  • Sparks and effects
    Sparks and effects
  • Camera shake
    Camera shake
  • Ragdoll physics
    Ragdoll physics
  • React-spring animations
    React-spring animations
  • Mount transitions
    Mount transitions
  • Floating laptop
    Floating laptop
  • Zustand site
    Zustand site
  • Cell fracture
    Cell fracture
  • Router transitions
    Router transitions
  • Soft shadows
    Soft shadows
  • Lulaby city
    Lulaby city
  • Viking ship
    Viking ship
  • Wobbling sphere
    Wobbling sphere
  • Moksha
    Moksha
  • Flexbox/Yoga in Webgl
    Flexbox/Yoga in Webgl
  • Confetti
    Confetti
  • Learn with Jason
    Learn with Jason
  • Volumetric spotlight
    Volumetric spotlight

Game prototypes
  • Racing game
    Racing game
  • Pinball in 70 lines
    Pinball in 70 lines
  • space game
    space game
  • Minecraft
    Minecraft
  • Arkanoid
    Arkanoid
  • Rapier Ping-pong
    Rapier Ping-pong
  • Arkanoid under 60 LOC
    Arkanoid under 60 LOC

Basic examples
  • Basic demo
    Basic demo
  • Spherical word-cloud
    Spherical word-cloud
  • drei/RenderTexture
    drei/RenderTexture
  • BVH
    BVH
  • Environment blur and transitions
    Environment blur and transitions
  • Pairing Threejs to UI
    Pairing Threejs to UI
  • Inverted stencil buffer
    Inverted stencil buffer
  • Stencil mask
    Stencil mask
  • TransformControls and makeDefault
    TransformControls and makeDefault
  • Bounds and makeDefault
    Bounds and makeDefault
  • Instanced vertex-colors
    Instanced vertex-colors
  • Progressive loading states with suspense
    Progressive loading states with suspense
  • View tracking
    View tracking
    viewsportals
  • Multiple views with uniform controls
    Multiple views with uniform controls
    viewsportals
  • Canvas + text
    Canvas + text
    htmlscroll
  • GLTF Animations re-used
    GLTF Animations re-used
  • Re-using GLTFs
    Re-using GLTFs
  • SVG-renderer
    SVG-renderer
  • Mixing HTML and Webgl
    Mixing HTML and Webgl
  • Viewcube
    Viewcube
  • Mixing controls
    Mixing controls
  • Video textures
    Video textures
  • Sky dome with annotations
    Sky dome with annotations
  • Tying canvas to scroll-offset
    Tying canvas to scroll-offset
  • EdgesGeometry
    EdgesGeometry
  • HTML annotations
    HTML annotations
  • Shadermaterials
    Shadermaterials
  • Simple physics demo.
    Simple physics demo.
  • Trigger meshes
    Trigger meshes
  • Simple physics demo with debug bounds
    Simple physics demo with debug bounds
  • Selective outlines
    Selective outlines
  • Instances
    Instances
  • Physics with convex-polyhedrons
    Physics with convex-polyhedrons
  • Color grading
    Color grading
  • Grass shader
    Grass shader
  • Clouds
    Clouds
  • SVG maps with HTML annotations
    SVG maps with HTML annotations
  • Re-using geometry and level of detail
    Re-using geometry and level of detail
  • HTML Markers
    HTML Markers
  • Bezier curves & nodes
    Bezier curves & nodes
  • Shader fire
    Shader fire
  • Water shader
    Water shader
  • Staging and CameraShake
    Staging and CameraShake
  • Shader HMR
    Shader HMR

Edit this page