R3F

This page covers the optional threejs-debug-view/r3f adapter only.

The native runtime is the main path — see Native Runtime. Install steps for both paths live in Quick Start.

One-component integration

import { DebugViewLayer } from "threejs-debug-view/r3f"

function DebugLayer() {
  if (!import.meta.env.DEV) return null
  return <DebugViewLayer />
}

Mount DebugLayer inside your <Canvas>. You do not need a separate <Leva /> import — the panel mounts on document.body by default.

Included	What you get
Built-in views	Beauty, normals, depth, material channels, wireframe, lighting-only, reflection-only, measured overlap, light overlap, and shader cost
Leva controls	View picker, layouts, pane assignments, labels, blend opacity, diagonal angle
Runtime	Same WebGPU MRT passes and TSL compositor as the native export
DOM labels & legends	Viewport labels and diagnostic legends

Custom Leva placement

When the panel should live in a specific place in your app shell:

import { DebugViewLayer, DebugViewLeva } from "threejs-debug-view/r3f"

<>
  <Canvas>
    <Scene />
    <DebugViewLayer showLeva={false} />
  </Canvas>
  <DebugViewLeva />
</>

Bring your own controls

When your app owns UI state, use DebugViews with useDebugViewsControls instead of DebugViewLayer. See Quick Start — bring your own controls.

Useful props:

• showEnabledControl={false} — keep debug views always mounted (demo default)
• custom views / viewLabels — subset of diagnostics
• viewportViews, layout, paneCount — fixed pane assignments

What npm ships

Published on npm	Repo only (not in tarball)
dist/ ESM + types	Demo app (src/)
LICENSE, README.md, logo	Docs site and hosted demo build

Pick a path

Goal	Use
Native WebGPU loop	root threejs-debug-view — Native Runtime
Fastest R3F integration	DebugViewLayer
Custom R3F UI	DebugViews + useDebugViewsControls
Try layouts interactively	Live demo

Demo app

The hosted demo exercises scene tabs, layout presets, shader-cost click-to-sample, and overlap legends. It validates the product surface; it is not installed from npm.