A comprehensive, professional-grade 3D CAD application built with Three.js for architects, engineers, designers, and anyone who needs precise 2D/3D drawing and measurement capabilities directly in the browser.
- Point Tool - Place precise points with coordinates
- Line Tool - Draw lines with real-time length calculation
- Polygon Tool - Create complex polygons with area and perimeter measurement
- Circle Tool - Draw circles with radius and area calculation
- Rectangle Tool - Create rectangles with dimensions and area calculation
- Real-time Coordinate Display - Live cursor position tracking
- Automatic Calculations - Length, area, perimeter measurements
- Total Statistics - Cumulative measurements across all objects
- Object Properties Panel - Detailed information for selected objects
- Layer Management - Organize objects in multiple layers with visibility controls
- Grid Snapping - Precise positioning with customizable grid size
- Undo/Redo System - Full history management (50 steps)
- Multi-format Export - JSON, CSV, and high-quality PNG export
- Project Save/Load - Complete project persistence
- Modern Dark UI - Professional interface optimized for extended use
- Keyboard Shortcuts - Efficient workflow with hotkeys
- Real-time Preview - Live preview while drawing
- Responsive Design - Works on desktop, tablet, and mobile
- Clone or Download the repository
- Open
index.htmlin a modern web browser - Start Drawing - Select a tool and click on the canvas
- Explore Features - Use the sidebar panels and toolbar
No installation required! The application runs entirely in the browser.
- Mouse Drag - Rotate view
- Mouse Wheel - Zoom in/out
- Right Click + Drag - Pan view
- P - Point Tool
- L - Line Tool
- G - Polygon Tool
- C - Circle Tool
- R - Rectangle Tool
- Ctrl+Z - Undo
- Ctrl+Y / Ctrl+Shift+Z - Redo
- Ctrl+S - Save Project
- Ctrl+O - Load Project
- Ctrl+E - Export Project
- Delete - Delete Selected Objects
- Escape - Cancel Current Drawing
- Point Tool - Single click to place points
- Line Tool - Click start point, then end point
- Polygon Tool - Click to add vertices, click near start point to close
- Circle Tool - Click center, then click edge to set radius
- Rectangle Tool - Click one corner, then opposite corner
- Floor Plan Sketching - Quick layout creation with precise measurements
- Site Planning - Plot boundaries and building positions
- Area Calculations - Instant room and building area calculations
- Technical Drawings - Precise geometric constructions
- Measurement Verification - Validate dimensions and proportions
- Design Iteration - Rapid prototyping with undo/redo
- Geometry Teaching - Interactive geometric construction
- CAD Training - Introduction to CAD concepts
- STEM Projects - Mathematical and engineering projects
- Three.js 0.160.0 - 3D graphics and rendering
- Modern JavaScript (ES6+) - Object-oriented architecture
- CSS Grid & Flexbox - Responsive layout system
- Font Awesome Icons - Professional iconography
- Chrome 80+
- Firefox 74+
- Safari 13.1+
- Edge 80+
- 60 FPS rendering on modern hardware
- Efficient memory management with automatic cleanup
- Responsive on mobile devices
| Feature | Basic Version | Professional Version (This) |
|---|---|---|
| Drawing Tools | Points only | 5 comprehensive tools |
| Measurements | Basic coordinates | Full measurement suite |
| UI/UX | Simple overlay | Professional interface |
| Export | None | JSON, CSV, PNG |
| Project Management | None | Save/Load projects |
| Undo/Redo | None | 50-step history |
| Layer System | None | Multi-layer support |
| Grid Snapping | None | Configurable precision |
| Keyboard Shortcuts | None | Full hotkey support |
- Object selection and editing
- Dimension annotations
- Advanced geometric constraints
- Import from DXF/SVG files
- 3D drawing tools (boxes, spheres, cylinders)
- Material and texture support
- Animation and presentation mode
- Collaborative editing features
- Cloud project storage
- Real-time collaboration
- Plugin system
- Advanced rendering options
We welcome contributions! This project is perfect for:
- Students learning web development and Three.js
- Professionals needing CAD functionality in web apps
- Open Source Enthusiasts interested in graphics programming
# Clone the repository
git clone [repository-url]
cd 3d-cad-designer
# Open in your favorite editor
# No build process required!
# Serve locally (optional)
python -m http.server 8000
# or
npx serve .This project is licensed under the MIT License - see the LICENSE file for details.
- Three.js Community - For the amazing 3D library
- Font Awesome - For the professional icons
- Original Creator - Efim Shliamin for the initial concept
- Modern Web Standards - Making complex 3D graphics accessible
- Documentation - This README covers all features
- Issues - Report bugs via GitHub issues
- Feature Requests - Suggest improvements via GitHub discussions
Transform your ideas into precise digital drawings with 3D CAD Designer - The future of browser-based CAD is here! 🎨✨