Initial commit: STL Storage Application
- 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:
Claude
@@ -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()">×</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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
// Three.js will be loaded from CDN in HTML
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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 };
|
||||
Vendored
+7
File diff suppressed because one or more lines are too long
@@ -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>
|
||||
Reference in New Issue
Block a user