RCWeb 3D Viewer App

The RCWeb 3D Viewer App (app/3dviewer) is an interactive high-fidelity 3D model inspector designed around the Asymmetric Pattern. It acts as a primary 3D render-host capable of receiving external rotation pipelines from smart-controllers.

Icon

Screenshot

What it does

• High-Fidelity Model Loading: Loads complex .glb binary mesh formats (e.g. an apothecary vase) utilizing THREE.GLTFLoader. Uniquely calculates precise bounding boxes spanning thousands of vertices, automatically translating the camera origin and object scale to ensure any arbitrary artist asset perfectly fits in the viewport automatically.
• Loading Overlay Integration: Listens internally to the byte-fetching network requests mapping the progress.loaded to progress.total values to dynamically update a smooth DOM-based progress bar and DOM text labels while the giant 3D payload downloads asynchronously.
• Touch & Mouse Abstraction: Independently functions as a seamless desktop renderer featuring one-finger panning, drag rotations, and mouse-wheel zooming entirely disconnected from RCWeb sockets.

How it works

The application is structured to decouple visual state from explicit device inputs allowing it to instantly snap between mouse-control and remote-phone proxy control seamlessly.

• Twin-State Hierarchy: Implements strict remoteControlActive interrupt booleans. The moment a smart-controller begins funneling data, it natively intercepts the primary render loop, disables mouse drag hooks (shellElement.classList.remove("viewerShellInteractive")), and violently hands all 3D rotation math strictly over to the new smartphone socket payload.
• Quaternion Slerping: Data streams from the remote remote-control are processed as pure Quaternions (targetQuaternion). The renderer runs a mathematically demanding currentQuaternion.slerp(targetQuaternion) calculation continuously on the vaseRoot group to achieve infinitely smooth spinning physics despite network jitter.
• Shared State Telemetry: Designed for future expansions natively via queueSharedViewBroadcast to transmit its final camera zoom variables and model attitude out into the RCWeb mesh, theoretically allowing multiple screens to mirror exactly what the primary viewer is displaying.

Launch RCWeb App