๐Ÿงฐ Dev Tools

In order to get a more well-rounded environment for Three.js development, you can use the following tools:


React Three Fiber


Debug UI

Compare on NPMTrends and Star History (requires a GH token)

About these numbers and colors

Example of passing an existing Valtio object (opens in a new tab) to Leva.

GLSL / VS Code Extensions


Theatre.jsTypeScript10k1k/w is an animation library and toolkit to create cinematic scenes and animating objects of your scene. It contains a visual editor that can transform objects of your scene, which can be quite useful for debugging and positioning objects. It supports vanilla Three.js (opens in a new tab) and React Three Fiber (opens in a new tab).

Mobile browser consoles