English | 🇨🇳中文

React Three Lite

Documentation

Visit r3l.sunquakes.com.

Features

• Scene — Core 3D scene container with camera, renderer, lights, and controls
• Model Loaders — GLTF / FBX / OBJ loaders with Draco compression support
• Bloom — Post-processing glow effect
• Rain / Snow — Particle effects with custom GLSL shaders
• SweepLight — Model sweep light animation
• LightGradient — Dynamic lighting gradient effect
• Callout — Leader line annotation with auto-anchor camera tracking
• ModelRotator — Automatic model rotation utility
• SkyBox — Skybox background support
• Popup — Interactive 3D popup dialogs
• Movable — Draggable scene elements
• Animation — Model animation playback
• WaveCircleMesh / FlowLineMesh — Custom visualization meshes

Renderer Support

react-three-lite works with both modern 3D renderers:

Renderer	Default	Notes
WebGPU	✅	WebGPURenderer from three/webgpu. The default renderer. Automatically falls back to the WebGL2 backend when WebGPU is unavailable.
WebGL		Classic THREE.WebGLRenderer. TSL shaders are compiled to GLSL via WebGLNodesHandler.

Switch renderers per scene with the rendererType prop:

import { Scene } from 'react-three-lite'

function App() {
  // WebGPU (default)
  return <Scene style={{ width: '100%', height: '300px' }} />
}

function AppWebGL() {
  // WebGL
  return <Scene rendererType="webgl" style={{ width: '100%', height: '300px' }} />
}

The docs site shows every example under both renderers with a WebGPU / WebGL tab switch.

Install

Install Three.js

pnpm i three

Install react-three-lite

pnpm i react-three-lite

Getting Started

• Import the desired components from react-three-lite in main.js.

import { Scene } from 'react-three-lite'

function App() {
  return <Scene style={{ width: '100%', height: '300px' }} />
}

License

Apache-2.0 license