📄 react-three-fiber/getting-started/examples

File: examples.md | Updated: 11/15/2025

Source: https://r3f.docs.pmnd.rs/getting-started/examples

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