Three.js Scene Architecture Framework

What this builds

A production-grade scene management framework for vanilla Three.js that handles the entire lifecycle: context creation, render loop, resize/DPR adaptation, asset loading coordination, layer-based scene organization, and complete GPU resource disposal on teardown. This is the structural skeleton that every Three.js project copies, often badly.

• Singleton renderer bound to a canvas element with proper DPR capping.
• Clock-based render loop using setAnimationLoop with frame-rate-independent delta time.
• Automatic resize observer (not window resize event) that updates camera, renderer, and any render targets.
• Scene layers for isolating render passes (e.g. main scene, UI overlay, background).
• Asset loading coordinator with progress tracking and Suspense-compatible promise interface.
• Complete dispose() path that walks the scene graph and frees every geometry, material, texture, and render target.
• Visibility-based loop pause (Page Visibility API) to stop burning GPU when the tab is hidden.
• Context loss recovery: re-initialize the entire GL pipeline on webglcontextrestored.