three.js

import { threeExtension } from '@haxiomic/devui/three';
gui.use(threeExtension({ renderer }));

gui.add(mesh);       // transform, shadows, and its material
gui.add(material);   // PBR properties with ranges, side/blending options, uniforms, map views
gui.add(light);      // colour (managed), intensity, distance/decay/angle/penumbra, shadow bias
gui.add(camera);     // fov/near/far/zoom (updates the projection matrix)
gui.add(renderer);   // tone mapping, exposure, colour space, pixel ratio, shadows, stats
gui.add(scene);      // background, environment intensity, fog
gui.add(renderTarget);  // colour + depth texture views

An app that bundles its own three (no import map, no global THREE) can't hand you its renderer, nor can devui reach its classes. three's devtools hook can: observeThree(gui), from @haxiomic/devui/frames, attaches a frame scope to each renderer three makes, with three's names and GPU memory counted from the start. It must run before the app's bundle does (three announces a renderer as it's made), so put it in a module script ahead of the app's:

import { gui } from '@haxiomic/devui';
import { observeThree } from '@haxiomic/devui/frames';
const three = observeThree(gui, { history: 120 });   // three.scopes, as they're made (or onScope)

For a page you can't edit, a proxy (or a dev-server middleware) can add that script and an import map for devui's files before the page's first <script>.

gui.add(scene) also lists the scene's objects (and each object's children) as an outliner. Folders an inspector makes are filled only when you open them, and long folders render only the rows on screen, so a scene with thousands of objects costs a few rows until you look inside. Search finds unopened objects by name. Your own inspectors get the same: a collapsed folder runs inspect() when first opened (lazy: false opts out), and folder.defer(fill) does it for any folder. folder.inspect(obj, { exclude }) fills a folder you made from an object's inspector, leaving out the keys (or paths, such as 'uniforms/diffuse') you don't want; add(obj, { exclude }) does the same for a new folder.

THREE.Color is edited in sRGB and stored in the working (linear) space. Rotations (Euler, Quaternion) get the orientation sphere, in degrees and in the Euler's own order. Materials recompile when you toggle properties that need it.