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

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