An interactive browser-based tool for visualizing and solving engineering graphics problems — covering isometric projections, surface development of solids, and sectional views.
Built as a learning aid while studying Engineering Graphics, using AI-assisted development and prompt engineering.
Live Demo: https://enggfx-pro.vercel.app/
- 8 solid types — Cube, Rectangular Prism, Cylinder, Cone, Triangular Prism, Hexagonal Prism, Square Pyramid, Frustum
- Real-time dimension control (sliders in mm)
- Orthographic & perspective camera modes
- View presets — Isometric, Front Elevation, Plan View, Side Elevation
- Drag to rotate, scroll to zoom, Shift+drag to pan
- Toggles for wireframe edges, X-ray mode, axes helper
- Live volume and surface area calculations
- Accurate unrolling for 8 solids
- Cylinder → rectangle (width = 2πR)
- Cone → annular sector (θ = 360·R/l)
- Frustum → concentric annular sector
- All prisms → face strips with end caps
- Square Pyramid → base + 4 triangular faces
- Fold lines, dimension annotations, formula reference panel
- 4-panel layout: Front Elevation, End Elevation, Plan View, True Section Shape
- 4 cutting plane types — Horizontal, Vertical, Oblique, Diagonal 45°
- Live cutting plane position control
- Identifies resulting conic section (circle, ellipse, rectangle, triangle, parallelogram) with dimensions
- Supports Cylinder, Cone, Square Prism, Rectangular Prism, Sphere, Triangular Prism
| Layer | Technology |
|---|---|
| 3D Rendering | Three.js r128 |
| 2D Drawing | HTML5 Canvas API |
| Geometry Math | Vanilla JS |
| Styling | CSS Variables, Google Fonts |
| Deployment | Vercel |
No frameworks. No build tools. Single HTML file.
Key formulas implemented:
Cylinder → Circumference = 2πR
Cone → Slant height l = √(R² + H²)
Sector angle θ = 360 × R / l
Frustum → L_outer = R × l / (R - r)
L_inner = r × l / (R - r)
Prisms → Lateral area = Perimeter × H
Pyramid → Slant height l = √(H² + (a/2)²)
Lateral area = 2al
No installation needed. Just open the HTML file in any browser.
git clone https://github.com/yourusername/enggfx-pro
cd enggfx-pro
# open index.html in browserOr visit the live deployment link above.
Created during my first year B.Tech (Industrial Engineering) at College of Engineering Trivandrum (CET), while studying Engineering Graphics. Used as a visual reference to verify surface development constructions and understand how cutting planes produce different conic sections.
MIT — free to use and modify.