R3F SOP

Appearance

Examples ​

Fresh

A showcase of what you can build with React Three Fiber. These examples cover everything from basic geometry and animations to complex physics simulations, post-processing effects, and full game prototypes.

Showcase ​

A selection of impressive demos built with R3F:

  • Shopping — selection, tiltshift
  • Cards with border-radius — border-radius geometry
  • Three.js Journey fisheye — bruno simon, fisheye lens
  • Lusion connectors — lusion, n8ao
  • Monitors — effects, bloom, depth of field, reflections
  • Flying bananas — effects, depth of field
  • T-shirt configurator — configurator, soft shadows
  • Caustics — caustics effects, soft shadows
  • Thunder clouds — cloud rendering
  • Enter portals — portal rendering
  • Magic box — portal rendering
  • Glass flower — glass, transmission, bloom
  • Image gallery — reflections, annotations
  • Diamond refraction — refraction shaders
  • Diamond ring — refraction, instancing
  • Shoe configurator — gltfjsx, configurator
  • Audio analyser — audio visualization

Game Prototypes ​

  • Racing game — full physics-based racing
  • Pinball in 70 lines — compact game prototype
  • Space game — 3D space shooter
  • Minecraft — voxel world
  • Arkanoid — classic breakout
  • Rapier ping pong — physics-based pong

Basic Examples ​

  • Basic demo — geometry and materials
  • BVH — bounding volume hierarchy for raycasting
  • Environment blur and transitions — environment maps
  • Instanced particles effects — GPU instancing with particles
  • View tracking — multiple views with portals
  • Canvas text — HTML-in-canvas text
  • Re-using GLTFs — model re-use patterns
  • SVG renderer — SVG output
  • Video textures — video as texture
  • Shader materials — custom GLSL shaders
  • Simple physics demo — basic physics
  • Instances — GPU instancing
  • Color grading — post-processing color grading
  • Grass shader — custom grass rendering
  • Clouds — volumetric clouds

Learning Resources ​

Some helpful material for going deeper:

  • Threejs docs and examples — the authoritative three.js reference
  • Discover Threejs — especially the Tips and Tricks chapter for best practices
  • Bruno Simon's Threejs Journey — arguably the best learning resource, includes a full R3F chapter