react-three-fiber by example

Examples of using react-three-fiber.

Table of Contents

• Basic
• Cameras
• Effects
• Geometry
• Hooks
• Lighting
• Materials
• Models
• Other
• Physics

Basic

• Background color

  Using a color element to attach a background color to a scene

• Boilerplate

  A minimal boilerplate for r3f

Cameras

• Mapcontrols camera up def

  Using Drei’s map controls to pan around a scene

• Mapcontrols screenspacepanning

  Using MapControls screenspace panning to normalize mouse movements to the viewport

• Orthographic camera

  Using an orthographic projection camera in r3f

Effects

• Emissive bloom

  Adding emissive materials with bloom to create glowing text

• Emissive bloom postprocessing

  Using the postprocessing library to make emissive text with bloom for a glow

• Postprocessing custom lens effect

  Using postprocessing to create a custom effect like concentric circular lenses

• Postprocessing depth of field

  Using postprocessing to create Depth of Field

• Postprocessing dotscreen

  Using postprocessing to create a halftone-like dotscreen effect

• Postprocessing eskil vignette

  Creating a vignette using the Eskil option in postprocessing vignette

• Postprocessing glitch

  Creating a glitchy shader overlay

• Postprocessing godrays

  Creating a light-through-smoke godrays effect

• Postprocessing laser 2

  Another example of godrays

• Postprocessing laser text

  Godrays combined with Drei’s Text component

• Postprocessing ssao

  Screenspace ambient occusion - shadows where objects would occlude light

• Postprocessing triangular pixelation

  A custom triangular pixelation shader effect

• Postprocessing vignette

  A basic vignette using postprocessing

Geometry

• Basic plane

  A basic plane geometry

• Basic sphere

  A basic sphere geometry

• Instanced cubes

  Drawing lots of cubes using instancing

• Instanced ducks

  Loading a gltf model and drawing it lots of times using instancing

• Minimal cube example

  A very minimal cube example

• Rounded box

  Drei’s rounded box geometry

• Wirewrap

  A tube geometry that follows the vertices of a sphere

Hooks

• Camera shake

  A camera shake effect

• Drei usehelper

  Drawing helpers using the useHelper hook

• Rotating cube

  Rotating a cube using the useFrame hook

Lighting

• Circular light path

  A simple light following a circular path

• Pbr environment map

  Lighting using environment mapping

• Three point lighting

  An example of three point lighting

• Vsm shadows

  High quality VSM shadow mapping

Materials

• Emissive mapping

  Glowing text using emissive mapping

• Glowing torus

  A shader material glow effect

• Materials

  Examples of five basic material types

• Shaded torus

  A shader material applied to a torus

• Shaded torus with fake lighting

  A fake lighting shader material on a torus

• Shader material

  A checkerboard shader material on a sphere

• Textured cube with shadows

  Using materials with shadows

• Textured sphere

  Applying several maps to a sphere

• Textured sphere url array

  A simpler way of loading several maps to apply to a texture

• Textured sphere with color

  Combining a map with a color in a material

• Usematcaptexture

  Accessing useMatcapTexture for high quality materials

Models

• Gltf model loader

  Loading a gltf model in an r3f scene

Other

• Enter leave tracking

  Tracking where a pointer enters and leaves an object

• Html labels

  Displaying HTML labels over a scene using Drei’s Html component

• Instanced points

  Drawing sprites using instanced points

• Pointer events

  Using pointer events with a mesh for mouseover and click interactions

• R3f perf

  An example of the r3f-perf library

• Reflector

  A basic example of the Drei reflector component

• Reflector textured

  Applying a texture to a reflector

• Text

  Displaying text with Drei’s Text component wrapper around Troika text

Physics

• Three balls perpetual physics usecannon

  Three balls falling and reseting

• Three balls physics usecannon

  Three balls falling down

• Usecannon constraints

  Using constaints to form a chain

• Usecannon constraints click direction

  Using constraints with clicking

• Usecannon gravity balls

  Balls falling on top of each other