🧰 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

  750

  150k/w

  
  750150k/w
  
• dat.GUI

  7k

  27k/w

  
  7k27k/w
  
  3 years
• Leva

  4k

  35k/w

  
  4k35k/w
  
• Tweakpane

  3k

  10k/w

  
  3k10k/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.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 and React Three Fiber.

Mobile browser consoles