React Three Lite

pnpm install react-three-lite three

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

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

Everything you need for 3D

Build stunning 3D web applications with minimal code

🚀

Automatically initializes a 3D scene when the component is mounted, setting up the renderer, camera, lights, axes helper, and controls.

📦

Supports caching models using IndexedDB to reduce repeated load times. The first load stores model data in a local database.

🎯

Creates popups that can contain custom React components, supporting positioning and smooth movement in 3D space.

🎬

Built-in animation system for playing and controlling 3D model animations with support for multiple animation clips.

✨

Easily add visual effects like bloom, depth of field, and post-processing to enhance your 3D scenes.

📘

Full TypeScript support with comprehensive type definitions for all components and utilities.

Get started with React Three Lite in minutes!

~15KB

Gzipped Size

100%

TypeScript

Minimal

Dependencies

Thanks to all our contributors!