STL Upload Pricer

A modern web application for uploading STL 3D model files and getting instant pricing quotes for 3D printing services. Features an interactive 3D viewer with drag controls, material selection, and automatic price calculation.

Features

• 3D Model Preview: Interactive Three.js viewer with drag-to-rotate functionality
• Dual Format Support: Handles both ASCII and Binary STL file formats
• 8 Material Options: Choose from PLA, ABS, Nylon, and Flexible TPU in various colors
• Instant Pricing: Automatic weight estimation and price calculation
• Responsive Design: Works on desktop and tablet browsers
• Visual Studio Integration: Launch from Visual Studio with green start button

---

Installation & Setup Guide

Follow these step-by-step instructions to get STL Upload Pricer running on your machine.

Step 1: Install Prerequisites

You need the following installed on your computer:

Node.js (Required)

• Download from: https://nodejs.org/
• Choose the LTS (Long Term Support) version
• This includes npm (Node Package Manager) automatically
• Verify installation:

  node --version
  npm --version

Git (Optional but Recommended)

• Download from: https://git-scm.com/
• Useful for version control and cloning repositories

Visual Studio (Optional)

• For launching from Visual Studio with green start button
• Download Community Edition (free): https://visualstudio.microsoft.com/

---

Step 2: Get the Project Files

Choose one method:

Option A: Clone with Git (Recommended)

git clone <repository-url>
cd stlupload

Option B: Download as ZIP

1. Download the project ZIP file
2. Extract to your desired location
3. Open Command Prompt or PowerShell
4. Navigate to the folder:

   cd C:\path\to\stlupload

---

Step 3: Install Dependencies

In the project directory, run:

npm install

What this does:

• Downloads all required packages from npm registry
• Creates a node_modules folder with all dependencies
• Sets up Three.js, React, Next.js, Tailwind CSS, etc.

Time: 2-5 minutes (depends on internet speed)

Expected output:

added 391 packages, and audited 391 packages in 45s
146 packages are looking for funding
found 0 vulnerabilities

---

Step 4: Run the Application

You have two options:

Option A: Visual Studio (Recommended)

1. Open STLupload.sln in Visual Studio
2. Click the green Start button (▶) in the toolbar
3. The application will automatically:
   • Start the development server in a terminal window
   • Open the app in a new Chrome browser window at http://localhost:3000
4. When finished, click the red Stop button (⏹) to close everything

Option B: Command Line

1. Open Command Prompt or PowerShell
2. Navigate to the project folder:

   cd C:\repos\stlupload

3. Start the development server:

   npm run dev

4. Open your browser and go to: http://localhost:3000
5. Press Ctrl+C in the terminal to stop the server

---

Step 5: Test the Application

1. Upload a Test File

   • Use the included test file: public/test-cube.stl
   • Or upload any of your own STL files

2. Interact with 3D Preview

   • Click and drag with your mouse to rotate the model
   • Model should auto-fit to screen size

3. Select Material

   • Choose from 8 material options
   • See different prices per material

4. Calculate Price

   • Click "Calculate Price" button
   • Get instant quote

---

Quick Start with Visual Studio

The easiest way to run the application:

1. Open the solution: STLupload.sln in Visual Studio
2. Click Start: Green play button (▶) in the toolbar
3. Wait for startup:
   • A terminal window opens running the dev server
   • A new Chrome browser window opens automatically
   • Application loads at http://localhost:3000
4. Stop debugging: Red square button (⏹) when done
   • Automatically closes the browser window
   • Automatically stops the dev server
   • Cleans up all processes

---

Project Structure

stlupload/
├── app/
│   ├── page.tsx                    # Main page
│   ├── layout.tsx                  # Layout template
│   ├── globals.css                 # Global styles
│   ├── api/
│   │   └── upload/
│   │       └── route.ts            # Upload API
│   └── components/
│       ├── UploadForm.tsx          # Upload form
│       ├── STLPreview.tsx          # 3D viewer
│       └── MaterialSelector.tsx    # Material picker
├── lib/
│   └── stl-uploader.ts             # Web Component
├── public/
│   └── test-cube.stl              # Test file
├── Launcher.cs                     # Visual Studio launcher
├── STLupload.sln                   # Visual Studio solution
├── package.json                    # Dependencies
└── README.md                       # This file

---

Available Commands

# Start development server
npm run dev

# Build for production
npm run build

# Run production build
npm start

# Run code linting
npm run lint

---

Troubleshooting

Problem: "npm command not found"

Solution: Node.js isn't installed. Download from https://nodejs.org/

Problem: Port 3000 is already in use

Solution: The dev server will automatically use ports 3001, 3002, etc.

Problem: Installation fails with permission errors

Solution:

# Windows: Run Command Prompt as Administrator
# macOS/Linux: Use sudo if needed
npm install

Problem: 3D preview not showing

Fixes:

1. Check browser console (Press F12)
2. Ensure your STL file is valid
3. Try the test file: public/test-cube.stl
4. Ensure WebGL is enabled in browser

Problem: Large STL files take long to load

Normal behavior: Files with 50,000+ triangles may take 2-5 seconds to parse

• Watch browser console for "Parsed X facets" message
• Wait for "Camera fitted" message
• Loading indicator will disappear when ready

---

Browser Compatibility

Recommended: Chrome/Chromium (best performance)

Also works on:

• Firefox
• Safari (macOS/iOS)
• Edge

Requirements:

• WebGL support enabled
• JavaScript enabled
• Modern browser (2020 or newer)

---

Materials & Pricing

Material	Price per Gram	Notes
PLA White	$0.10	Standard filament
PLA Black	$0.10	Standard filament
PLA Red	$0.12	Vibrant color
PLA Blue	$0.12	Vibrant color
ABS White	$0.14	Strong & durable
ABS Black	$0.14	Strong & durable
Nylon	$0.20	Flexible
Flexible TPU	$0.25	Highly flexible

Price Calculation: Base $1.50 + (weight in grams × material price)

---

Technical Stack

• Frontend Framework: Next.js 14
• UI Library: React 18
• Language: TypeScript
• 3D Graphics: Three.js
• Styling: Tailwind CSS
• Code Quality: ESLint
• Runtime: Node.js

---

Performance

• Initial page load: ~2-3 seconds
• STL file parsing:
  • Small files (< 1MB): < 1 second
  • Large files (> 20MB): 2-5 seconds
• 3D rendering: Real-time interaction

---

File Size Reference

If you're estimating file sizes:

• Simple cube: ~1KB
• Small miniature: ~500KB-2MB
• Detailed figure: ~5-20MB
• Complex model: ~20-100MB+

---

Need Help?

1. Check the troubleshooting section above
2. Open browser console: Press F12 → Console tab
3. Look for error messages in the console
4. Verify Node.js is installed: Run node --version
5. Reinstall dependencies if needed:

   rm -r node_modules
   npm install

---

License

This project is provided for commercial use.

Version

• Current Version: 1.0.0
• Last Updated: October 2025
• Next.js: 14.0.0
• React: 18.2.0
• Three.js: 0.180.0