Samer Noufal
All Projects
LiveWeb App

Web CAD Viewer

A 3D CAD viewer built entirely in the browser with Three.js and React Three Fiber: wireframe toggle, animated exploded view, interactive cross-section with clipping planes, and smooth camera transitions between standard engineering views. The model is built programmatically from geometric primitives — this is a demonstration of WebGL for engineering visualisation, not a production viewer.

Live Demo

Screenshots

Key Highlights

  • Wireframe, exploded view and cross-section modes
  • Smooth camera transitions between engineering views
  • Programmatic 3D geometry — no external model files
  • Interactive clipping plane with slider control

Tech Stack

ReactThree.jsReact Three FiberWebGLTypeScriptDrei

Tags

Three.jsWebGLReact Three FiberCAD3D

Related Projects

Interactive DemoLiveWeb App

Container Configurator

Interactive 3D container configurator with real-time dimension controls, material selection and live preview.

ReactTypeScriptThree.js3D
View Details →Live Demo
MixFltCoolHeatFanAttenΔp 3.45 in.wg5,000 CFM | 12.5 Tons | 8.2 BHP
Interactive DemoLiveWeb App

HVAC AHU Configurator

Air handling unit configurator with section-by-section component selection, pressure-drop analysis and live engineering calculations.

ReactTypeScriptHVACConfigurator
View Details →Live Demo
Interactive DemoLiveWeb App

Door Industry Configurator

Interactive 3D door configurator with panel styles, materials, glass options, hardware choices and live engineering specifications.

ReactTypeScriptThree.js3D
View Details →Live Demo