Projects using three.js in RawalpindiProjects using three.js in Rawalpindi
Projects
People
Cover image for I engineered a high-performance, browser-based
I engineered a high-performance, browser-based 3D experience that allows users to manipulate a system of 15,000+ particles using real-time hand gestures. This project explores the intersection of Web Graphics and Computer Vision, turning a standard webcam into a spatial controller. The Technical Challenge The main hurdle was achieving a "haptic" feel ensuring the particles reacted instantly and smoothly to physical movements without lag. This required mapping 2D webcam coordinates into a 3D coordinate system and calculating volumetric transformations on the fly. The Solution & Workflow High-Performance Rendering: Used Three.js and WebGL with additive blending and custom color mapping to render a massive particle count at a consistent 60 FPS. Real-time Inference: Integrated Google MediaPipe to track 21 3D landmarks per hand directly in the client-side browser, eliminating the need for a backend. Dynamic Math: Implemented custom lerping (Linear Interpolation) and gesture thresholds to create fluid movements, such as a "fist-clench" collapsing the particles into a sphere and an "open-palm" expanding them into a galaxy. The Results Created a fully immersive, zero-latency interface that demonstrates the power of the modern web for interactive AI applications.
0
7