3d Lab massafra

Servizio di Stampa 3D
Modellazione
Prototipazione Rapida

"La salvezza umana giace nelle mani di creativi insoddisfatti."
Antonello Giasi
Maker - Web Designer - 3D Modeler - CAD Designer
Convert Image to STL body { font-family: Arial, sans-serif; padding: 20px; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; } h1 { color: #333; } form { display: flex; flex-direction: column; align-items: center; } label { margin-bottom: 5px; } input[type="file"], input[type="number"], input[type="radio"], button { margin-bottom: 10px; } button { padding: 10px; background-color: #007BFF; color: #fff; border: none; cursor: pointer; } button:hover { background-color: #0056b3; } #progress { margin-top: 20px; display: none; /* nascosto inizialmente */ } #progressBar { width: 100%; } #preview { display: flex; justify-content: center; margin-top: 20px; } #preview img { max-width: 200px; margin: 0 10px; }

Convert 2D Images to 3D STL









Lighter Pixels Darker Pixels

Converting...
document.getElementById('imageForm').addEventListener('submit', async function (e) { e.preventDefault(); const depthMapInput = document.getElementById('depthMapInput'); const originalImageInput = document.getElementById('originalImageInput'); const widthInput = document.getElementById('widthInput'); const depthInput = document.getElementById('depthInput'); const mode = document.querySelector('input[name="mode"]:checked').value; const progressBar = document.getElementById('progressBar'); if (depthMapInput.files.length === 0 || originalImageInput.files.length === 0) { alert('Please upload both DepthMap and Original Image files.'); return; } const depthMapFile = depthMapInput.files[0]; const originalImageFile = originalImageInput.files[0]; const targetWidth = parseFloat(widthInput.value); const targetDepth = parseFloat(depthInput.value); const reader1 = new FileReader(); const reader2 = new FileReader(); reader1.onload = function (event1) { reader2.onload = function (event2) { const preview = document.getElementById('preview'); preview.innerHTML = ` DepthMap Preview Original Image Preview `; const depthMapImage = new Image(); const originalImage = new Image(); depthMapImage.onload = function () { originalImage.onload = function () { const canvas = document.createElement('canvas'); canvas.width = depthMapImage.width; canvas.height = depthMapImage.height; const ctx = canvas.getContext('2d'); // Process DepthMap Image ctx.drawImage(depthMapImage, 0, 0); const depthMapImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // Process Original Image and convert to grayscale ctx.drawImage(originalImage, 0, 0, depthMapImage.width, depthMapImage.height); const originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (let i = 0; i < originalImageData.data.length; i += 4) { const gray = 0.299 * originalImageData.data[i] + 0.587 * originalImageData.data[i + 1] + 0.114 * originalImageData.data[i + 2]; originalImageData.data[i] = gray; originalImageData.data[i + 1] = gray; originalImageData.data[i + 2] = gray; } ctx.putImageData(originalImageData, 0, 0); document.getElementById('grayscalePreview').src = canvas.toDataURL(); document.getElementById('progress').style.display = 'block'; const stlData = createSTL(depthMapImageData.data, originalImageData.data, canvas.width, canvas.height, targetWidth, targetDepth, progressBar); downloadSTL(stlData, 'output.stl'); document.getElementById('progress').style.display = 'none'; }; originalImage.src = event2.target.result; }; depthMapImage.src = event1.target.result; }; reader2.readAsDataURL(originalImageFile); }; reader1.readAsDataURL(depthMapFile); }); function createSTL(depthData, originalData, width, height, targetWidth, targetDepth, progressBar) { const scaleX = targetWidth / width; const scaleY = targetDepth / 255; const detailMaxHeight = 0.01; const geometry = new THREE.Geometry(); for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const depthBrightness = (depthData[(y * width + x) * 4] + depthData[(y * width + x) * 4 + 1] + depthData[(y * width + x) * 4 + 2]) / 3; const originalBrightness = (originalData[(y * width + x) * 4] + originalData[(y * width + x) * 4 + 1] + originalData[(y * width + x) * 4 + 2]) / 3; const heightFromDepthMap = depthBrightness * scaleY; let heightFromOriginal = originalBrightness * scaleY; heightFromOriginal = Math.min(heightFromOriginal, detailMaxHeight); const finalHeight = heightFromDepthMap + heightFromOriginal; geometry.vertices.push(new THREE.Vector3(x * scaleX, y * scaleX, finalHeight)); } if (progressBar) { progressBar.value = ((y + 1) / height) * 100; } } for (let y = 0; y < height - 1; y++) { for (let x = 0; x < width - 1; x++) { const v1 = y * width + x; const v2 = v1 + 1; const v3 = v1 + width; const v4 = v3 + 1; geometry.faces.push(new THREE.Face3(v1, v2, v3)); geometry.faces.push(new THREE.Face3(v2, v4, v3)); } } const exporter = new THREE.STLExporter(); const stlData = exporter.parse(geometry); return stlData; } function downloadSTL(stlData, filename) { const blob = new Blob([stlData], { type: 'application/sla' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = filename; document.body.appendChild(link); link.click(); document.body.removeChild(link); }