### HTML (index.html)
3D Print Cost Calculator
### CSS (styles.css)
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #007bff;
}
label {
display: block;
margin-top: 10px;
}
input, select, button {
width: 100%;
padding: 10px;
margin-top: 5px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#progressContainer {
margin-top: 10px;
}
.hidden {
display: none;
}
#previewCanvas {
width: 100%;
height: 400px;
border: 1px solid #ccc;
border-radius: 5px;
}
### JavaScript (scripts.js)
document.getElementById('calculatorForm').addEventListener('submit', function(event) {
event.preventDefault();
const fileInput = document.getElementById('fileInput');
const materialSelect = document.getElementById('materialSelect');
const layerHeight = document.getElementById('layerHeight').value;
const infill = document.getElementById('infill').value;
if (fileInput.files.length === 0) {
alert('Please upload an STL file.');
return;
}
const file = fileInput.files[0];
const material = materialSelect.value;
const materialCosts = {
'PLA': 0.03,
'Nylon': 0.04,
'ABS': 0.05,
'PP': 0.06
};
const reader = new FileReader();
reader.onload = function(event) {
const contents = event.target.result;
// Here you would parse the STL file and calculate volume and weight.
// For the sake of this example, let's assume the volume is 100 cubic cm and the weight is 50 grams.
const volume = 100; // cubic cm
const weight = 50; // grams
const cost = weight * materialCosts[material];
// Estimated print time based on volume and some average print speed
const printSpeed = 50; // cubic cm per hour
const printTime = volume / printSpeed;
displayResults(volume, weight, printTime, cost);
display3DModel(contents);
};
reader.onprogress = function(event) {
if (event.lengthComputable) {
const percentLoaded = Math.round((event.loaded / event.total) * 100);
document.getElementById('fileProgress').value = percentLoaded;
document.getElementById('fileStatus').textContent = `${percentLoaded}% uploaded`;
}
};
reader.readAsText(file);
});
function displayResults(volume, weight, printTime, cost) {
document.getElementById('volume').textContent = `Volume: ${volume} cubic cm`;
document.getElementById('weight').textContent = `Weight: ${weight} grams`;
document.getElementById('time').textContent = `Estimated Print Time: ${printTime.toFixed(2)} hours`;
document.getElementById('cost').textContent = `Cost: $${cost.toFixed(2)}`;
document.getElementById('results').classList.remove('hidden');
}
function display3DModel(contents) {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('previewCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const loader = new THREE.STLLoader();
const geometry = loader.parse(contents);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
camera.position.z = 5;
const animate = function () {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
document.getElementById('preview').classList.remove('hidden');
}
3D Print Cost Calculator
Calculation Results
Volume: N/A
Weight: N/A
Estimated Print Time: N/A
Cost: N/A
Contact us to discuss further details and get a full quote.