Pmndrs.docs

Examples

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

Showcase
  • Flying bananas
    Flying bananas

    effectsdofbananas
  • Room with soft shadows
    Room with soft shadows

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

    configuratort-shirtsoft-shadows
  • Frosted glass
    Frosted glass

    frostedglasstransmission
  • Caustics
    Caustics

    causticseffectssoft-shadows
  • GLTFJSX 400kb drone
    GLTFJSX 400kb drone

    gltfjsxeffectsbloomsoft-shadows
  • Monitors
    Monitors

    effectsbloomdofreflections
  • Starwars
    Starwars

    effectsreflectionsssrbloom
  • Bruno Simons 20k challenge
    Bruno Simons 20k challenge

    rapierphysicssoft-shadows
  • Scrollcontrols and lens refraction
    Scrollcontrols and lens refraction

    scrollrefractionlens
  • Using render texture through decals (forked)
    Using render texture through decals (forked)

    gltfjsxeffectsbloomsoft-shadows
  • Spline glass shapes
    Spline glass shapes

    gltfjsxeffectsbloomsoft-shadows
  • CSG bunny, useGroups
    CSG bunny, useGroups

    gltfjsxeffectsbloomsoft-shadows
  • CSG house
    CSG house

    gltfjsxeffectsbloomsoft-shadows
  • Building dynamic envmaps
    Building dynamic envmaps

  • Inter, epoxy resin
    Inter, epoxy resin

  • Stage presets, gltfjsx
    Stage presets, gltfjsx

  • Nextjs prism
    Nextjs prism

  • HTML Input fields
    HTML Input fields

  • Interactive spline scene + live HTML
    Interactive spline scene + live HTML

  • Diamond refraction
    Diamond refraction

  • 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

  • Envmap ground projection
    Envmap ground projection

  • SSR Rover
    SSR Rover

  • 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

  • Figma noodles
    Figma noodles

  • Building live envmaps
    Building live envmaps

  • Fairly realistic grass
    Fairly realistic grass

  • Clones
    Clones

  • lamina 1.x
    lamina 1.x

  • Object clump
    Object clump

  • React-pp outlines
    React-pp outlines

  • LGL Raytracer
    LGL Raytracer

  • Gatsby stars
    Gatsby stars

  • Layer materials
    Layer materials

  • Pmndrs + Vercel
    Pmndrs + Vercel

  • Sport hall
    Sport hall

  • Image Gallery
    Image Gallery

  • Reflector variant
    Reflector variant

  • Night train
    Night train

  • ThreeJS Journey - Level 1
    ThreeJS Journey - Level 1

  • Bouncy watch
    Bouncy watch

  • Horizontal tiles
    Horizontal tiles

  • Transparent aesop bottles
    Transparent aesop bottles

  • M1 scrollcontrols
    M1 scrollcontrols

  • Raycast cycling
    Raycast cycling

  • Landing page.
    Landing page.

  • UseIntersect and scrollcontrols
    UseIntersect and scrollcontrols

  • Infinite scroll
    Infinite scroll

  • Scrollcontrols with minimap
    Scrollcontrols with minimap

  • 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.

  • Threejs journey
    Threejs journey

  • Simple audio analyser
    Simple audio analyser

  • BestServedBold Christmas Baubles
    BestServedBold Christmas Baubles

  • Mixing HTML and WebGL w/ occlusion
    Mixing HTML and WebGL w/ occlusion

  • Performance scaling
    Performance scaling

  • Staging models
    Staging models

  • Camera Scroll
    Camera Scroll

  • Shoe configurator
    Shoe configurator

  • Minimap
    Minimap

  • Springy boxes
    Springy boxes

  • Floating diamonds
    Floating diamonds

  • GLTF Animations
    GLTF Animations

  • Sparks and effects
    Sparks and effects

  • Audio analyser
    Audio analyser

  • Ground reflections and video textures
    Ground reflections and video textures

  • Circling birds
    Circling birds

  • Adaptive lightmaps
    Adaptive lightmaps

  • Jointwork with ARC4G
    Jointwork with ARC4G

  • Camera shake
    Camera shake

  • Ragdoll physics
    Ragdoll physics

  • React-spring animations
    React-spring animations

  • Aesop bottles
    Aesop bottles

  • Mount transitions
    Mount transitions

  • Floating laptop
    Floating laptop

  • Zustand site
    Zustand site

  • Baked AO
    Baked AO

  • Cell fracture
    Cell fracture

  • Router transitions
    Router transitions

  • Ballpit
    Ballpit

  • Soft shadows
    Soft shadows

  • Lulaby city
    Lulaby city

  • Viking ship
    Viking ship

  • Exploding crystal
    Exploding crystal

  • Wobbling sphere
    Wobbling sphere

  • The three graces
    The three graces

  • Moksha
    Moksha

  • Flexbox/Yoga in Webgl
    Flexbox/Yoga in Webgl

  • Confetti
    Confetti

  • Learn with Jason
    Learn with Jason

  • Volumetric light
    Volumetric light

  • Hi-key bubbles
    Hi-key bubbles

  • Volumetric spotlight
    Volumetric spotlight

  • Magic mirror
    Magic mirror

  • Reflectorplanes and bloom
    Reflectorplanes and bloom

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

  • Raycast vehicle
    Raycast vehicle

Basic examples
  • Basic demo
    Basic demo

  • ASCII renderer
    ASCII renderer

  • Pixelated render pass
    Pixelated render pass

  • drei/RenderTexture
    drei/RenderTexture

  • 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

  • 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

  • Glass transmission
    Glass transmission

  • Spherical word-cloud
    Spherical word-cloud

  • Shader HMR
    Shader HMR

Edit this page on GitHub
Canvas