Modern architectural visualization often relies on complex, server-side geometry engines that prioritize precision over real-time interactivity. This study addresses a specific bottleneck in the staircase manufacturing industry: a 10-second latency required to generate high-precision 3D geometry from a backend engine. Such delays hinder the user experience by making minor visual adjustments, such as material swaps or architectural visibility toggles, computationally expensive and unresponsive. To resolve this issue, this thesis proposes a client-side heuristic layer developed using Three.js and React with TypeScript. Following the Design Science Research (DSR) methodology, an artifact was created to perform Semantic Decomposition, automatically deconstructing a unified, static mesh into an intelligent, hierarchical scene graph based on naming conventions.  A key technical contribution is the implementation of Contextual Mesh Modification. By identifying "wallplank" metadata, the system procedurally calculates coordinates to simulate real-time floor-opening adjustments, bypassing the need for server-side recalculation. Furthermore, the study analyzes the rendering trade-offs of high-fidelity glass; specifically, how the removal of Screen Space Ambient Occlusion (SSAO) on transparent layers was necessary to eliminate "black square" artifacts caused by depth-buffer contention in the transmission pass. The results demonstrate that by shifting the computational burden of material and spatial logic to the client-side, the "time-to-interaction" is reduced from 10 000 milliseconds to under 100ms. The prototype maintains a stable performance of >60 FPS, proving that metadata-driven heuristics effectively bridge the gap between high-precision asynchronous geometry and responsive web-based 3D visualization.