Pmndrs.docs

Examples

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

Showcase
  • Monitors
    Monitors

    effectsbloomdofreflections
  • Flying bananas
    Flying bananas

    effectsdofbananas
  • Room with soft shadows
    Room with soft shadows

    causticseffectssoft-shadows
  • T-Shirt configurator
    T-Shirt configurator

    configuratort-shirtsoft-shadows
  • Caustics
    Caustics

    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
  • glass flower
    glass flower

    glasstransmissionbloom
  • 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 Lv 1
    ThreeJS Journey Lv 1

    bruno-simonthreejs-journey
  • 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

  • Ping-pong
    Ping-pong

  • Arkanoid under 60 LOC
    Arkanoid under 60 LOC

Basic examples
  • Basic demo
    Basic demo

  • 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 on GitHub
Canvas