Embed

<div id="calcApp" style="max-width:1200px;margin:30px auto;font-family:sans-serif;color:#222;">
  <h2>3D‑Druck Kostenrechner (für einfache Bauteile)</h2>

  <div style="display:flex;gap:20px;flex-wrap:wrap;">

    
    <div style="flex:1;min-width:300px;padding:20px;border:1px solid #ddd;border-radius:10px;background:#fafafa;">

      <label>STL-Datei</label>
      <input id="stlFile" type="file" accept=".stl" style="width:100%;margin-bottom:12px;">

      <label>Material</label>
      <select id="material" style="width:100%;margin-bottom:12px;">
        <option value="PLA">PLA</option>
        <option value="PETG">PETG</option>
        <option value="ABS">ABS</option>
        <option value="TPU">TPU</option>
        <option value="GF">GF/KF-Verbund</option>
      </select>

      <label>Infill / Beanspruchung</label>
      <select id="infill" style="width:100%;margin-bottom:12px;">
        <option value="1.0">gering</option>
        <option value="1.25">mittel</option>
        <option value="1.5">hoch</option>
      </select>

      <label>Stückzahl</label>
      <input id="quantity" type="number" value="1" min="1" style="width:100%;margin-bottom:12px;">

      <div id="volumeDisplay" style="margin:10px 0;color:#555;">Noch kein Modell geladen</div>

      <div style="display:flex;gap:10px;margin:15px 0;">
        <button id="calcButton" style="flex:1;padding:10px;border-radius:20px;border:1px solid #222;background:#fff;">
          Preis berechnen
        </button>

        <button id="mailtoButton" style="flex:1;padding:10px;border-radius:20px;border:none;
          background:linear-gradient(135deg,#4a90e2,#357ab8);color:#fff;">
          Nun kostenfrei anfragen
        </button>
      </div>

      <div id="attachHint" style="display:none;padding:10px;border-radius:8px;background:#fff7e6;
        border:1px solid #f0c36d;color:#8a6d1d;font-size:13px;">
        Bitte STL im E‑Mail‑Fenster anhängen.
      </div>

      <div id="resultBox" style="display:none;margin-top:15px;">
        <div style="font-size:14px;color:#555;">Preisbereich:</div>
        <div id="priceDisplay" style="font-size:20px;font-weight:700;"></div>
      </div>

      <div id="timeBox" style="display:none;margin-top:10px;">
        <div style="font-size:14px;color:#555;">Druckzeit:</div>
        <div id="timeDisplay" style="font-size:18px;font-weight:700;"></div>
      </div>

    </div>

    
    <div style="flex:1;min-width:300px;padding:10px;border:1px solid #ddd;border-radius:10px;background:#fff;">
      <h3>3D‑Vorschau</h3>
      <div id="viewer" style="width:100%;height:420px;border:1px solid #eee;background:#f5f5f5;border-radius:10px;"></div>
    </div>

  </div>
</div>

<script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://unpkg.com/three@0.128.0/examples/js/loaders/STLLoader.js"></script>

<script>
let scene=new THREE.Scene(),renderer,camera,controls,modelMesh=null,currentVolume=null,box=null;

const viewer=document.getElementById("viewer");
renderer=new THREE.WebGLRenderer({antialias:true});
renderer.setSize(viewer.clientWidth,viewer.clientHeight);
viewer.appendChild(renderer.domElement);

camera=new THREE.PerspectiveCamera(45,viewer.clientWidth/viewer.clientHeight,0.1,2000);
camera.position.set(120,120,120);

controls=new THREE.OrbitControls(camera,renderer.domElement);
scene.add(new THREE.AmbientLight(0xffffff,0.7));
let dl=new THREE.DirectionalLight(0xffffff,0.7);dl.position.set(100,200,100);scene.add(dl);

function computeVolume(g){
  let p=g.attributes.position,v=0,A=new THREE.Vector3(),B=new THREE.Vector3(),C=new THREE.Vector3();
  for(let i=0;i<p.count;i+=3){
    A.set(p.getX(i),p.getY(i),p.getZ(i));
    B.set(p.getX(i+1),p.getY(i+1),p.getZ(i+1));
    C.set(p.getX(i+2),p.getY(i+2),p.getZ(i+2));
    v+=A.dot(B.cross(C));
  }
  return Math.abs(v)/6/1000;
}

const loader=new THREE.STLLoader();
document.getElementById("stlFile").addEventListener("change",e=>{
  let f=e.target.files[0];if(!f)return;
  loader.load(URL.createObjectURL(f),geo=>{
    geo.computeVertexNormals();geo.computeBoundingBox();
    if(modelMesh){scene.remove(modelMesh);modelMesh.geometry.dispose();}
    modelMesh=new THREE.Mesh(geo,new THREE.MeshPhongMaterial({color:0x999999}));
    scene.add(modelMesh);

    currentVolume=computeVolume(geo);
    document.getElementById("volumeDisplay").textContent=currentVolume.toFixed(2)+" cm³";

    box=geo.boundingBox.clone();
    let s=new THREE.Vector3();box.getSize(s);
    let c=new THREE.Vector3();box.getCenter(c);
    modelMesh.position.sub(c);

    let d=Math.max(s.x,s.y,s.z)*2.5;
    camera.position.set(d,d,d);
    controls.update();
  });
});
</script>