3D/WebGL (Three.js & Angular)•LIVE INTERACTIVE CANVAS

Interactive 3D Car Configurator & Scene Studio

WebGL 3D vehicle rendering engine featuring studio lighting presets, custom metallic color palettes, camera angle presets, wireframe mode, and OrbitControls.

Three.jsAngular / ReactWebGLOrbitControlsGLSL Shaders

Launch External App

INTERACTIVE CANVAS LABORATORY VIEWPORT

Scene Settings3D WEBGL POC

THEME MODE

CAR COLOR PALETTE

Auto Rotate

Wireframe Mode

CAMERA PRESETS

LIGHTING INTENSITY1.5x

THREE.JS & ANGULAR // 3D CAR SCENE STUDIO POC

TECHNICAL HIGHLIGHTS & ARCHITECTURE INSIGHTS

SPEC #1
Configures dynamic studio environment light maps (Studio Light, Dark Studio, Midnight) with real-time shadow planes.
SPEC #2
Interpolates camera matrix vectors for smooth 60fps transitions across 6 camera angle presets (Isometric, Front, Rear, Top, Left, Right).
SPEC #3
Provides live mesh debugging via wireframe mode toggles and PBR specular roughness/metalness uniforms.

LIBRARY & PURPOSE // Three.js & Angular / React WebGL (OrbitControls & MeshStandardMaterial)

Engineered as a proof-of-concept interactive 3D product configurator. Demonstrates real-time PBR material color updates, studio lighting environments, camera matrix interpolation presets, and wireframe mesh debugging.

RETURN TO PLAYGROUND LABS