📜 Table of Contents
Sketch to 3D bridges the gap between imagination and creation. It's an innovative web application that transforms your simple 2D sketches into interactive 3D models in real-time. Whether you're a designer prototyping ideas, an educator teaching geometry, or just someone who loves to create, this tool makes 3D modeling accessible to everyone.
- 🚀 Zero Learning Curve — If you can draw, you can create 3D models
- ⚡ Instant Results — See your sketches transform in real-time
- 🌐 Browser-Based — No downloads, no installations, just pure creativity
- 🎨 Creative Freedom — From simple shapes to complex polygons
- 🔧 Developer-Friendly — Clean APIs and extensible architecture
- 🎓 Educational — Perfect for learning 3D concepts and spatial reasoning
|
|
|
|
| Technology | Purpose | Why We Chose It |
|---|---|---|
 |
Framework | Server-side rendering & optimal performance |
 |
UI Library | Component-based architecture & state management |
 |
Language | Type safety & better developer experience |
 |
3D Engine | Powerful WebGL abstraction & 3D capabilities |
 |
2D Canvas | High-performance 2D graphics & interactions |
 |
Styling | Utility-first CSS & rapid prototyping |
Get up and running in less than 3 minutes:
- Node.js 18+ (Latest LTS recommended)
- npm or yarn package manager
- Modern browser with WebGL 2.0 support
# Clone the repository
git clone https://github.com/AlexanderPotiagalov/Sketch3DConverter.git
# Navigate to project directory
cd Sketch3DConverter
# Install dependencies
npm install
# Start development server
npm run dev🎉 That's it! Open http://localhost:3000 and start sketching!
# Build for production
npm run build
# Start production server
npm start
# Or serve static files
npm run export && npx serve out/Our codebase is organized for clarity and maintainability:
├── components
│ ├── DrawCanvas.tsx # Konva-based drawing & shape recognition
│ └── ThreeView.tsx # Three.js scene setup & extrusion logic
├── pages
│ ├── api
│ │ └── vectorize.ts # Converts strokes/shapes to 3D specs
│ └── index.tsx # Main UI: toolbar, canvas & 3D layers
├── utils
│ └── ShapeRecognizer.ts # Stroke → RecognizedShape algorithm
├── public
│ └── assets # Logo, example images, favicons
├── styles
│ └── globals.css # Tailwind imports & custom overrides
├── README.md
├── LICENSE
├── .gitignore
├── .env.local
├── eslint.config.mjs
├── package.json
├── package-lock.json
├── tscongif.json
├── postcss.config.mjs
└── next.config.js # Dynamic imports & SSR config
// Get reference to the drawing canvas
const canvasRef = useRef<DrawCanvasRef>(null);
// Clear the canvas
canvasRef.current?.clearCanvas();
// Export current drawing as image
const imageData = canvasRef.current?.exportImage("png", 0.9);
// Get all strokes for processing
const strokes = canvasRef.current?.getStrokes();
// Set drawing mode
canvasRef.current?.setTool("pen" | "eraser" | "select");import { ShapeRecognizer } from "./utils/ShapeRecognizer";
const recognizer = new ShapeRecognizer({
tolerance: 0.1,
minPoints: 5,
enableSmoothing: true,
});
const shapes = recognizer.analyzeStrokes(strokeData);
// Returns: Array<Circle | Rectangle | Line | Polygon | Ellipse>
// Advanced recognition with confidence scores
const detailedResults = recognizer.analyzeWithConfidence(strokeData);
// Returns: Array<{ type: string, confidence: number, geometry: Shape }>import { ThreeScene } from "./components/ThreeView";
// Create 3D scene with custom settings
const scene = new ThreeScene({
antialias: true,
shadows: true,
postProcessing: true,
});
// Add shapes to 3D scene
shapes.forEach((shape) => {
const mesh = scene.addExtrudedShape(shape, {
depth: 10,
bevelEnabled: true,
material: "phong",
});
});
// Animate the scene
scene.animate(() => {
// Custom animation logic
mesh.rotation.y += 0.01;
});We're always improving and exploring new possibilities:
- 🤖 Smarter AI — Enhanced shape recognition and intelligent suggestions
- 🎨 Better Visuals — Support for textures, lighting, and materials
- 📱 Mobile Friendly — Seamless experience on phones and tablets
- 👥 Collaboration — Real-time drawing with friends or teammates
- 🥽 Immersive Tech — AR/VR support and 3D printing export options
We believe great software is built by great communities:
- 🐛 Bug Reports — Help us squash those pesky bugs
- 💡 Feature Requests — Share your brilliant ideas
- 🔧 Code Contributions — Submit pull requests
- 📚 Documentation — Improve our guides and tutorials
- 🎨 Design & UX — Enhance UI/UX and create assets
- 🗣️ Community Support — Help others in discussions
- 🎓 Educational Content — Create tutorials and examples
Sketch to 3D is open source and available under the MIT License.
Built with modern web technologies and a passion for creativity.
👨💻 Created with ❤️ by Alexander Potiagalov
Turning sketches into reality, one line at a time.
⭐ Star this repo if you found it helpful!
Made with ✨ for creators, by creators