🧰 Dev Tools

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

• Chrome Frame Rendering Stats (opens in a new tab) in the Rendering tab (opens in a new tab)

Three.js

• three-tools by BACE (opens in a new tab) – Chrome
• Three.js Developer Tools (opens in a new tab) – Firefox
• Stats.js (opens in a new tab) – Included in R3F Drei (opens in a new tab)
• stats-gl (opens in a new tab) – WebGL performance monitoring tool
• Three.js Editor (opens in a new tab)
• DrawCallInspector (opens in a new tab) (Chrome, experimental)
• three-inspect (opens in a new tab)

React Three Fiber

• TRIPLEX (opens in a new tab)
• R3F-Perf (opens in a new tab)

WebGL

• Spector.js (opens in a new tab)

Debug UI

• lil-gui750150k/w
• dat.GUI7k27k/w2y years
• Leva4k35k/w
• Tweakpane3k10k/w

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

• 3e (opens in a new tab)
• Shader languages support (opens in a new tab)
• GLSL Literal (opens in a new tab)
• WebGL GLSL Editor (opens in a new tab)
• glsl-canvas (opens in a new tab)
• prettier-plugin-glsl (opens in a new tab)

Theatre.js

Theatre.js10k1k/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