๐งฐ Dev Tools
In order to get a more well-rounded environment for Three.js development, you can use the following tools:
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
WebGL
Debug UI
Show more
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).