Add DevTools enable/disable toggle functionality

[ath1614]

Add DevTools enable/disable toggle functionality

Problem

Screen.Recording.2025-11-12.at.12.42.13.PM.mov

Users with the Three.js DevTools extension installed couldn't temporarily disable it without removing the entire extension. This made it difficult to compare performance metrics or debug issues that might be related to devtools interference.

Fixes #31015

Solution

Added a simple toggle system that allows users to enable/disable DevTools at runtime:

• Global THREE.DevTools object with enabled property
• Methods: toggle(), setEnabled(boolean)
• Persistent state using localStorage
• Integration with existing WebGL program creation

Usage

// Toggle on/off
THREE.DevTools.toggle()

// Explicit control
THREE.DevTools.setEnabled(false)



THREE.DevTools.setEnabled(true)

// Check current state
console.log(THREE.DevTools.enabled)

Demo

Test page available at /devtools-test.html with interactive controls.

Screen Recording

Changes Made

• src/devtools/DevTools.js - Core control system
• src/renderers/webgl/WebGLProgram.js - Added enabled check
• src/Three.js - Export DevTools API
• devtools-test.html - Demo page

Testing

1. Open /devtools-test.html
2. Use toggle buttons to control DevTools state
3. Check browser console for confirmation
4. Refresh page to verify persistence

The implementation is backward compatible and adds minimal overhead.

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	356.24 86.48	356.6 86.63	+368 B +145 B
WebGPU	613.68 172.23	613.68 172.23	+0 B +0 B
WebGPU Nodes	612.28 171.97	612.28 171.97	+0 B +0 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	488.04 121.25	488.12 121.3	+81 B +52 B
WebGPU	683.1 187.49	683.1 187.49	+0 B +0 B
WebGPU Nodes	624.82 170.72	624.82 170.72	+0 B +0 B

[ath1614]

@mrdoob why this coding format check to add paddings and by the way can you review my PR?