A modern, interactive web-based 3D slicing interface inspired by Bambu Studio — allowing users to upload .stl files, preview them in real-time 3D, customize slicing parameters, and generate G-code in the cloud.
- 🎛️ Interactive UI for slicing parameters (infill, layer height, nozzle size, etc.)
- 🖼️ Real-time 3D STL viewer using Three.js and
@react-three/fiber - 🧠 State management via custom global store
- 🌀 Smooth animations & lighting for professional-grade previews
- 🔄 Drag & drop STL upload
- 📦 Clean component-based architecture
- 🧪 Integrated slicing pipeline (via backend API, Docker-ready)
- 🧾 Auto-generated G-code preview + pricing estimator (optional)
| Layer | Tools |
|---|---|
| Frontend | React + Vite + TypeScript + Tailwind CSS |
| 3D Viewer | Three.js + @react-three/fiber + STLLoader |
| UI Lib | shadcn/ui + lucide-react |
| State | Zustand or custom store |
| Backend | Flask or Node.js (to run PrusaSlicer CLI and pricing logic) |
| Docker | Backend containerized for slicing (PrusaSlicer AppImage inside Docker) |
.
├── components/
│ ├── FileUpload.tsx # Drag & drop STL upload
│ ├── STLModel.tsx # Parses & displays STL file
│ ├── ModelViewer.tsx # 3D canvas wrapper
│ ├── ParameterForm.tsx # Infill, nozzle, layer height inputs
│ ├── SliceButton.tsx # Slicing trigger + feedback
│ └── Sidebar.tsx # Navigation & layout
├── hooks/
│ └── useSlicerStore.ts # Global state store
├── utils/
│ └── pricing.ts # G-code parser & price estimator (optional)
├── public/
│ └── img/ # Skybox images for environment lighting
├── App.tsx
├── main.tsx
└── README.md
⚠️ Replace these with actual screenshots after building
| Upload STL | 3D Viewer | Customize |
|---|---|---|
git clone https://github.com/your-username/3d-web-slicer.git
cd 3d-web-slicernpm installnpm run devTo set up the slicing backend using PrusaSlicer CLI and Flask:
cd backend/
docker build -t slicer-api .
docker run -p 5000:5000 slicer-apiAPI Endpoint: POST /slice
Payload: .stl file + slicer parameters
POST /slice
Content-Type: multipart/form-data
Form Data:
- model: (File) STL
- layer_height: 0.2
- infill: 20
- nozzle: 0.4MIT © 2025 Your Name
Based on open-source slicer and WebGL tools.
- ✂️ Preview sliced layers (G-code viewer)
- 📤 Export
.gcode+ estimated print time - 🛠️ Multiple printer profiles
- 🔐 User login + history
- 💰 Price estimation based on filament/time
- 🌐 Deploy with full-stack on Render, Vercel, or EC2
Pull requests welcome. For major changes, open an issue first.
Have ideas or suggestions? Open a Discussion.
“Code is like a 3D print – you only see flaws when you try to layer it.”