kris/stl-storage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: STL Storage Application

Browse Source 
- Complete web-based STL file storage and 3D viewer
- Express.js backend with SQLite database
- Interactive Three.js 3D viewer with orbit controls
- File upload with drag-and-drop support
- Security features: rate limiting, input validation, helmet
- Container deployment with Docker/Podman
- Production-ready configuration management
- Comprehensive logging and monitoring

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
kris 2025-08-07 16:18:58 +00:00
commit 3dff6b00d4
27 changed files with 7523 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
.dockerignore Normal file
View File

@ -0,0 +1,50 @@
# Node modules
node_modules
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Database files (will be created in container)
*.db
*.db-journal
# Upload files (will be persistent volume)
uploads
# Logs
*.log
server.log
# Environment files
.env*
# Git
.git
.gitignore
# Documentation
README.md
*.md
# OS generated files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
# IDE files
.vscode
.idea
*.swp
*.swo
# Test files
test-*
*test.html
# Temporary files
tmp
temp

27
.env.example Normal file
View File

@ -0,0 +1,27 @@
# STL Storage Application Configuration
# Server Configuration
PORT=3000
NODE_ENV=production
HOST=0.0.0.0
# Database Configuration
DB_PATH=./stl_storage.db
UPLOAD_DIR=./uploads
# File Upload Limits
MAX_FILE_SIZE=104857600
MAX_FILES_PER_REQUEST=5
ALLOWED_EXTENSIONS=.stl,.STL
# Rate Limiting
RATE_LIMIT_WINDOW_MS=900000
RATE_LIMIT_MAX_REQUESTS=100
# Security
SESSION_SECRET=your-secret-key-change-this
BCRYPT_ROUNDS=12
# Logging
LOG_LEVEL=info
LOG_FILE=./logs/app.log

9
.gitignore vendored Normal file
View File

@ -0,0 +1,9 @@
node_modules/
uploads/
*.db
*.db-journal
.env
.DS_Store
npm-debug.log*
yarn-debug.log*
yarn-error.log*

35
Dockerfile Normal file
View File

@ -0,0 +1,35 @@
FROM node:18-alpine
# Set working directory
WORKDIR /app
# Create app user for security
RUN addgroup -g 1001 -S nodejs && \
adduser -S stlapp -u 1001
# Copy package files
COPY package*.json ./
# Install dependencies
RUN npm ci --only=production && npm cache clean --force
# Copy application code
COPY . .
# Create necessary directories and set permissions
RUN mkdir -p uploads/stl uploads/thumbnails logs data config && \
chown -R stlapp:nodejs /app && \
chmod -R 755 /app
# Switch to non-root user
USER stlapp
# Expose port
EXPOSE 3000
# Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
CMD node -e "require('http').get('http://localhost:3000/api/files', (res) => { process.exit(res.statusCode === 200 ? 0 : 1) }).on('error', () => process.exit(1))"
# Start the application
CMD ["sh", "-c", "test -f stl_storage.db || node init-db.js; node server.js"]

122
README-Docker.md Normal file
View File

@ -0,0 +1,122 @@
# STL Storage - Docker Deployment
A web-based STL file storage and 3D viewer application packaged for container deployment.
## Quick Start
### Using Podman/Docker Compose (Recommended)
1. **Build and start the application:**
```bash
podman-compose up -d --build
# or with Docker
docker-compose up -d --build
```
2. **Access the application:**
- Web interface: http://localhost:3000
- Upload STL files and view them in 3D
### Using Podman/Docker directly
1. **Build the container:**
```bash
podman build -t stl-storage .
# or with Docker
docker build -t stl-storage .
```
2. **Run the container:**
```bash
podman run -d \
--name stl-storage-app \
-p 3000:3000 \
-v ./uploads:/app/uploads \
-v ./stl_storage.db:/app/stl_storage.db \
stl-storage
```
## Features
### 🎯 **Core Functionality**
- **Web-based STL upload** with drag-and-drop support
- **3D viewer** with interactive controls (rotate, zoom, pan)
- **File management** (search, download, delete)
- **Viewer controls** (wireframe mode, color changes, screenshots)
- **SQLite database** for metadata storage
- **Local file storage** for STL files
### 🔒 **Security Features**
- **Rate limiting** and DDoS protection
- **Input validation** and sanitization
- **File format validation** beyond extension checking
- **Security headers** via Helmet.js
- **Non-root container** execution
- **Structured logging** with Winston
### 📊 **Monitoring & Reliability**
- **Health checks** for container monitoring
- **Graceful shutdown** handling
- **Error tracking** and logging
- **Configurable file size** and rate limits
## Container Details
- **Base Image:** Node.js 18 Alpine
- **Port:** 3000
- **User:** Non-root user (stlapp:1001)
- **Health Check:** Built-in endpoint monitoring
- **Persistent Data:** Uploads and database via volumes
## Volume Mounts
- `./uploads:/app/uploads` - STL file storage
- `./stl_storage.db:/app/stl_storage.db` - SQLite database
## Environment Variables
- `NODE_ENV=production` (default)
- `PORT=3000` (default)
## Management Commands
```bash
# View logs
podman logs stl-storage-app
# Stop application
podman-compose down
# Restart application
podman-compose restart
# Update application
podman-compose up -d --build
```
## Security Features
- Non-root user execution
- File type validation (STL only)
- File size limits (100MB)
- CORS protection
- Health monitoring
## Troubleshooting
1. **Port conflicts:** Change the port mapping in docker-compose.yml
2. **Permission issues:** Ensure upload directory is writable
3. **Database issues:** Delete stl_storage.db to reinitialize
4. **Memory issues:** Increase container memory limits for large STL files
## Development
To run in development mode:
```bash
podman run -it --rm \
-p 3000:3000 \
-v $(pwd):/app \
-w /app \
node:18-alpine \
npm run dev
```

99
SECURITY.md Normal file
View File

@ -0,0 +1,99 @@
# Security Guidelines
## Security Features Implemented
### 🛡️ **Application Security**
- **Helmet.js**: Security headers (CSP, XSS protection, etc.)
- **Rate Limiting**: API endpoints protected against abuse
- **Input Validation**: Express-validator for all user inputs
- **File Validation**: STL format validation and content checks
- **Filename Sanitization**: Prevents path traversal attacks
- **Error Handling**: No sensitive information in error messages
### 🔐 **Container Security**
- **Non-root User**: Application runs as `stlapp:1001`
- **Minimal Base Image**: Alpine Linux for reduced attack surface
- **Dependency Scanning**: Production-only dependencies
- **Volume Permissions**: Proper file system permissions
### 📊 **Monitoring & Logging**
- **Winston Logging**: Structured logging with rotation
- **Health Checks**: Container health monitoring
- **Audit Trail**: File upload/delete operations logged
## Security Configuration
### Environment Variables
```bash
# Rate limiting
RATE_LIMIT_WINDOW_MS=900000 # 15 minutes
RATE_LIMIT_MAX_REQUESTS=100 # Max requests per window
# File upload security
MAX_FILE_SIZE=104857600 # 100MB max file size
MAX_FILES_PER_REQUEST=5 # Max files per upload
ALLOWED_EXTENSIONS=.stl,.STL # Allowed file extensions
# Logging
LOG_LEVEL=info # Log level
```
### Recommended Production Settings
```bash
NODE_ENV=production
SESSION_SECRET=your-strong-secret-key-here
LOG_LEVEL=warn
RATE_LIMIT_MAX_REQUESTS=50
```
## Security Best Practices
### 🌐 **Network Security**
- Use reverse proxy (nginx/traefik) in production
- Enable HTTPS with valid certificates
- Configure firewall rules
- Use VPN or private networks when possible
### 📁 **File Storage Security**
- Regularly scan uploaded files for malware
- Implement file retention policies
- Monitor storage usage and quotas
- Backup data with encryption
### 🔄 **Container Security**
- Regularly update base images
- Scan images for vulnerabilities
- Use secrets management for sensitive data
- Enable container runtime security
### 📈 **Monitoring**
- Monitor failed authentication attempts
- Track unusual upload patterns
- Set up alerts for security events
- Regular security audits
## Vulnerability Reporting
If you discover a security vulnerability, please:
1. **Do not** create a public issue
2. Email security details privately
3. Include steps to reproduce
4. Allow time for patching before disclosure
## Security Checklist
### Pre-deployment
- [ ] Change default passwords/secrets
- [ ] Configure rate limiting
- [ ] Set up HTTPS
- [ ] Configure logging
- [ ] Test file upload validation
- [ ] Verify container permissions
### Post-deployment
- [ ] Monitor logs for anomalies
- [ ] Set up security alerts
- [ ] Regular vulnerability scans
- [ ] Update dependencies regularly
- [ ] Backup verification
- [ ] Security audit schedule

46
config/config.js Normal file
View File

@ -0,0 +1,46 @@
require('dotenv').config();
const config = {
// Server configuration
port: parseInt(process.env.PORT) || 3000,
host: process.env.HOST || '0.0.0.0',
nodeEnv: process.env.NODE_ENV || 'development',
// Database configuration
database: {
path: process.env.DB_PATH || './stl_storage.db',
uploadDir: process.env.UPLOAD_DIR || './uploads'
},
// File upload configuration
upload: {
maxFileSize: parseInt(process.env.MAX_FILE_SIZE) || 100 * 1024 * 1024, // 100MB
maxFiles: parseInt(process.env.MAX_FILES_PER_REQUEST) || 5,
allowedExtensions: (process.env.ALLOWED_EXTENSIONS || '.stl,.STL').split(','),
destination: './uploads/stl'
},
// Security configuration
security: {
sessionSecret: process.env.SESSION_SECRET || 'change-this-secret-key',
bcryptRounds: parseInt(process.env.BCRYPT_ROUNDS) || 12,
rateLimitWindow: parseInt(process.env.RATE_LIMIT_WINDOW_MS) || 15 * 60 * 1000,
rateLimitMax: parseInt(process.env.RATE_LIMIT_MAX_REQUESTS) || 100
},
// Logging configuration
logging: {
level: process.env.LOG_LEVEL || 'info',
file: process.env.LOG_FILE || './logs/app.log'
}
};
// Validate required configuration
const requiredEnvVars = [];
const missingVars = requiredEnvVars.filter(varName => !process.env[varName]);
if (missingVars.length > 0) {
throw new Error(`Missing required environment variables: ${missingVars.join(', ')}`);
}
module.exports = config;

47
config/logger.js Normal file
View File

@ -0,0 +1,47 @@
const winston = require('winston');
const path = require('path');
const fs = require('fs');
// Ensure logs directory exists
const logDir = path.join(__dirname, '..', 'logs');
if (!fs.existsSync(logDir)) {
fs.mkdirSync(logDir, { recursive: true });
}
const logLevel = process.env.LOG_LEVEL || 'info';
const logFile = process.env.LOG_FILE || path.join(logDir, 'app.log');
const logger = winston.createLogger({
level: logLevel,
format: winston.format.combine(
winston.format.timestamp(),
winston.format.errors({ stack: true }),
winston.format.json()
),
defaultMeta: { service: 'stl-storage' },
transports: [
new winston.transports.File({
filename: path.join(logDir, 'error.log'),
level: 'error',
maxsize: 5242880, // 5MB
maxFiles: 5
}),
new winston.transports.File({
filename: logFile,
maxsize: 5242880, // 5MB
maxFiles: 5
})
]
});
// Add console transport for development
if (process.env.NODE_ENV !== 'production') {
logger.add(new winston.transports.Console({
format: winston.format.combine(
winston.format.colorize(),
winston.format.simple()
)
}));
}
module.exports = logger;

69
config/security.js Normal file
View File

@ -0,0 +1,69 @@
const rateLimit = require('express-rate-limit');
const helmet = require('helmet');
const { body, param, query } = require('express-validator');
// Rate limiting configuration
const createRateLimit = (windowMs = 15 * 60 * 1000, max = 100) => rateLimit({
windowMs,
max,
message: 'Too many requests from this IP, please try again later.',
standardHeaders: true,
legacyHeaders: false,
});
// API rate limits
const apiLimiter = createRateLimit(
parseInt(process.env.RATE_LIMIT_WINDOW_MS) || 15 * 60 * 1000, // 15 minutes
parseInt(process.env.RATE_LIMIT_MAX_REQUESTS) || 100
);
// Stricter rate limit for uploads
const uploadLimiter = createRateLimit(
15 * 60 * 1000, // 15 minutes
10 // 10 uploads per window
);
// Security headers configuration
const securityHeaders = helmet({
contentSecurityPolicy: {
directives: {
defaultSrc: ["'self'"],
styleSrc: ["'self'", "'unsafe-inline'"],
scriptSrc: ["'self'", "https://cdn.jsdelivr.net", "https://unpkg.com"],
imgSrc: ["'self'", "data:", "blob:"],
connectSrc: ["'self'"],
fontSrc: ["'self'"],
objectSrc: ["'none'"],
mediaSrc: ["'self'"],
frameSrc: ["'none'"],
},
},
crossOriginEmbedderPolicy: false, // Required for Three.js
});
// Input validation schemas
const fileValidation = [
body('description').optional().isLength({ max: 500 }).trim().escape(),
body('tags').optional().isLength({ max: 200 }).trim(),
body('printSettings').optional().isJSON(),
body('dimensions').optional().isJSON(),
];
const fileIdValidation = [
param('id').isInt({ min: 1 }).withMessage('Valid file ID required')
];
const searchValidation = [
query('search').optional().isLength({ max: 100 }).trim().escape(),
query('limit').optional().isInt({ min: 1, max: 100 }).withMessage('Limit must be between 1 and 100'),
query('offset').optional().isInt({ min: 0 }).withMessage('Offset must be non-negative')
];
module.exports = {
apiLimiter,
uploadLimiter,
securityHeaders,
fileValidation,
fileIdValidation,
searchValidation
};

244
database.js Normal file
View File

@ -0,0 +1,244 @@
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const fs = require('fs').promises;
class STLDatabase {
constructor(dbPath = './stl_storage.db', uploadDir = './uploads') {
// Use data directory if available (for containers)
if (process.env.NODE_ENV === 'production' && require('fs').existsSync('./data')) {
this.dbPath = './data/stl_storage.db';
} else {
this.dbPath = dbPath;
}
this.uploadDir = uploadDir;
this.db = null;
}
async initialize() {
await this.ensureDirectories();
await this.connectDatabase();
await this.initializeSchema();
}
async ensureDirectories() {
try {
await fs.access(this.uploadDir);
} catch {
await fs.mkdir(this.uploadDir, { recursive: true });
}
}
async connectDatabase() {
return new Promise((resolve, reject) => {
this.db = new sqlite3.Database(this.dbPath, (err) => {
if (err) {
reject(err);
} else {
resolve();
}
});
});
}
async initializeSchema() {
const schema = await fs.readFile('./schema.sql', 'utf8');
return new Promise((resolve, reject) => {
this.db.exec(schema, (err) => {
if (err) {
reject(err);
} else {
resolve();
}
});
});
}
async addSTLFile(fileData) {
const {
filename,
originalName,
filePath,
fileSize,
description = null,
tags = null,
printSettings = null,
dimensions = null
} = fileData;
return new Promise((resolve, reject) => {
const stmt = this.db.prepare(`
INSERT INTO stl_files
(filename, original_name, file_path, file_size, description, tags, print_settings, dimensions)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)
`);
stmt.run([
filename,
originalName,
filePath,
fileSize,
description,
tags,
printSettings ? JSON.stringify(printSettings) : null,
dimensions ? JSON.stringify(dimensions) : null
], function(err) {
if (err) {
reject(err);
} else {
resolve(this.lastID);
}
});
stmt.finalize();
});
}
async getSTLFile(id) {
return new Promise((resolve, reject) => {
this.db.get(
'SELECT * FROM stl_files WHERE id = ?',
[id],
(err, row) => {
if (err) {
reject(err);
} else {
resolve(row ? this.parseRow(row) : null);
}
}
);
});
}
async getAllSTLFiles(limit = 50, offset = 0) {
return new Promise((resolve, reject) => {
this.db.all(
'SELECT * FROM stl_files ORDER BY upload_date DESC LIMIT ? OFFSET ?',
[limit, offset],
(err, rows) => {
if (err) {
reject(err);
} else {
resolve(rows.map(row => this.parseRow(row)));
}
}
);
});
}
async searchSTLFiles(query) {
return new Promise((resolve, reject) => {
this.db.all(
`SELECT * FROM stl_files
WHERE filename LIKE ? OR original_name LIKE ? OR description LIKE ? OR tags LIKE ?
ORDER BY upload_date DESC`,
[`%${query}%`, `%${query}%`, `%${query}%`, `%${query}%`],
(err, rows) => {
if (err) {
reject(err);
} else {
resolve(rows.map(row => this.parseRow(row)));
}
}
);
});
}
async updateSTLFile(id, updates) {
const allowedFields = ['description', 'tags', 'print_settings', 'dimensions'];
const updateFields = [];
const values = [];
for (const [key, value] of Object.entries(updates)) {
if (allowedFields.includes(key)) {
updateFields.push(`${key} = ?`);
if (key === 'print_settings' || key === 'dimensions') {
values.push(value ? JSON.stringify(value) : null);
} else {
values.push(value);
}
}
}
if (updateFields.length === 0) {
throw new Error('No valid fields to update');
}
values.push(id);
return new Promise((resolve, reject) => {
this.db.run(
`UPDATE stl_files SET ${updateFields.join(', ')} WHERE id = ?`,
values,
function(err) {
if (err) {
reject(err);
} else {
resolve(this.changes > 0);
}
}
);
});
}
async deleteSTLFile(id) {
const file = await this.getSTLFile(id);
if (!file) {
return false;
}
try {
await fs.unlink(file.file_path);
} catch (err) {
console.warn(`Could not delete file ${file.file_path}:`, err.message);
}
return new Promise((resolve, reject) => {
this.db.run(
'DELETE FROM stl_files WHERE id = ?',
[id],
function(err) {
if (err) {
reject(err);
} else {
resolve(this.changes > 0);
}
}
);
});
}
parseRow(row) {
const parsed = { ...row };
if (parsed.print_settings) {
try {
parsed.print_settings = JSON.parse(parsed.print_settings);
} catch {
parsed.print_settings = null;
}
}
if (parsed.dimensions) {
try {
parsed.dimensions = JSON.parse(parsed.dimensions);
} catch {
parsed.dimensions = null;
}
}
return parsed;
}
async close() {
return new Promise((resolve) => {
this.db.close((err) => {
if (err) {
console.error('Error closing database:', err);
}
resolve();
});
});
}
}
module.exports = STLDatabase;

31
docker-compose.yml Normal file
View File

@ -0,0 +1,31 @@
version: '3.8'
services:
stl-storage:
build: .
container_name: stl-storage-app
ports:
- "3000:3000"
volumes:
# Persistent storage for uploads
- ./uploads:/app/uploads
# Persistent storage for database and logs
- stl_data:/app/data
- stl_logs:/app/logs
environment:
- NODE_ENV=production
- PORT=3000
- LOG_LEVEL=info
- MAX_FILE_SIZE=104857600
- RATE_LIMIT_MAX_REQUESTS=100
restart: unless-stopped
healthcheck:
test: ["CMD", "node", "-e", "require('http').get('http://localhost:3000/api/files', (res) => { process.exit(res.statusCode === 200 ? 0 : 1) }).on('error', () => process.exit(1))"]
interval: 30s
timeout: 10s
retries: 3
start_period: 40s
volumes:
stl_data:
stl_logs:

26
init-db.js Normal file
View File

@ -0,0 +1,26 @@
const STLDatabase = require('./database');
async function initializeDatabase() {
console.log('Initializing STL database...');
const db = new STLDatabase('./stl_storage.db', './uploads');
try {
await db.initialize();
console.log('✅ Database initialized successfully');
console.log('✅ Upload directory created');
console.log('✅ Database schema created');
await db.close();
console.log('Database setup complete!');
} catch (error) {
console.error('❌ Error initializing database:', error);
process.exit(1);
}
}
if (require.main === module) {
initializeDatabase();
}
module.exports = initializeDatabase;

2877
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

29
package.json Normal file
View File

@ -0,0 +1,29 @@
{
"name": "stl-storage-app",
"version": "1.0.0",
"description": "Web-based STL file storage and viewer",
"main": "database.js",
"scripts": {
"init-db": "node init-db.js",
"start": "node server.js",
"dev": "nodemon server.js"
},
"dependencies": {
"sqlite3": "^5.1.6",
"express": "^4.18.2",
"multer": "^1.4.5-lts.1",
"cors": "^2.8.5",
"uuid": "^9.0.1",
"helmet": "^7.1.0",
"express-rate-limit": "^7.1.5",
"express-validator": "^7.0.1",
"dotenv": "^16.3.1",
"winston": "^3.11.0"
},
"devDependencies": {
"nodemon": "^3.0.2"
},
"keywords": ["stl", "3d-printing", "file-storage", "sqlite"],
"author": "",
"license": "MIT"
}

689
public/index.html Normal file
View File

@ -0,0 +1,689 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STL Storage - 3D File Manager</title>
<script src="https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.min.js"></script>
<script src="js/three-setup.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f7;
color: #1d1d1f;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 40px;
}
h1 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 10px;
}
.upload-section {
background: white;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.upload-area {
border: 2px dashed #007aff;
border-radius: 8px;
padding: 40px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.upload-area:hover {
border-color: #0056cc;
background: #f0f8ff;
}
.upload-area.dragover {
border-color: #0056cc;
background: #f0f8ff;
}
.files-section {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.search-bar {
width: 100%;
padding: 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 16px;
margin-bottom: 20px;
}
.file-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.file-card {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 20px;
background: #fafafa;
}
.file-info {
margin-bottom: 10px;
}
.file-name {
font-weight: 600;
margin-bottom: 5px;
word-break: break-word;
}
.file-meta {
font-size: 0.875rem;
color: #6b7280;
}
.file-actions {
display: flex;
gap: 10px;
margin-top: 15px;
}
button {
background: #007aff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}
button:hover {
background: #0056cc;
}
.btn-danger {
background: #ff3b30;
}
.btn-danger:hover {
background: #d70015;
}
.loading {
text-align: center;
padding: 20px;
color: #6b7280;
}
.error {
background: #fee;
border: 1px solid #fcc;
color: #c00;
padding: 10px;
border-radius: 6px;
margin: 10px 0;
}
.success {
background: #efe;
border: 1px solid #cfc;
color: #060;
padding: 10px;
border-radius: 6px;
margin: 10px 0;
}
#fileInput {
display: none;
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
.modal-content {
position: relative;
background-color: white;
margin: 2% auto;
width: 90%;
height: 90%;
border-radius: 12px;
display: flex;
flex-direction: column;
}
.modal-header {
padding: 20px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-body {
flex: 1;
display: flex;
overflow: hidden;
}
.viewer-container {
flex: 1;
position: relative;
background: #f5f5f7;
}
.viewer-controls {
width: 250px;
padding: 20px;
background: #fafafa;
border-left: 1px solid #e5e7eb;
overflow-y: auto;
}
.control-group {
margin-bottom: 20px;
}
.control-group h4 {
margin-bottom: 10px;
font-size: 14px;
font-weight: 600;
color: #374151;
}
.control-item {
margin-bottom: 10px;
}
.control-item label {
display: block;
margin-bottom: 5px;
font-size: 12px;
color: #6b7280;
}
.control-item input,
.control-item select {
width: 100%;
padding: 6px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 12px;
}
.close {
color: #aaa;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #000;
}
.btn-view {
background: #10b981;
}
.btn-view:hover {
background: #059669;
}
.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(245, 245, 247, 0.8);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #6b7280;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>STL Storage</h1>
<p>Upload and manage your 3D printing files</p>
</header>
<div class="upload-section">
<div class="upload-area" onclick="document.getElementById('fileInput').click()">
<h3>Drop STL files here or click to upload</h3>
<p>Maximum file size: 100MB</p>
<input type="file" id="fileInput" accept=".stl" multiple>
</div>
<div id="uploadStatus"></div>
</div>
<div class="files-section">
<input type="text" class="search-bar" id="searchInput" placeholder="Search files...">
<div id="filesList">
<div class="loading">Loading files...</div>
</div>
</div>
</div>
<!-- 3D Viewer Modal -->
<div id="viewerModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 id="modalTitle">3D Viewer</h2>
<span class="close" onclick="closeViewer()">&times;</span>
</div>
<div class="modal-body">
<div class="viewer-container">
<div id="stlViewer"></div>
<div id="loadingOverlay" class="loading-overlay" style="display: none;">
Loading 3D model...
</div>
</div>
<div class="viewer-controls">
<div class="control-group">
<h4>View Controls</h4>
<div class="control-item">
<button onclick="resetView()" style="width: 100%;">Reset View</button>
</div>
<div class="control-item">
<button onclick="takeScreenshot()" style="width: 100%;">Screenshot</button>
</div>
</div>
<div class="control-group">
<h4>Display Options</h4>
<div class="control-item">
<label>
<input type="checkbox" id="wireframeToggle" onchange="toggleWireframe()">
Wireframe Mode
</label>
</div>
</div>
<div class="control-group">
<h4>Model Color</h4>
<div class="control-item">
<select id="colorSelect" onchange="changeColor()">
<option value="0x00aa88">Teal (Default)</option>
<option value="0xff6b6b">Red</option>
<option value="0x4ecdc4">Cyan</option>
<option value="0x45b7d1">Blue</option>
<option value="0xf9ca24">Yellow</option>
<option value="0x6c5ce7">Purple</option>
<option value="0xa0a0a0">Gray</option>
<option value="0xffffff">White</option>
</select>
</div>
<div class="control-item">
<label>Custom Color:</label>
<input type="color" id="customColor" onchange="changeCustomColor()" value="#00aa88">
</div>
</div>
<div class="control-group">
<h4>Model Info</h4>
<div id="modelInfo" style="font-size: 12px; color: #6b7280;">
No model loaded
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let files = [];
async function uploadFile(file) {
const formData = new FormData();
formData.append('stlFile', file);
try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.success) {
showMessage('File uploaded successfully!', 'success');
loadFiles();
} else {
showMessage(result.error || 'Upload failed', 'error');
}
} catch (error) {
showMessage('Upload failed: ' + error.message, 'error');
}
}
async function loadFiles(search = '') {
try {
const url = search ? `/api/files?search=${encodeURIComponent(search)}` : '/api/files';
const response = await fetch(url);
const result = await response.json();
if (result.success) {
files = result.files;
renderFiles();
} else {
showMessage('Failed to load files', 'error');
}
} catch (error) {
showMessage('Failed to load files: ' + error.message, 'error');
}
}
async function deleteFile(id) {
if (!confirm('Are you sure you want to delete this file?')) return;
try {
const response = await fetch(`/api/files/${id}`, {
method: 'DELETE'
});
const result = await response.json();
if (result.success) {
showMessage('File deleted successfully!', 'success');
loadFiles();
} else {
showMessage(result.error || 'Delete failed', 'error');
}
} catch (error) {
showMessage('Delete failed: ' + error.message, 'error');
}
}
function downloadFile(id, filename) {
window.open(`/api/files/${id}/download`, '_blank');
}
function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
function renderFiles() {
const filesList = document.getElementById('filesList');
if (files.length === 0) {
filesList.innerHTML = '<div class="loading">No files found</div>';
return;
}
const fileGrid = files.map(file => `
<div class="file-card">
<div class="file-info">
<div class="file-name">${file.original_name}</div>
<div class="file-meta">
Size: ${formatFileSize(file.file_size)}<br>
Uploaded: ${new Date(file.upload_date).toLocaleDateString()}
${file.description ? `<br>Description: ${file.description}` : ''}
${file.tags ? `<br>Tags: ${file.tags}` : ''}
</div>
</div>
<div class="file-actions">
<button class="btn-view" onclick="viewSTL(${file.id}, '${file.original_name}', '${file.filename}')">View 3D</button>
<button onclick="downloadFile(${file.id}, '${file.original_name}')">Download</button>
<button class="btn-danger" onclick="deleteFile(${file.id})">Delete</button>
</div>
</div>
`).join('');
filesList.innerHTML = `<div class="file-grid">${fileGrid}</div>`;
}
function showMessage(message, type) {
const status = document.getElementById('uploadStatus');
status.innerHTML = `<div class="${type}">${message}</div>`;
setTimeout(() => {
status.innerHTML = '';
}, 5000);
}
// Event listeners
document.getElementById('fileInput').addEventListener('change', (e) => {
Array.from(e.target.files).forEach(uploadFile);
});
document.getElementById('searchInput').addEventListener('input', (e) => {
const search = e.target.value.trim();
if (search.length >= 2 || search.length === 0) {
loadFiles(search);
}
});
// Drag and drop
const uploadArea = document.querySelector('.upload-area');
uploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
uploadArea.classList.add('dragover');
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.classList.remove('dragover');
});
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
uploadArea.classList.remove('dragover');
Array.from(e.dataTransfer.files).forEach(uploadFile);
});
// 3D Viewer functionality
let stlViewer = null;
let currentFile = null;
function viewSTL(fileId, originalName, filename) {
console.log('viewSTL called with:', { fileId, originalName, filename });
console.log('THREE available:', typeof THREE !== 'undefined');
console.log('THREE.STLLoader available:', typeof THREE.STLLoader !== 'undefined');
console.log('THREE.OrbitControls available:', typeof THREE.OrbitControls !== 'undefined');
currentFile = { id: fileId, originalName, filename };
const modal = document.getElementById('viewerModal');
const modalTitle = document.getElementById('modalTitle');
const loadingOverlay = document.getElementById('loadingOverlay');
modalTitle.textContent = `3D Viewer - ${originalName}`;
modal.style.display = 'block';
loadingOverlay.style.display = 'flex';
loadingOverlay.innerHTML = 'Initializing 3D viewer...';
// Check if Three.js is loaded
if (typeof THREE === 'undefined') {
loadingOverlay.innerHTML = 'Error: Three.js not loaded';
console.error('Three.js not loaded');
return;
}
if (typeof THREE.STLLoader === 'undefined') {
loadingOverlay.innerHTML = 'Error: STLLoader not available';
console.error('STLLoader not available');
return;
}
// Initialize viewer if not already done
try {
if (!stlViewer) {
console.log('Creating new STLViewer...');
stlViewer = new STLViewer('stlViewer');
console.log('STLViewer created successfully');
}
// Load the STL file
const stlUrl = `/uploads/stl/${filename}`;
console.log('Loading STL from URL:', stlUrl);
loadingOverlay.innerHTML = 'Loading 3D model...';
stlViewer.loadSTL(stlUrl)
.then(() => {
console.log('STL loaded successfully');
loadingOverlay.style.display = 'none';
updateModelInfo();
})
.catch((error) => {
console.error('Failed to load STL:', error);
loadingOverlay.innerHTML = `Error loading model: ${error.message}`;
});
} catch (error) {
console.error('Error initializing viewer:', error);
loadingOverlay.innerHTML = `Error initializing viewer: ${error.message}`;
}
}
function closeViewer() {
const modal = document.getElementById('viewerModal');
modal.style.display = 'none';
if (stlViewer) {
stlViewer.dispose();
stlViewer = null;
}
}
function resetView() {
if (stlViewer) {
stlViewer.resetView();
}
}
function toggleWireframe() {
const wireframeToggle = document.getElementById('wireframeToggle');
if (stlViewer) {
stlViewer.setWireframe(wireframeToggle.checked);
}
}
function changeColor() {
const colorSelect = document.getElementById('colorSelect');
const customColor = document.getElementById('customColor');
if (stlViewer) {
const colorValue = parseInt(colorSelect.value);
stlViewer.setColor(colorValue);
// Update custom color picker to match
const hexColor = '#' + colorValue.toString(16).padStart(6, '0');
customColor.value = hexColor;
}
}
function changeCustomColor() {
const customColor = document.getElementById('customColor');
const colorSelect = document.getElementById('colorSelect');
if (stlViewer) {
const hexColor = customColor.value.replace('#', '');
const colorValue = parseInt(hexColor, 16);
stlViewer.setColor(colorValue);
// Reset select to show it's using custom color
colorSelect.selectedIndex = -1;
}
}
function takeScreenshot() {
if (stlViewer && currentFile) {
const dataUrl = stlViewer.screenshot();
if (dataUrl) {
// Create download link
const link = document.createElement('a');
link.download = `${currentFile.originalName}_screenshot.png`;
link.href = dataUrl;
link.click();
}
}
}
function updateModelInfo() {
const modelInfo = document.getElementById('modelInfo');
if (stlViewer && stlViewer.mesh && currentFile) {
const geometry = stlViewer.mesh.geometry;
const box = new THREE.Box3().setFromObject(stlViewer.mesh);
const size = box.getSize(new THREE.Vector3());
const vertices = geometry.attributes.position.count;
const faces = vertices / 3;
modelInfo.innerHTML = `
<strong>Geometry:</strong><br>
Vertices: ${vertices.toLocaleString()}<br>
Faces: ${Math.floor(faces).toLocaleString()}<br>
<br>
<strong>Dimensions:</strong><br>
Width: ${size.x.toFixed(2)}<br>
Height: ${size.y.toFixed(2)}<br>
Depth: ${size.z.toFixed(2)}<br>
`;
}
}
// Close modal when clicking outside
window.onclick = function(event) {
const modal = document.getElementById('viewerModal');
if (event.target === modal) {
closeViewer();
}
}
// Handle escape key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
const modal = document.getElementById('viewerModal');
if (modal.style.display === 'block') {
closeViewer();
}
}
});
// Load files on page load
loadFiles();
</script>
<script src="js/stl-viewer.js"></script>
</body>
</html>

217
public/js/stl-viewer.js Normal file
View File

@ -0,0 +1,217 @@
class STLViewer {
constructor(containerId) {
console.log('STLViewer constructor called with containerId:', containerId);
this.container = document.getElementById(containerId);
console.log('Container element:', this.container);
if (!this.container) {
throw new Error(`Container element with id "${containerId}" not found`);
}
this.scene = null;
this.camera = null;
this.renderer = null;
this.controls = null;
this.mesh = null;
this.animationId = null;
console.log('Initializing STLViewer...');
this.init();
console.log('STLViewer initialization complete');
}
init() {
const width = this.container.clientWidth || 800;
const height = this.container.clientHeight || 600;
console.log('Container dimensions:', { width, height });
// Scene
console.log('Creating scene...');
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xf0f0f0);
// Camera
console.log('Creating camera...');
this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
this.camera.position.set(0, 0, 50);
// Renderer
console.log('Creating renderer...');
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(width, height);
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
console.log('Appending renderer to container...');
this.container.appendChild(this.renderer.domElement);
// Controls
console.log('Creating controls...');
if (typeof THREE.OrbitControls === 'undefined') {
throw new Error('OrbitControls not available');
}
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.enableDamping = true;
this.controls.dampingFactor = 0.05;
// Lighting
console.log('Setting up lighting...');
this.setupLighting();
// Handle window resize
window.addEventListener('resize', () => this.onWindowResize());
console.log('Starting animation loop...');
this.animate();
}
setupLighting() {
// Ambient light
const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
this.scene.add(ambientLight);
// Directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(50, 50, 50);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
this.scene.add(directionalLight);
// Point lights for better illumination
const pointLight1 = new THREE.PointLight(0xffffff, 0.4, 100);
pointLight1.position.set(-50, 25, 25);
this.scene.add(pointLight1);
const pointLight2 = new THREE.PointLight(0xffffff, 0.4, 100);
pointLight2.position.set(50, -25, -25);
this.scene.add(pointLight2);
}
async loadSTL(url) {
return new Promise((resolve, reject) => {
console.log('Loading STL from:', url);
const loader = new THREE.STLLoader();
loader.load(
url,
(geometry) => {
console.log('STL loaded successfully, vertices:', geometry.attributes.position.count);
this.displayGeometry(geometry);
resolve();
},
(progress) => {
console.log('Loading progress:', (progress.loaded / progress.total * 100) + '%');
},
(error) => {
console.error('Error loading STL:', error);
reject(error);
}
);
});
}
displayGeometry(geometry) {
// Remove existing mesh
if (this.mesh) {
this.scene.remove(this.mesh);
}
// Center geometry
geometry.center();
geometry.computeVertexNormals();
// Material
const material = new THREE.MeshPhongMaterial({
color: 0x00aa88,
shininess: 100,
side: THREE.DoubleSide
});
// Create mesh
this.mesh = new THREE.Mesh(geometry, material);
this.mesh.castShadow = true;
this.mesh.receiveShadow = true;
this.scene.add(this.mesh);
// Auto-fit camera to object
this.fitCameraToObject();
}
fitCameraToObject() {
if (!this.mesh) return;
const box = new THREE.Box3().setFromObject(this.mesh);
const center = box.getCenter(new THREE.Vector3());
const size = box.getSize(new THREE.Vector3());
const maxDim = Math.max(size.x, size.y, size.z);
const fov = this.camera.fov * (Math.PI / 180);
let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2));
cameraZ *= 1.5; // Add some padding
this.camera.position.set(center.x, center.y, center.z + cameraZ);
this.controls.target.copy(center);
this.controls.update();
}
setWireframe(enabled) {
if (this.mesh) {
this.mesh.material.wireframe = enabled;
}
}
setColor(color) {
if (this.mesh) {
this.mesh.material.color.setHex(color);
}
}
resetView() {
if (this.mesh) {
this.fitCameraToObject();
}
}
onWindowResize() {
const width = this.container.clientWidth;
const height = this.container.clientHeight;
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
}
animate() {
this.animationId = requestAnimationFrame(() => this.animate());
this.controls.update();
this.renderer.render(this.scene, this.camera);
}
dispose() {
if (this.animationId) {
cancelAnimationFrame(this.animationId);
}
if (this.mesh) {
this.scene.remove(this.mesh);
this.mesh.geometry.dispose();
this.mesh.material.dispose();
}
if (this.renderer) {
this.container.removeChild(this.renderer.domElement);
this.renderer.dispose();
}
this.controls?.dispose();
}
screenshot() {
if (this.renderer) {
return this.renderer.domElement.toDataURL('image/png');
}
return null;
}
}

638
public/js/three-setup.js Normal file
View File

@ -0,0 +1,638 @@
// Convert Three.js ES6 modules to work with global THREE object
// OrbitControls adapted for global THREE
class OrbitControls extends THREE.EventDispatcher {
constructor(object, domElement) {
super();
this.object = object;
this.domElement = domElement !== undefined ? domElement : document;
this.enabled = true;
this.target = new THREE.Vector3();
this.minDistance = 0;
this.maxDistance = Infinity;
this.minZoom = 0;
this.maxZoom = Infinity;
this.minPolarAngle = 0;
this.maxPolarAngle = Math.PI;
this.minAzimuthAngle = -Infinity;
this.maxAzimuthAngle = Infinity;
this.enableDamping = false;
this.dampingFactor = 0.05;
this.enableZoom = true;
this.zoomSpeed = 1.0;
this.enableRotate = true;
this.rotateSpeed = 1.0;
this.enablePan = true;
this.panSpeed = 1.0;
this.screenSpacePanning = true;
this.keyPanSpeed = 7.0;
this.autoRotate = false;
this.autoRotateSpeed = 2.0;
this.enableKeys = true;
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN };
this.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN };
this.target0 = this.target.clone();
this.position0 = this.object.position.clone();
this.zoom0 = this.object.zoom;
this.changeEvent = { type: 'change' };
this.startEvent = { type: 'start' };
this.endEvent = { type: 'end' };
this.state = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_PAN: 4, TOUCH_DOLLY_PAN: 5, TOUCH_DOLLY_ROTATE: 6 };
this.stateKey = this.state.NONE;
this.EPS = 0.000001;
this.spherical = new THREE.Spherical();
this.sphericalDelta = new THREE.Spherical();
this.scale = 1;
this.panOffset = new THREE.Vector3();
this.zoomChanged = false;
this.rotateStart = new THREE.Vector2();
this.rotateEnd = new THREE.Vector2();
this.rotateDelta = new THREE.Vector2();
this.panStart = new THREE.Vector2();
this.panEnd = new THREE.Vector2();
this.panDelta = new THREE.Vector2();
this.dollyStart = new THREE.Vector2();
this.dollyEnd = new THREE.Vector2();
this.dollyDelta = new THREE.Vector2();
this.init();
}
init() {
this.domElement.addEventListener('contextmenu', this.onContextMenu.bind(this), false);
this.domElement.addEventListener('mousedown', this.onMouseDown.bind(this), false);
this.domElement.addEventListener('wheel', this.onMouseWheel.bind(this), false);
this.domElement.addEventListener('touchstart', this.onTouchStart.bind(this), false);
this.domElement.addEventListener('touchend', this.onTouchEnd.bind(this), false);
this.domElement.addEventListener('touchmove', this.onTouchMove.bind(this), false);
this.domElement.addEventListener('keydown', this.onKeyDown.bind(this), false);
this.update();
}
update() {
const offset = new THREE.Vector3();
const quat = new THREE.Quaternion().setFromUnitVectors(this.object.up, new THREE.Vector3(0, 1, 0));
const quatInverse = quat.clone().invert();
const lastPosition = new THREE.Vector3();
const lastQuaternion = new THREE.Quaternion();
const position = this.object.position;
offset.copy(position).sub(this.target);
offset.applyQuaternion(quat);
this.spherical.setFromVector3(offset);
if (this.autoRotate && this.stateKey === this.state.NONE) {
this.rotateLeft(this.getAutoRotationAngle());
}
if (this.enableDamping) {
this.spherical.theta += this.sphericalDelta.theta * this.dampingFactor;
this.spherical.phi += this.sphericalDelta.phi * this.dampingFactor;
} else {
this.spherical.theta += this.sphericalDelta.theta;
this.spherical.phi += this.sphericalDelta.phi;
}
this.spherical.theta = Math.max(this.minAzimuthAngle, Math.min(this.maxAzimuthAngle, this.spherical.theta));
this.spherical.phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.spherical.phi));
this.spherical.makeSafe();
this.spherical.radius *= this.scale;
this.spherical.radius = Math.max(this.minDistance, Math.min(this.maxDistance, this.spherical.radius));
if (this.enableDamping === true) {
this.target.addScaledVector(this.panOffset, this.dampingFactor);
} else {
this.target.add(this.panOffset);
}
offset.setFromSpherical(this.spherical);
offset.applyQuaternion(quatInverse);
position.copy(this.target).add(offset);
this.object.lookAt(this.target);
if (this.enableDamping === true) {
this.sphericalDelta.theta *= (1 - this.dampingFactor);
this.sphericalDelta.phi *= (1 - this.dampingFactor);
this.panOffset.multiplyScalar(1 - this.dampingFactor);
} else {
this.sphericalDelta.set(0, 0, 0);
this.panOffset.set(0, 0, 0);
}
this.scale = 1;
if (this.zoomChanged ||
lastPosition.distanceToSquared(this.object.position) > this.EPS ||
8 * (1 - lastQuaternion.dot(this.object.quaternion)) > this.EPS) {
this.dispatchEvent(this.changeEvent);
lastPosition.copy(this.object.position);
lastQuaternion.copy(this.object.quaternion);
this.zoomChanged = false;
return true;
}
return false;
}
dispose() {
this.domElement.removeEventListener('contextmenu', this.onContextMenu.bind(this), false);
this.domElement.removeEventListener('mousedown', this.onMouseDown.bind(this), false);
this.domElement.removeEventListener('wheel', this.onMouseWheel.bind(this), false);
this.domElement.removeEventListener('touchstart', this.onTouchStart.bind(this), false);
this.domElement.removeEventListener('touchend', this.onTouchEnd.bind(this), false);
this.domElement.removeEventListener('touchmove', this.onTouchMove.bind(this), false);
this.domElement.removeEventListener('keydown', this.onKeyDown.bind(this), false);
}
getAutoRotationAngle() {
return 2 * Math.PI / 60 / 60 * this.autoRotateSpeed;
}
getZoomScale() {
return Math.pow(0.95, this.zoomSpeed);
}
rotateLeft(angle) {
this.sphericalDelta.theta -= angle;
}
rotateUp(angle) {
this.sphericalDelta.phi -= angle;
}
panLeft(distance, objectMatrix) {
const v = new THREE.Vector3();
v.setFromMatrixColumn(objectMatrix, 0);
v.multiplyScalar(-distance);
this.panOffset.add(v);
}
panUp(distance, objectMatrix) {
const v = new THREE.Vector3();
if (this.screenSpacePanning === true) {
v.setFromMatrixColumn(objectMatrix, 1);
} else {
v.setFromMatrixColumn(objectMatrix, 0);
v.crossVectors(this.object.up, v);
}
v.multiplyScalar(distance);
this.panOffset.add(v);
}
pan(deltaX, deltaY) {
const element = this.domElement;
if (this.object.isPerspectiveCamera) {
const position = this.object.position;
const offset = position.clone().sub(this.target);
let targetDistance = offset.length();
targetDistance *= Math.tan((this.object.fov / 2) * Math.PI / 180.0);
this.panLeft(2 * deltaX * targetDistance / element.clientHeight, this.object.matrix);
this.panUp(2 * deltaY * targetDistance / element.clientHeight, this.object.matrix);
} else if (this.object.isOrthographicCamera) {
this.panLeft(deltaX * (this.object.right - this.object.left) / this.object.zoom / element.clientWidth, this.object.matrix);
this.panUp(deltaY * (this.object.top - this.object.bottom) / this.object.zoom / element.clientHeight, this.object.matrix);
}
}
dollyOut(dollyScale) {
if (this.object.isPerspectiveCamera) {
this.scale /= dollyScale;
} else if (this.object.isOrthographicCamera) {
this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom * dollyScale));
this.object.updateProjectionMatrix();
this.zoomChanged = true;
}
}
dollyIn(dollyScale) {
if (this.object.isPerspectiveCamera) {
this.scale *= dollyScale;
} else if (this.object.isOrthographicCamera) {
this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / dollyScale));
this.object.updateProjectionMatrix();
this.zoomChanged = true;
}
}
onMouseDown(event) {
if (this.enabled === false) return;
event.preventDefault();
switch (event.button) {
case 0:
if (event.ctrlKey || event.metaKey || event.shiftKey) {
if (this.enablePan === false) return;
this.panStart.set(event.clientX, event.clientY);
this.stateKey = this.state.PAN;
} else {
if (this.enableRotate === false) return;
this.rotateStart.set(event.clientX, event.clientY);
this.stateKey = this.state.ROTATE;
}
break;
case 1:
if (this.enableZoom === false) return;
this.dollyStart.set(event.clientX, event.clientY);
this.stateKey = this.state.DOLLY;
break;
case 2:
if (this.enablePan === false) return;
this.panStart.set(event.clientX, event.clientY);
this.stateKey = this.state.PAN;
break;
}
if (this.stateKey !== this.state.NONE) {
document.addEventListener('mousemove', this.onMouseMove.bind(this), false);
document.addEventListener('mouseup', this.onMouseUp.bind(this), false);
this.dispatchEvent(this.startEvent);
}
}
onMouseMove(event) {
if (this.enabled === false) return;
event.preventDefault();
switch (this.stateKey) {
case this.state.ROTATE:
if (this.enableRotate === false) return;
this.rotateEnd.set(event.clientX, event.clientY);
this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart).multiplyScalar(this.rotateSpeed);
const element = this.domElement;
this.rotateLeft(2 * Math.PI * this.rotateDelta.x / element.clientHeight);
this.rotateUp(2 * Math.PI * this.rotateDelta.y / element.clientHeight);
this.rotateStart.copy(this.rotateEnd);
this.update();
break;
case this.state.DOLLY:
if (this.enableZoom === false) return;
this.dollyEnd.set(event.clientX, event.clientY);
this.dollyDelta.subVectors(this.dollyEnd, this.dollyStart);
if (this.dollyDelta.y > 0) {
this.dollyOut(this.getZoomScale());
} else if (this.dollyDelta.y < 0) {
this.dollyIn(this.getZoomScale());
}
this.dollyStart.copy(this.dollyEnd);
this.update();
break;
case this.state.PAN:
if (this.enablePan === false) return;
this.panEnd.set(event.clientX, event.clientY);
this.panDelta.subVectors(this.panEnd, this.panStart).multiplyScalar(this.panSpeed);
this.pan(this.panDelta.x, this.panDelta.y);
this.panStart.copy(this.panEnd);
this.update();
break;
}
}
onMouseUp(event) {
if (this.enabled === false) return;
document.removeEventListener('mousemove', this.onMouseMove.bind(this), false);
document.removeEventListener('mouseup', this.onMouseUp.bind(this), false);
this.dispatchEvent(this.endEvent);
this.stateKey = this.state.NONE;
}
onMouseWheel(event) {
if (this.enabled === false || this.enableZoom === false || (this.stateKey !== this.state.NONE && this.stateKey !== this.state.ROTATE)) return;
event.preventDefault();
this.dispatchEvent(this.startEvent);
if (event.deltaY < 0) {
this.dollyIn(this.getZoomScale());
} else if (event.deltaY > 0) {
this.dollyOut(this.getZoomScale());
}
this.update();
this.dispatchEvent(this.endEvent);
}
onTouchStart(event) {
if (this.enabled === false) return;
event.preventDefault();
switch (event.touches.length) {
case 1:
if (this.enableRotate === false) return;
this.rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);
this.stateKey = this.state.TOUCH_ROTATE;
break;
case 2:
if (this.enableZoom === false && this.enablePan === false) return;
const dx = event.touches[0].pageX - event.touches[1].pageX;
const dy = event.touches[0].pageY - event.touches[1].pageY;
const distance = Math.sqrt(dx * dx + dy * dy);
this.dollyStart.set(0, distance);
const x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);
const y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);
this.panStart.set(x, y);
this.stateKey = this.state.TOUCH_DOLLY_PAN;
break;
}
if (this.stateKey !== this.state.NONE) {
this.dispatchEvent(this.startEvent);
}
}
onTouchMove(event) {
if (this.enabled === false) return;
event.preventDefault();
switch (this.stateKey) {
case this.state.TOUCH_ROTATE:
if (this.enableRotate === false) return;
this.rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);
this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart).multiplyScalar(this.rotateSpeed);
const element = this.domElement;
this.rotateLeft(2 * Math.PI * this.rotateDelta.x / element.clientHeight);
this.rotateUp(2 * Math.PI * this.rotateDelta.y / element.clientHeight);
this.rotateStart.copy(this.rotateEnd);
break;
case this.state.TOUCH_DOLLY_PAN:
if (this.enableZoom === false && this.enablePan === false) return;
const dx = event.touches[0].pageX - event.touches[1].pageX;
const dy = event.touches[0].pageY - event.touches[1].pageY;
const distance = Math.sqrt(dx * dx + dy * dy);
this.dollyEnd.set(0, distance);
this.dollyDelta.set(0, Math.pow(this.dollyEnd.y / this.dollyStart.y, this.zoomSpeed));
this.dollyOut(this.dollyDelta.y);
this.dollyStart.copy(this.dollyEnd);
const x = 0.5 * (event.touches[0].pageX + event.touches[1].pageX);
const y = 0.5 * (event.touches[0].pageY + event.touches[1].pageY);
this.panEnd.set(x, y);
this.panDelta.subVectors(this.panEnd, this.panStart).multiplyScalar(this.panSpeed);
this.pan(this.panDelta.x, this.panDelta.y);
this.panStart.copy(this.panEnd);
break;
}
this.update();
}
onTouchEnd(event) {
if (this.enabled === false) return;
this.dispatchEvent(this.endEvent);
this.stateKey = this.state.NONE;
}
onKeyDown(event) {
if (this.enabled === false || this.enableKeys === false) return;
switch (event.keyCode) {
case this.keys.UP:
this.pan(0, this.keyPanSpeed);
this.update();
break;
case this.keys.BOTTOM:
this.pan(0, -this.keyPanSpeed);
this.update();
break;
case this.keys.LEFT:
this.pan(this.keyPanSpeed, 0);
this.update();
break;
case this.keys.RIGHT:
this.pan(-this.keyPanSpeed, 0);
this.update();
break;
}
}
onContextMenu(event) {
if (this.enabled === false) return;
event.preventDefault();
}
reset() {
this.target.copy(this.target0);
this.object.position.copy(this.position0);
this.object.zoom = this.zoom0;
this.object.updateProjectionMatrix();
this.dispatchEvent(this.changeEvent);
this.update();
this.stateKey = this.state.NONE;
}
}
// STLLoader adapted for global THREE
class STLLoader extends THREE.Loader {
constructor(manager) {
super(manager);
}
load(url, onLoad, onProgress, onError) {
const scope = this;
const loader = new THREE.FileLoader(this.manager);
loader.setPath(this.path);
loader.setResponseType('arraybuffer');
loader.setRequestHeader(this.requestHeader);
loader.setWithCredentials(this.withCredentials);
loader.load(url, function (text) {
try {
onLoad(scope.parse(text));
} catch (e) {
if (onError) {
onError(e);
} else {
console.error(e);
}
scope.manager.itemError(url);
}
}, onProgress, onError);
}
parse(data) {
const binData = this.ensureBinary(data);
return this.isBinary(binData) ? this.parseBinary(binData) : this.parseASCII(this.ensureString(data));
}
isBinary(data) {
const reader = new DataView(data);
const face_size = (32 / 8 * 3) + ((32 / 8 * 3) * 3) + (16 / 8);
const n_faces = reader.getUint32(80, true);
const expect = 80 + (32 / 8) + (n_faces * face_size);
if (expect === reader.byteLength) {
return true;
}
const fileLength = reader.byteLength;
if (80 + (32 / 8) + (n_faces * face_size) === fileLength) {
return true;
}
if (fileLength % 50 === 0) {
return false;
}
return true;
}
parseBinary(data) {
const reader = new DataView(data);
const faces = reader.getUint32(80, true);
let r, g, b, hasColors = false, colors;
let defaultR, defaultG, defaultB, alpha;
for (let index = 0; index < 80 - 10; index++) {
if ((reader.getUint32(index, false) == 0x434F4C4F /*COLO*/) &&
(reader.getUint8(index + 4) == 0x52 /*'R'*/) &&
(reader.getUint8(index + 5) == 0x3D /*'='*/)) {
hasColors = true;
colors = new Float32Array(faces * 3 * 3);
defaultR = reader.getUint8(index + 6) / 255;
defaultG = reader.getUint8(index + 7) / 255;
defaultB = reader.getUint8(index + 8) / 255;
alpha = reader.getUint8(index + 9) / 255;
}
}
const dataOffset = 84;
const faceLength = 12 * 4 + 2;
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array(faces * 3 * 3);
const normals = new Float32Array(faces * 3 * 3);
for (let face = 0; face < faces; face++) {
const start = dataOffset + face * faceLength;
const normalX = reader.getFloat32(start, true);
const normalY = reader.getFloat32(start + 4, true);
const normalZ = reader.getFloat32(start + 8, true);
if (hasColors) {
const packedColor = reader.getUint16(start + 48, true);
if ((packedColor & 0x8000) === 0) {
r = (packedColor & 0x1F) / 31;
g = ((packedColor >> 5) & 0x1F) / 31;
b = ((packedColor >> 10) & 0x1F) / 31;
} else {
r = defaultR;
g = defaultG;
b = defaultB;
}
}
for (let i = 1; i <= 3; i++) {
const vertexstart = start + i * 12;
const componentIdx = (face * 3 * 3) + ((i - 1) * 3);
vertices[componentIdx] = reader.getFloat32(vertexstart, true);
vertices[componentIdx + 1] = reader.getFloat32(vertexstart + 4, true);
vertices[componentIdx + 2] = reader.getFloat32(vertexstart + 8, true);
normals[componentIdx] = normalX;
normals[componentIdx + 1] = normalY;
normals[componentIdx + 2] = normalZ;
if (hasColors) {
colors[componentIdx] = r;
colors[componentIdx + 1] = g;
colors[componentIdx + 2] = b;
}
}
}
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3));
if (hasColors) {
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
geometry.hasColors = true;
geometry.alpha = alpha;
}
return geometry;
}
parseASCII(data) {
const geometry = new THREE.BufferGeometry();
const patternSolid = /solid([\s\S]*?)endsolid/g;
const patternFace = /facet([\s\S]*?)endfacet/g;
const patternFloat = /[\s]+([+-]?(?:\d*)(?:\.\d*)?(?:[eE][+-]?\d+)?)(?=[\s]+|$)/g;
const vertices = [];
const normals = [];
const normal = new THREE.Vector3();
let result;
let groupCount = 0;
let startVertex = 0;
let endVertex = 0;
while ((result = patternSolid.exec(data)) !== null) {
startVertex = endVertex;
const solid = result[0];
while ((result = patternFace.exec(solid)) !== null) {
let vertexCountPerFace = 0;
let normalCountPerFace = 0;
const text = result[0];
while ((result = patternFloat.exec(text)) !== null) {
if (normalCountPerFace < 3) {
normal.setComponent(normalCountPerFace, parseFloat(result[1]));
normalCountPerFace++;
} else {
vertices.push(parseFloat(result[1]));
if (vertexCountPerFace % 3 === 0) {
normals.push(normal.x, normal.y, normal.z);
}
vertexCountPerFace++;
}
}
}
endVertex = startVertex + (vertices.length - startVertex) / 3;
groupCount++;
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
return geometry;
}
ensureBinary(buf) {
if (typeof buf === 'string') {
const array_buffer = new Uint8Array(buf.length);
for (let i = 0; i < buf.length; i++) {
array_buffer[i] = buf.charCodeAt(i) & 0xff;
}
return array_buffer.buffer || array_buffer;
} else {
return buf;
}
}
ensureString(buf) {
if (typeof buf !== 'string') {
return new TextDecoder().decode(buf);
} else {
return buf;
}
}
}
// Attach to THREE global object
THREE.OrbitControls = OrbitControls;
THREE.STLLoader = STLLoader;

1
public/js/three.min.js vendored Normal file
View File

@ -0,0 +1 @@
// Three.js will be loaded from CDN in HTML

1262
public/js/three/OrbitControls.js Normal file
View File

File diff suppressed because it is too large Load Diff

398
public/js/three/STLLoader.js Normal file
View File

@ -0,0 +1,398 @@
import {
BufferAttribute,
BufferGeometry,
FileLoader,
Float32BufferAttribute,
Loader,
Vector3
} from 'three';
/**
* Description: A THREE loader for STL ASCII files, as created by Solidworks and other CAD programs.
*
* Supports both binary and ASCII encoded files, with automatic detection of type.
*
* The loader returns a non-indexed buffer geometry.
*
* Limitations:
* Binary decoding supports "Magics" color format (http://en.wikipedia.org/wiki/STL_(file_format)#Color_in_binary_STL).
* There is perhaps some question as to how valid it is to always assume little-endian-ness.
* ASCII decoding assumes file is UTF-8.
*
* Usage:
* const loader = new STLLoader();
* loader.load( './models/stl/slotted_disk.stl', function ( geometry ) {
* scene.add( new THREE.Mesh( geometry ) );
* });
*
* For binary STLs geometry might contain colors for vertices. To use it:
* // use the same code to load STL as above
* if (geometry.hasColors) {
* material = new THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: true });
* } else { .... }
* const mesh = new THREE.Mesh( geometry, material );
*
* For ASCII STLs containing multiple solids, each solid is assigned to a different group.
* Groups can be used to assign a different color by defining an array of materials with the same length of
* geometry.groups and passing it to the Mesh constructor:
*
* const mesh = new THREE.Mesh( geometry, material );
*
* For example:
*
* const materials = [];
* const nGeometryGroups = geometry.groups.length;
*
* const colorMap = ...; // Some logic to index colors.
*
* for (let i = 0; i < nGeometryGroups; i++) {
*
* const material = new THREE.MeshPhongMaterial({
* color: colorMap[i],
* wireframe: false
* });
*
* }
*
* materials.push(material);
* const mesh = new THREE.Mesh(geometry, materials);
*/
class STLLoader extends Loader {
constructor( manager ) {
super( manager );
}
load( url, onLoad, onProgress, onError ) {
const scope = this;
const loader = new FileLoader( this.manager );
loader.setPath( this.path );
loader.setResponseType( 'arraybuffer' );
loader.setRequestHeader( this.requestHeader );
loader.setWithCredentials( this.withCredentials );
loader.load( url, function ( text ) {
try {
onLoad( scope.parse( text ) );
} catch ( e ) {
if ( onError ) {
onError( e );
} else {
console.error( e );
}
scope.manager.itemError( url );
}
}, onProgress, onError );
}
parse( data ) {
function isBinary( data ) {
const reader = new DataView( data );
const face_size = ( 32 / 8 * 3 ) + ( ( 32 / 8 * 3 ) * 3 ) + ( 16 / 8 );
const n_faces = reader.getUint32( 80, true );
const expect = 80 + ( 32 / 8 ) + ( n_faces * face_size );
if ( expect === reader.byteLength ) {
return true;
}
// An ASCII STL data must begin with 'solid ' as the first six bytes.
// However, ASCII STLs lacking the SPACE after the 'd' are known to be
// plentiful. So, check the first 5 bytes for 'solid'.
// Several encodings, such as UTF-8, precede the text with up to 5 bytes:
// https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding
// Search for "solid" to start anywhere after those prefixes.
// US-ASCII ordinal values for 's', 'o', 'l', 'i', 'd'
const solid = [ 115, 111, 108, 105, 100 ];
for ( let off = 0; off < 5; off ++ ) {
// If "solid" text is matched to the current offset, declare it to be an ASCII STL.
if ( matchDataViewAt( solid, reader, off ) ) return false;
}
// Couldn't find "solid" text at the beginning; it is binary STL.
return true;
}
function matchDataViewAt( query, reader, offset ) {
// Check if each byte in query matches the corresponding byte from the current offset
for ( let i = 0, il = query.length; i < il; i ++ ) {
if ( query[ i ] !== reader.getUint8( offset + i ) ) return false;
}
return true;
}
function parseBinary( data ) {
const reader = new DataView( data );
const faces = reader.getUint32( 80, true );
let r, g, b, hasColors = false, colors;
let defaultR, defaultG, defaultB, alpha;
// process STL header
// check for default color in header ("COLOR=rgba" sequence).
for ( let index = 0; index < 80 - 10; index ++ ) {
if ( ( reader.getUint32( index, false ) == 0x434F4C4F /*COLO*/ ) &&
( reader.getUint8( index + 4 ) == 0x52 /*'R'*/ ) &&
( reader.getUint8( index + 5 ) == 0x3D /*'='*/ ) ) {
hasColors = true;
colors = new Float32Array( faces * 3 * 3 );
defaultR = reader.getUint8( index + 6 ) / 255;
defaultG = reader.getUint8( index + 7 ) / 255;
defaultB = reader.getUint8( index + 8 ) / 255;
alpha = reader.getUint8( index + 9 ) / 255;
}
}
const dataOffset = 84;
const faceLength = 12 * 4 + 2;
const geometry = new BufferGeometry();
const vertices = new Float32Array( faces * 3 * 3 );
const normals = new Float32Array( faces * 3 * 3 );
for ( let face = 0; face < faces; face ++ ) {
const start = dataOffset + face * faceLength;
const normalX = reader.getFloat32( start, true );
const normalY = reader.getFloat32( start + 4, true );
const normalZ = reader.getFloat32( start + 8, true );
if ( hasColors ) {
const packedColor = reader.getUint16( start + 48, true );
if ( ( packedColor & 0x8000 ) === 0 ) {
// facet has its own unique color
r = ( packedColor & 0x1F ) / 31;
g = ( ( packedColor >> 5 ) & 0x1F ) / 31;
b = ( ( packedColor >> 10 ) & 0x1F ) / 31;
} else {
r = defaultR;
g = defaultG;
b = defaultB;
}
}
for ( let i = 1; i <= 3; i ++ ) {
const vertexstart = start + i * 12;
const componentIdx = ( face * 3 * 3 ) + ( ( i - 1 ) * 3 );
vertices[ componentIdx ] = reader.getFloat32( vertexstart, true );
vertices[ componentIdx + 1 ] = reader.getFloat32( vertexstart + 4, true );
vertices[ componentIdx + 2 ] = reader.getFloat32( vertexstart + 8, true );
normals[ componentIdx ] = normalX;
normals[ componentIdx + 1 ] = normalY;
normals[ componentIdx + 2 ] = normalZ;
if ( hasColors ) {
colors[ componentIdx ] = r;
colors[ componentIdx + 1 ] = g;
colors[ componentIdx + 2 ] = b;
}
}
}
geometry.setAttribute( 'position', new BufferAttribute( vertices, 3 ) );
geometry.setAttribute( 'normal', new BufferAttribute( normals, 3 ) );
if ( hasColors ) {
geometry.setAttribute( 'color', new BufferAttribute( colors, 3 ) );
geometry.hasColors = true;
geometry.alpha = alpha;
}
return geometry;
}
function parseASCII( data ) {
const geometry = new BufferGeometry();
const patternSolid = /solid([\s\S]*?)endsolid/g;
const patternFace = /facet([\s\S]*?)endfacet/g;
let faceCounter = 0;
const patternFloat = /[\s]+([+-]?(?:\d*)(?:\.\d*)?(?:[eE][+-]?\d+)?)/.source;
const patternVertex = new RegExp( 'vertex' + patternFloat + patternFloat + patternFloat, 'g' );
const patternNormal = new RegExp( 'normal' + patternFloat + patternFloat + patternFloat, 'g' );
const vertices = [];
const normals = [];
const normal = new Vector3();
let result;
let groupCount = 0;
let startVertex = 0;
let endVertex = 0;
while ( ( result = patternSolid.exec( data ) ) !== null ) {
startVertex = endVertex;
const solid = result[ 0 ];
while ( ( result = patternFace.exec( solid ) ) !== null ) {
let vertexCountPerFace = 0;
let normalCountPerFace = 0;
const text = result[ 0 ];
while ( ( result = patternNormal.exec( text ) ) !== null ) {
normal.x = parseFloat( result[ 1 ] );
normal.y = parseFloat( result[ 2 ] );
normal.z = parseFloat( result[ 3 ] );
normalCountPerFace ++;
}
while ( ( result = patternVertex.exec( text ) ) !== null ) {
vertices.push( parseFloat( result[ 1 ] ), parseFloat( result[ 2 ] ), parseFloat( result[ 3 ] ) );
normals.push( normal.x, normal.y, normal.z );
vertexCountPerFace ++;
endVertex ++;
}
// every face have to own ONE valid normal
if ( normalCountPerFace !== 1 ) {
console.error( 'THREE.STLLoader: Something isn\'t right with the normal of face number ' + faceCounter );
}
// each face have to own THREE valid vertices
if ( vertexCountPerFace !== 3 ) {
console.error( 'THREE.STLLoader: Something isn\'t right with the vertices of face number ' + faceCounter );
}
faceCounter ++;
}
const start = startVertex;
const count = endVertex - startVertex;
geometry.addGroup( start, count, groupCount );
groupCount ++;
}
geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
geometry.setAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
return geometry;
}
function ensureString( buffer ) {
if ( typeof buffer !== 'string' ) {
return new TextDecoder().decode( buffer );
}
return buffer;
}
function ensureBinary( buffer ) {
if ( typeof buffer === 'string' ) {
const array_buffer = new Uint8Array( buffer.length );
for ( let i = 0; i < buffer.length; i ++ ) {
array_buffer[ i ] = buffer.charCodeAt( i ) & 0xff; // implicitly assumes little-endian
}
return array_buffer.buffer || array_buffer;
} else {
return buffer;
}
}
// start
const binData = ensureBinary( data );
return isBinary( binData ) ? parseBinary( binData ) : parseASCII( ensureString( data ) );
}
}
export { STLLoader };

7
public/js/three/three.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

73
public/test-three.html Normal file
View File

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<title>Three.js Test</title>
<style>
body { margin: 0; background: #000; }
#test { width: 100vw; height: 100vh; }
#debug { position: absolute; top: 10px; left: 10px; color: white; font-family: monospace; z-index: 100; }
</style>
</head>
<body>
<div id="debug">Loading...</div>
<div id="test"></div>
<script src="https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.min.js"></script>
<script src="js/three-setup.js"></script>
<script>
const debug = document.getElementById('debug');
function log(msg) {
debug.innerHTML += msg + '<br>';
console.log(msg);
}
log('Three.js loaded: ' + (typeof THREE !== 'undefined'));
log('STLLoader available: ' + (typeof THREE.STLLoader !== 'undefined'));
log('OrbitControls available: ' + (typeof THREE.OrbitControls !== 'undefined'));
if (typeof THREE !== 'undefined') {
try {
// Create a simple scene with a cube
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('test').appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
log('Three.js scene created successfully!');
// Test STL Loader
if (typeof THREE.STLLoader !== 'undefined') {
log('Testing STLLoader...');
const loader = new THREE.STLLoader();
log('STLLoader instance created successfully!');
} else {
log('ERROR: STLLoader not available');
}
} catch (error) {
log('ERROR: ' + error.message);
}
} else {
log('ERROR: Three.js not loaded');
}
</script>
</body>
</html>

86
sample-cube.stl Normal file
View File

@ -0,0 +1,86 @@
solid OpenSCAD_Model
facet normal -1 0 0
outer loop
vertex 0 0 0
vertex 0 10 10
vertex 0 10 0
endloop
endfacet
facet normal -1 -0 0
outer loop
vertex 0 0 0
vertex 0 0 10
vertex 0 10 10
endloop
endfacet
facet normal 0 0 1
outer loop
vertex 0 0 10
vertex 10 10 10
vertex 0 10 10
endloop
endfacet
facet normal 0 0 1
outer loop
vertex 0 0 10
vertex 10 0 10
vertex 10 10 10
endloop
endfacet
facet normal 1 -0 0
outer loop
vertex 10 0 0
vertex 10 10 0
vertex 10 10 10
endloop
endfacet
facet normal 1 0 0
outer loop
vertex 10 0 0
vertex 10 10 10
vertex 10 0 10
endloop
endfacet
facet normal 0 0 -1
outer loop
vertex 0 0 0
vertex 10 10 0
vertex 10 0 0
endloop
endfacet
facet normal 0 0 -1
outer loop
vertex 0 0 0
vertex 0 10 0
vertex 10 10 0
endloop
endfacet
facet normal 0 1 0
outer loop
vertex 0 10 0
vertex 0 10 10
vertex 10 10 10
endloop
endfacet
facet normal 0 1 0
outer loop
vertex 0 10 0
vertex 10 10 10
vertex 10 10 0
endloop
endfacet
facet normal 0 -1 0
outer loop
vertex 0 0 0
vertex 10 0 0
vertex 10 0 10
endloop
endfacet
facet normal 0 -1 0
outer loop
vertex 0 0 0
vertex 10 0 10
vertex 0 0 10
endloop
endfacet
endsolid OpenSCAD_Model

25
schema.sql Normal file
View File

@ -0,0 +1,25 @@
CREATE TABLE IF NOT EXISTS stl_files (
id INTEGER PRIMARY KEY AUTOINCREMENT,
filename VARCHAR(255) NOT NULL,
original_name VARCHAR(255) NOT NULL,
file_path VARCHAR(500) NOT NULL UNIQUE,
file_size INTEGER NOT NULL,
upload_date DATETIME DEFAULT CURRENT_TIMESTAMP,
last_modified DATETIME DEFAULT CURRENT_TIMESTAMP,
description TEXT,
tags VARCHAR(500),
print_settings JSON,
dimensions JSON,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
CREATE INDEX IF NOT EXISTS idx_filename ON stl_files(filename);
CREATE INDEX IF NOT EXISTS idx_upload_date ON stl_files(upload_date);
CREATE INDEX IF NOT EXISTS idx_tags ON stl_files(tags);
CREATE TRIGGER IF NOT EXISTS update_stl_files_timestamp
AFTER UPDATE ON stl_files
BEGIN
UPDATE stl_files SET updated_at = CURRENT_TIMESTAMP WHERE id = NEW.id;
END;

365
server.js Normal file
View File

@ -0,0 +1,365 @@
const express = require('express');
const multer = require('multer');
const cors = require('cors');
const path = require('path');
const fs = require('fs').promises;
const { v4: uuidv4 } = require('uuid');
const { validationResult } = require('express-validator');
// Import custom modules
const config = require('./config/config');
const logger = require('./config/logger');
const {
apiLimiter,
uploadLimiter,
securityHeaders,
fileValidation,
fileIdValidation,
searchValidation
} = require('./config/security');
const STLDatabase = require('./database');
const app = express();
// Security middleware
app.use(securityHeaders);
app.use(cors({
origin: config.nodeEnv === 'production' ? false : true,
credentials: true
}));
// Rate limiting
app.use('/api/', apiLimiter);
app.use('/api/upload', uploadLimiter);
// Body parsing
app.use(express.json({ limit: '10mb' }));
app.use(express.urlencoded({ extended: true, limit: '10mb' }));
// Static files
app.use(express.static('public'));
const db = new STLDatabase(config.database.path, config.database.uploadDir);
// Enhanced file validation
const validateSTLFile = async (buffer) => {
// Check if it's a valid STL file by looking for STL signatures
const text = buffer.toString('utf8', 0, 80);
const isBinarySTL = buffer.length > 80 && buffer.readUInt32LE(80) > 0;
const isAsciiSTL = text.toLowerCase().includes('solid');
return isBinarySTL || isAsciiSTL;
};
const storage = multer.diskStorage({
destination: async (req, file, cb) => {
const uploadPath = path.join(__dirname, config.upload.destination);
try {
await fs.access(uploadPath);
} catch {
await fs.mkdir(uploadPath, { recursive: true });
}
cb(null, uploadPath);
},
filename: (req, file, cb) => {
// Sanitize filename
const sanitizedName = file.originalname.replace(/[^a-zA-Z0-9.-]/g, '_');
const uniqueName = `${uuidv4()}-${sanitizedName}`;
cb(null, uniqueName);
}
});
const fileFilter = async (req, file, cb) => {
const fileExt = path.extname(file.originalname).toLowerCase();
if (!config.upload.allowedExtensions.includes(fileExt)) {
return cb(new Error('Only STL files are allowed'), false);
}
// Additional MIME type check
const allowedMimeTypes = ['application/octet-stream', 'application/sla', 'text/plain'];
if (file.mimetype && !allowedMimeTypes.includes(file.mimetype)) {
return cb(new Error('Invalid file type'), false);
}
cb(null, true);
};
const upload = multer({
storage: storage,
fileFilter: fileFilter,
limits: {
fileSize: config.upload.maxFileSize,
files: config.upload.maxFiles
}
});
// Validation helper
const handleValidationErrors = (req, res, next) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({
success: false,
error: 'Validation failed',
details: errors.array()
});
}
next();
};
app.post('/api/upload', fileValidation, handleValidationErrors, upload.single('stlFile'), async (req, res) => {
try {
if (!req.file) {
return res.status(400).json({
success: false,
error: 'No file uploaded'
});
}
// Additional file content validation
const fileBuffer = await fs.readFile(req.file.path);
if (!await validateSTLFile(fileBuffer)) {
await fs.unlink(req.file.path);
return res.status(400).json({
success: false,
error: 'Invalid STL file format'
});
}
const fileData = {
filename: req.file.filename,
originalName: req.file.originalname,
filePath: req.file.path,
fileSize: req.file.size,
description: req.body.description || null,
tags: req.body.tags || null,
printSettings: req.body.printSettings ? JSON.parse(req.body.printSettings) : null,
dimensions: req.body.dimensions ? JSON.parse(req.body.dimensions) : null
};
const fileId = await db.addSTLFile(fileData);
const savedFile = await db.getSTLFile(fileId);
logger.info('File uploaded successfully', {
fileId,
filename: req.file.originalname,
size: req.file.size,
ip: req.ip
});
res.json({
success: true,
message: 'File uploaded successfully',
file: savedFile
});
} catch (error) {
logger.error('Upload error', { error: error.message, stack: error.stack });
if (req.file) {
try {
await fs.unlink(req.file.path);
} catch (unlinkError) {
logger.error('Error cleaning up file', { error: unlinkError.message });
}
}
res.status(500).json({
success: false,
error: 'Upload failed',
message: config.nodeEnv === 'development' ? error.message : 'Internal server error'
});
}
});
app.get('/api/files', searchValidation, handleValidationErrors, async (req, res) => {
try {
const limit = Math.min(parseInt(req.query.limit) || 50, 100);
const offset = Math.max(parseInt(req.query.offset) || 0, 0);
const search = req.query.search;
let files;
if (search) {
files = await db.searchSTLFiles(search);
} else {
files = await db.getAllSTLFiles(limit, offset);
}
res.json({
success: true,
files: files,
pagination: {
limit: limit,
offset: offset,
hasMore: files.length === limit
}
});
} catch (error) {
logger.error('Get files error', { error: error.message, stack: error.stack });
res.status(500).json({
success: false,
error: 'Failed to retrieve files',
message: config.nodeEnv === 'development' ? error.message : 'Internal server error'
});
}
});
app.get('/api/files/:id', fileIdValidation, handleValidationErrors, async (req, res) => {
try {
const fileId = parseInt(req.params.id);
const file = await db.getSTLFile(fileId);
if (!file) {
return res.status(404).json({
success: false,
error: 'File not found'
});
}
res.json({
success: true,
file: file
});
} catch (error) {
logger.error('Get file error', { error: error.message, fileId: req.params.id });
res.status(500).json({
success: false,
error: 'Failed to retrieve file',
message: config.nodeEnv === 'development' ? error.message : 'Internal server error'
});
}
});
app.put('/api/files/:id', async (req, res) => {
try {
const fileId = parseInt(req.params.id);
const updates = {};
if (req.body.description !== undefined) updates.description = req.body.description;
if (req.body.tags !== undefined) updates.tags = req.body.tags;
if (req.body.printSettings !== undefined) updates.print_settings = req.body.printSettings;
if (req.body.dimensions !== undefined) updates.dimensions = req.body.dimensions;
const updated = await db.updateSTLFile(fileId, updates);
if (!updated) {
return res.status(404).json({ error: 'File not found' });
}
const updatedFile = await db.getSTLFile(fileId);
res.json({
success: true,
message: 'File updated successfully',
file: updatedFile
});
} catch (error) {
console.error('Update file error:', error);
res.status(500).json({
error: 'Failed to update file',
message: error.message
});
}
});
app.delete('/api/files/:id', async (req, res) => {
try {
const fileId = parseInt(req.params.id);
const deleted = await db.deleteSTLFile(fileId);
if (!deleted) {
return res.status(404).json({ error: 'File not found' });
}
res.json({
success: true,
message: 'File deleted successfully'
});
} catch (error) {
console.error('Delete file error:', error);
res.status(500).json({
error: 'Failed to delete file',
message: error.message
});
}
});
app.get('/api/files/:id/download', async (req, res) => {
try {
const fileId = parseInt(req.params.id);
const file = await db.getSTLFile(fileId);
if (!file) {
return res.status(404).json({ error: 'File not found' });
}
try {
await fs.access(file.file_path);
} catch {
return res.status(404).json({ error: 'Physical file not found' });
}
res.download(file.file_path, file.original_name);
} catch (error) {
console.error('Download error:', error);
res.status(500).json({
error: 'Failed to download file',
message: error.message
});
}
});
app.use('/uploads', express.static(path.join(__dirname, 'uploads'), {
setHeaders: (res, filePath) => {
if (path.extname(filePath).toLowerCase() === '.stl') {
res.setHeader('Content-Type', 'application/octet-stream');
res.setHeader('Access-Control-Allow-Origin', '*');
}
}
}));
app.use((error, req, res, next) => {
if (error instanceof multer.MulterError) {
if (error.code === 'LIMIT_FILE_SIZE') {
return res.status(400).json({ error: 'File too large (max 100MB)' });
}
}
console.error('Unhandled error:', error);
res.status(500).json({
error: 'Internal server error',
message: error.message
});
});
async function startServer() {
try {
await db.initialize();
logger.info('Database initialized successfully');
app.listen(config.port, config.host, () => {
logger.info('STL Storage server started', {
host: config.host,
port: config.port,
nodeEnv: config.nodeEnv
});
console.log(`🚀 STL Storage server running on ${config.host}:${config.port}`);
console.log(`📁 Upload endpoint: http://${config.host}:${config.port}/api/upload`);
console.log(`🔍 Browse files: http://${config.host}:${config.port}/api/files`);
});
} catch (error) {
logger.error('Failed to start server', { error: error.message, stack: error.stack });
console.error('❌ Failed to start server:', error);
process.exit(1);
}
}
process.on('SIGINT', async () => {
console.log('\n🛑 Shutting down server...');
await db.close();
process.exit(0);
});
if (require.main === module) {
startServer();
}
module.exports = app;

30
server.log Normal file
View File

@ -0,0 +1,30 @@
✅ Database initialized
🚀 STL Storage server running on 0.0.0.0:3000
📁 Upload endpoint: http://0.0.0.0:3000/api/upload
🔍 Browse files: http://0.0.0.0:3000/api/files
Unhandled error: Error: Only STL files are allowed
at fileFilter (/home/kris/testing/server.js:41:12)
at wrappedFileFilter (/home/kris/testing/node_modules/multer/index.js:44:7)
at Multipart.<anonymous> (/home/kris/testing/node_modules/multer/lib/make-middleware.js:109:7)
at Multipart.emit (node:events:518:28)
at HeaderParser.cb (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:358:14)
at HeaderParser.push (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:162:20)
at SBMH.ssCb [as _cb] (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:394:37)
at feed (/home/kris/testing/node_modules/streamsearch/lib/sbmh.js:248:10)
at SBMH.push (/home/kris/testing/node_modules/streamsearch/lib/sbmh.js:104:16)
at Multipart._write (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:567:19) {
storageErrors: []
}
Unhandled error: Error: Only STL files are allowed
at fileFilter (/home/kris/testing/server.js:41:12)
at wrappedFileFilter (/home/kris/testing/node_modules/multer/index.js:44:7)
at Multipart.<anonymous> (/home/kris/testing/node_modules/multer/lib/make-middleware.js:109:7)
at Multipart.emit (node:events:518:28)
at HeaderParser.cb (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:358:14)
at HeaderParser.push (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:162:20)
at SBMH.ssCb [as _cb] (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:394:37)
at feed (/home/kris/testing/node_modules/streamsearch/lib/sbmh.js:248:10)
at SBMH.push (/home/kris/testing/node_modules/streamsearch/lib/sbmh.js:104:16)
at Multipart._write (/home/kris/testing/node_modules/busboy/lib/types/multipart.js:567:19) {
storageErrors: []
}

21
start.sh Executable file
View File

@ -0,0 +1,21 @@
#!/bin/bash
# STL Storage Application Startup Script
set -e
echo "🚀 Starting STL Storage Application..."
# Initialize database if it doesn't exist
if [ ! -f "stl_storage.db" ]; then
echo "📦 Initializing database..."
node init-db.js
else
echo "✅ Database already exists"
fi
# Create uploads directory if it doesn't exist
mkdir -p uploads/stl uploads/thumbnails
# Start the application
echo "🌐 Starting web server..."
exec node server.js