🧰 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 in the Rendering tab

Three.js

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

React Three Fiber

• TRIPLEX
• R3F-Perf

WebGL

• Spector.js

Debug UI

• Stars
  NPM
  TS
  Maintained
• lil-gui

  2k

  80k/w

  
  2k80k/w
  
• dat.GUI

  8k

  40k/w

  
  8k40k/w
  
  4 years
• Leva

  6k

  200k/w

  
  6k200k/w
  
• Tweakpane

  4k

  190k/w

  
  4k190k/w
  

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

About these numbers and colors

Example of passing an existing Valtio object to Leva.

GLSL / VS Code Extensions

• 3e
• Shader languages support
• GLSL Literal
• WebGL GLSL Editor
• glsl-canvas
• prettier-plugin-glsl

Theatre.js

Theatre.js12k4k/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 and React Three Fiber.

Motion Canvas is an alternative to Theatre.js.

Mobile browser consoles

Eruda and vConsole provide developer consoles for mobile browsers, useful for debugging on devices that don’t have built-in dev tools.