aquarium · #transmission
arkanoid · Simple arkanoid implementation using cannon physics. · +react-spring,cannon,zustand · #physics,game,audio
arkanoid-under-60-loc (Arkanoid Under 60 LOC) · Super small Arkanoid barebones implementation. · +rapier · #collisions,arkanoid,physics
audio-analyser · Combining audio analysis with gltf cell fracture and reflections. · +zustand · #gltf,audio,reflections,cell-fracture
backdrop-and-cables · Using a studio backdrop, quadratic bezier line and contact shadows. · #quadraticbezierline,contact-shadows,backdrop
baking-soft-shadows · How to use drei/AccumulativeShadows and RandomizedLight · #baking,softshadows,shadows,lightmap,progressive
basic-ballpit · Physics simulation using cannon. · +cannon · #physics
basic-example · Shows how to form self-contained components with their own state and user interaction. · #interaction,pointer-events
bestservedbold-christmas-baubles (Best Served Bold Christmas Baubles) · Physics, effects, lights and colors. · +postprocessing,rapier · #effects,physics,baubles
bezier-curves-and-nodes · Creating node diagrams with drei's Line and bezier curves. · +use-gesture · #line2,graph,nodes,bezier
bloom-hdr-workflow-gltf (Bloom HDR Workflow GLTF) · #bloom,hdr,glow,gltf,selective · ~8k
bouncy-watch · Custom springy controls using use-gesture and react-spring. · #interaction,custom-controls,animation,tag-heuer,html
bounds-and-makedefault (Bounds and makeDefault) · Combining TransformControls, OrbitControls and Valtio. · #fit-all,bounds
bruno-simons-20k-challenge (Bruno Simon's 20K Challenge) · https://twitter.com/bruno_simon/status/1557355710089920513 · +csg,postprocessing,rapier · #csg,postprocessing,physics
bubbles · A metallic, mouse-reactive distorted sphere with floating instances, composited with Depth of Field, Bloom, BrightnessContrast, Noise and Vignette. · +postprocessing · #postprocessing,bloom,depth-of-field,distortion
building-live-envmaps (Building Live Env Maps) · Shows how to build declarative environment that are live and animated. · +lamina · #lightformer
bvh (BVH) · Shows how to form self-contained components with their own state and user interaction. · +leva
camera-scroll · Tying scroll to a GLTF camera path with snapping points. · #snap,scroll,gtlf,html
camera-shake · Testing dre's new CameraShake with a couple of primitives. · #camera-shake,rectarea-lights,reflections
canvas-text · Shows how to form self-contained components with their own state and user interaction.
cards
cards-with-border-radius
caustics · #transmission
cell-fracture · Exploding GLTFs using Blenders cell-fracture and GLTFJSX. · #animation,clell-fracture,gltf
chromatic-aberration · A Suzanne model staged with drei's Stage helper, fringed with @react-three/postprocessing's ChromaticAberration effect. · +postprocessing,leva · #postprocessing,chromatic-aberration
clones · Shows how to form self-contained components with their own state and user interaction. · #gltf,clone
clouds · Trying out drei's new cloud component. · +leva · #clouds
color-grading · Shows how to use LUTPass to grade colors. · #grading
confetti · Meshline particles. · +postprocessing,leva,maath,meshline · #particles,confetti
csg-bunny-usegroups (CSG Bunny useGroups) · +csg · #transmission
csg-house (CSG House) · +csg
csg-operations-rapier-physics (CSG Operations Rapier Physics) · +csg,rapier,lamina,leva · #csg,physics
dbismut-furniture (D. Bismut Furniture) · +react-spring
diamond-refraction · Diamon refraction material · +postprocessing,leva · #diamond,refraction,raycast,bvh,transmission
diamond-ring · +postprocessing · #bloom,refraction,diamond,ring,html
dot-screen · A Suzanne model staged with drei's Stage helper, halftoned through @react-three/postprocessing's DotScreen effect. · +postprocessing,leva · #postprocessing,dot-screen
drei-rendertexture (Drei RenderTexture) · Portal a live scene events and all into a texture. · #portals,rendertexture
ecctrl-fisheye · +rapier,ecctrl
edgesgeometry (EdgesGeometry) · How to use EdgesGeometry, which expects its target as a constructor argument. · #outlines,gltf,geometry
enter-portals
environment-blur-and-transitions · +leva · #environment,blur
envmap-ground-projection (Env Map Ground Projection) · +leva · #cube camera,reflections
faucets-select-highlight · +leva · #bounds,highlight,selection,metal,reflections
flexbox-yoga-in-webgl (Flexbox Yoga In WebGL) · This example uses yoga to create flex-box layouts. · +flex,postprocessing · #layout,scroll,flexbox,text
floating-diamonds · Mixing refraction shaders and animations. · +postprocessing · #gltf,refraction
floating-instanced-shoes · Using drei/instances and events. · +leva · #instances
floating-laptop · Animating GLTFs with react-spring. · +react-spring · #gltf,animation
flow-shield · Interactive force-shield playground with hit reactions, presets, and model import. · +postprocessing,leva · #shader,shield,postprocessing · ~23k
flying-bananas · Shows how to form self-contained components with their own state and user interaction. · +postprocessing
frosted-glass · Shader mip-map blur to mimic frosted glass. · +valtio · #frosted-glas,shaders,transmission
gatsby-stars · +maath · #stars,text,gradient,instances
glass-flower · +postprocessing · #transmission
gltf-animations (GLTF Animations) · This examples shows how to blend GLTF animation keyframes. · #skinnedmesh,gltf,bones,animations,useanimations
gltf-animations-re-used (GLTF Animations Reused) · This examples shows how to blend GLTF animation keyframes and to re-use an existing model even it's being keyframed. · +react-spring
gltf-animations-tied-to-scroll (GLTF Animations Tied To Scroll) · This examples shows how to blend GLTF animation keyframes. · +postprocessing
gltfjsx-400kb-drone (GLTFJSX 400KB Drone) · Shows the results of gltfjsx transform compression. · +postprocessing,maath · #bloom,compression,drone,gltf
gpgpu-curl-noise-dof (GPGPU Curl Noise DOF) · Curl noise and depth of field. · +leva · #gpu,shader,curl,dof
grass-shader · Grass shader using simplex noise. · #noise,shader,simplex,grass
grid · A Suzanne model staged with drei's Stage helper, overlaid with @react-three/postprocessing's Grid effect. · +postprocessing,leva · #postprocessing,grid
ground-projected-envmaps-lamina (Ground Projected Env Maps Lamina) · +lamina
ground-reflections-and-video-textures · This example shows drei's new Reflector in combination with video textures. · #reflections
hi-key-bubbles (High-key Bubbles) · Shows to use drei/instances how far gamma-correction can stretch colors. · +postprocessing · #instances
horizontal-tiles · Horizontal scrollcontrols with expanding tiles. · +valtio · #expand,scrollcontrols,tiles,horizontal
html-annotations (HTML Annotations) · Shows how to set up annotations with a distance factor. · #distance,html,annotations
html-input-fields (HTML Input Fields) · #text,html,input,transmission
html-markers (HTML Markers) · Occluding HTML annotations/markers. · #annotations,html,markers
image-gallery · Stage a couple of frames with a reflective, blurred out ground. · +maath · #image,meshreflectormaterial
infinite-scroll · Horizontal scrollcontrols that scroll infinitely. · #horizontal,scrollcontrols,infinite,scroll
instanced-particles-effects · Instancing, swirling particles and effects. · #effects,film,water,bloom,particles
instanced-vertex-colors · Instancing objectes with variable colors and effects. · +postprocessing · #vertex-colors,ambient-occlusion,bloom,instancing
instances · Creating fixed-position instances with varying vertex colors. · #instances,vertex-colors
inter-epoxy-resin · +postprocessing,leva · #refraction,shaders,epoxy,transmission
interactive-spline-scene-live-html (Interactive Spline Scene Live HTML) · Scene exported with Spline · #spline,stencil,html
inverted-stencil-buffer · How to invert a masked stencil. · +leva · #stencil,portal
iridescent-decals · #decal
lamina-1x (Lamina 1.x) · +lamina · #material,depth
landing-page · Transparent backdrop and model staging · #contact shadows
learn-with-jason · Small example made for a Learn-with-Jason episode. · #animation,gltf
lulaby-city (Lullaby City) · Panning around a city with positional audio. · #positional,gltf,audio
lusion-connectors · +postprocessing,rapier · #transmission
magic-box · +leva
merged-instance · Loading massive assemblies and re-using their parts while keeping the natural scene graph alive. · #batching,merging,instancing
minecraft · Mini Minecraft implementation. · +rapier,zustand · #pointerlock-controls,game,minecraft
mixing-controls · Switching off one control while the other is active. · +leva,zustand · #orbit-controls,controls,transform-controls
mixing-html-and-webgl (Mixing HTML And WebGL) · Adding HTML into the scene. · #html,transforms
mixing-html-and-webgl-w-occlusion (Mixing HTML and WebGL with Occlusion) · Having HTML and WebGL in the same scene with the addition of occlusion. · #occlusion,html · ~6k
moksha · Exploration into scroll containers tied to webgl content made for codrops. · #codrops,shaders,refraction,scroll,gltf,html · ~7k
monitors · +postprocessing,maath · #bloom · ~8k
motionpathcontrols (MotionPathControls) · +postprocessing,leva
mount-transitions · Shows how to use react-spring mount/unmount transitions, soft-shadows and AO. · +react-spring,postprocessing,zustand · #soft-shadows,animation,ambient-occlusion,transitions
multiple-views-with-uniform-controls · Shows how to form self-contained components with their own state and user interaction. · +zustand
nextjs-prism (Next.js Prism) · +postprocessing · #transmission · ~9k
night-train · Stacking a couple of drei helpers · #merged,scroll-controls,meshreflectormaterial,instances
object-clump · How to make a clump of objects that move towards the center point. · +cannon,postprocessing,leva · #physics
pairing-threejs-to-ui (Pairing Three.js To UI) · +leva
pass-through-portals · #portal
physics-with-convex-polyhedrons · Using cannon collisions with GLTFs converted into convex hulls. · +cannon · #physics,collisions,convex-polyhedron,gltf
pinball-in-70-lines · Super small pinball barebones implementation. · +cannon · #physics,pinball,arkanoid,game
pixelation · A Suzanne model staged with drei's Stage helper, blocked into chunky pixels by @react-three/postprocessing's Pixelation effect. · +postprocessing,leva · #postprocessing,pixelation
pmndrs-vercel (pmndrs Vercel) · +cannon,lamina · #gradient,material
portal-shapes · +rapier · #transmission
portals · +leva
progressive-loading-states-with-suspense · Demonstrates how to load a model progressively with fallbacks via React.Suspense. · #gltf,suspense,loading
racing-game · A semi-complete racing game. · +cannon,leva,zustand · #game,vehicle,racing,physics · ~21k
ragdoll-physics · A mini game using cannon ragdoll physics. Throw the little guy around. · +cannon · #game,ragdoll,physics
rapier-physics · +rapier,leva · #physics
rapier-ping-pong · Mini ping-pong implementation using rapier-physics. · +postprocessing,rapier,valtio
raycast-cycling · Bringing multiple objects underneath the cursor up front through raycast cycling · #raycast,cycling
re-using-geometry-and-level-of-detail · Demonstrates how to load a model progressively with fallbacks via React.Suspense, and using them as a LOD.
re-using-gltfs (Re Using GLTFs) · When you use GLTFJSX it creates a immutable snapshot of your assets, these can be reused. · #re-use,gltf
react-ellipsecurve (React EllipseCurve) · +postprocessing · #trails
react-pp-outlines (React Postprocessing Outlines) · How to build declarative, nested outlines where higher-ups take precedence. · +postprocessing,leva · #outlines
react-spring-animations · This is react-spring animating both the dom as well as the canvas with a single spring. · +react-spring · #gltf,physics,spring,animation
room-with-soft-shadows · Percentage closer soft shadows. · +leva
router-transitions · Shows how to implement routes and mount/unmount transition within the canvas using Wouter. · +postprocessing · #router,transitions,html,transmission
scanline · A Suzanne model staged with drei's Stage helper, overlaid with @react-three/postprocessing's Scanline effect. · +postprocessing,leva · #postprocessing,scanline
scrollcontrols-and-lens-refraction (ScrollControls and Lens Refraction) · Vertical scrollcontrols and minimaps. · +maath · #scroll,transmission
scrollcontrols-gltf (ScrollControls GLTF) · Connecting models with useScroll · #gltf,scrollcontrols
scrollcontrols-with-minimap (ScrollControls with Minimap) · Vertical scrollcontrols and minimaps. · #vertical,minimap,scroll
selective-outlines · Using postprocessing to give seletcive objects outlines. · +postprocessing · #postprocessing,outlines
sepia · A Suzanne model staged with drei's Stage helper, tinted sepia through @react-three/postprocessing's Sepia effect. · +postprocessing,leva · #postprocessing,sepia
shader-fire · A volumetric fire effect. · #fire,volumetric,shader
shader-hmr (Shader HMR) · Shows how to create HMR shaders
shadermaterials (Shader Materials) · How to set up shader materials declaratively. · #material,shader
shoe-configurator · A super small configurator that shows you how to make GLTF assets dynamic. · +valtio · #state,gltf,configurator
shopping · +postprocessing
simple-audio-analyser · Audio frequency analysis. · #analyser,audio
simple-physics-example · A box dropping onto a plane using use-cannon / cannon-es. · +cannon · #physics
simple-physics-example-with-debug-bounds · A box dropping onto a plane using use-cannon / cannon-es. · +cannon
sky-dome-with-annotations · Dome projecting texture and HTML annotations. · #annotations,html,dome
soft-shadows · Percentage closer soft shadows. · +leva · #pcss,soft-shadows
space-game · A small example that shows how to manage game entities. · +zustand · #physics,game · ~9k
sparks-and-effects · Demonstrating fake-particles, mesh-lines and effect composition. · +postprocessing,meshline · #glow,mesh-line,effects,particles,text-geometry
spline-glass-shapes · Scene exported with Spline · +leva · #spline,transmission
sport-hall · Shows how to form self-contained components with their own state and user interaction. · +leva · #box projected,environment,ground mapping,reflections
spotlight-shadows · Casting a patterned gobo shadow from a spot light, with a custom shader that repeats the leaf texture and fakes wind. · #spotlight,shadow,gobo,shader,texture
springy-boxes · Colorfull boxes changing position with spring physics · +react-spring · #springs,physics,animation
ssgi-spheres-with-rapier-physics (SSGI Spheres With Rapier Physics) · +rapier,maath
stage-presets-gltfjsx (Stage Presets GLTFJSX) · +leva · #gltf,stage,lighting
staging-and-camerashake (Staging and CameraShake) · How to stage and shake models while using controls at the same time. · #stage,camera-shake,controls
stencil-mask · Using the stencil mask to cut out areas of the screen. · +leva · #stencil,mask
svg-maps-with-html-annotations (SVG Maps With HTML Annotations) · Using SVGLoader, converting each path into cell components with annotations and map controls. · #html,svg
svg-renderer (SVG Renderer) · Using the render function to inject custom renderers. · #custom-renderer,svg-renderer
t-shirt-configurator (T-Shirt Configurator) · +maath,valtio · #decals
take-control · Animated frames sliding open around a floating cluster of boxes, with god rays, hue/saturation and vignette tunable through controls. · +react-spring,postprocessing,leva · #postprocessing,god-rays,spring-animation
the-three-graces · Experimentaing with lights and shadows. · +maath · #shadows,lights,gltf,html-annotations,html
threejs-journey-lv-1-fisheye (Three.js Journey Level 1 Fisheye) · A recreation of the first level from https://threejs-journey.com. · +react-spring
threejs-journey-portal (Three.js Journey Portal) · The last scene from Bruno Simons Threejs journey in react-three-fiber · #gltf,particles,shaders
thunder-clouds · Trying out drei's new cloud component. · +rapier,maath
trails · A cursor chasing the mouse through a cloud of physics-driven logos, leaving a meshline ribbon behind it. · +cannon,lamina · #trail,meshline,physics,gradient
transformcontrols-and-makedefault (TransformControls and makeDefault) · Combining TransformControls, OrbitControls and Valtio. · +valtio · #controls,state,orbit,transform
transparent-aesop-bottles · PBR transmission and thickness to emulate glas. · #reflections,transmission
trigger-meshes · Shows how to implement trigger meshes that inform the application of collisions. · +cannon
tying-canvas-to-scroll-offset · How to tie canvas objects to scrollTop while events keep working. · #scroll,lerp,events,animation,html
useintersect-and-scrollcontrols (useIntersect and ScrollControls) · Combining useIntersect with scrollcontrols. · #vertical,useintersect,intersection,scroll
video-cookies · How to use drei/AccumulativeShadows and RandomizedLight · +postprocessing
video-textures · How to load, apply and play video textures, and how to calculate fullscreen, or "cover" aspect ratio. · #video,texture,aspect-ratio
view-tracking · Shows how to form self-contained components with their own state and user interaction.
viewcube (View Cube) · Shows how to do heads-up-displays using React.portals. · #portal,viewcube,hud
vignette · Darkening the edges of the frame with @react-three/postprocessing's Vignette effect over a simple studio-lit product shot. · +postprocessing,leva · #postprocessing,vignette
viking-ship · GLTF workflow with GLTFJSX and camera rotations. · #gltf
volumetric-light-godray (Volumetric Light God Rays) · Experimenting with volumetric lights. · +postprocessing · #postprocessing,godray
volumetric-spotlight · Volumetric soft particle spot lights. · #volumetric,spotlight,soft-particles,spot
water-shader · #shader,water
wireframes · Shader-based antialiased wireframes via barycentric coordinates, on a skinned glTF model, a primitive and a custom shader material. · +leva · #wireframe,barycentric,shader,gltf,configurator
wobbling-sphere · Experimenting with environment maps. · +react-spring · #environment,reflections,soft-shadows
zustand-site · Shows how to parallax layers with dept of field and particles. · +postprocessing,meshline · #parallax,animation,dof,particles