Debug, inspect, and optimize your WebGL/WebGPU applications with the definitive toolkit for three.js
Get up and running in under a minute:
npm install @3lens/core @3lens/overlaypnpm add @3lens/core @3lens/overlayyarn add @3lens/core @3lens/overlaybun add @3lens/core @3lens/overlayimport { createProbe } from '@3lens/core'
import { bootstrapOverlay } from '@3lens/overlay'
// Create the probe and connect it to your renderer/scene
const probe = createProbe()
probe.observeRenderer(renderer)
probe.observeScene(scene)
// Bootstrap the visual overlay
bootstrapOverlay(probe)That's it! Press Ctrl+Shift+D to toggle the devtools panel.
3Lens provides dedicated bridges for popular frameworks:
| Package | Framework | Install |
|---|---|---|
@3lens/react-bridge | React / React Three Fiber | npm i @3lens/react-bridge |
@3lens/vue-bridge | Vue / TresJS | npm i @3lens/vue-bridge |
@3lens/angular-bridge | Angular | npm i @3lens/angular-bridge |
Use the 3Lens design system to match your application's UI with the devtools:
| Package | Description | Install |
|---|---|---|
@3lens/themes | Design system themes and styles | npm i @3lens/themes |
Themes package includes:
Interested in sponsoring 3Lens? Become a sponsor