pinjie.html
拼接后还需要偏移量，不然3d打印Bambu Studio拆分成零件还是独立物体。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>GLB 模型拼接 - Three.js 0.162.0 增强版</title> <style> body { margin: 0; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } canvas { display: block; } #info { position: absolute; top: 20px; left: 20px; background: rgba(0,0,0,0.75); color: white; padding: 12px 20px; border-radius: 8px; backdrop-filter: blur(8px); pointer-events: none; z-index: 10; font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); border-left: 4px solid #4caf50; font-family: monospace; } #controls-panel { position: absolute; bottom: 20px; left: 20px; right: 20px; background: rgba(30,30,40,0.95); backdrop-filter: blur(8px); border-radius: 12px; padding: 15px 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; z-index: 20; pointer-events: auto; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 4px 15px rgba(0,0,0,0.3); color: #eee; } .btn-group { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } button { background: #3a6ea5; border: none; color: white; padding: 8px 18px; border-radius: 40px; cursor: pointer; font-weight: bold; font-size: 14px; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.3); letter-spacing: 1px; } button:hover { background: #2c4e7a; transform: scale(1.02); } button.active { background: #ff9800; color: #1e1e2a; box-shadow: 0 0 8px rgba(255,152,0,0.5); } button.primary { background: #4caf50; color: white; } button.primary:hover { background: #3e8e41; } button.warning { background: #ff9800; color: #1e1e2a; } button.danger { background: #f44336; } button.danger:hover { background: #d32f2f; } button.merge-btn { background: #9c27b0; font-size: 16px; padding: 10px 24px; } button.merge-btn:hover { background: #7b1fa2; } .file-label { background: #9c27b0; padding: 8px 18px; border-radius: 40px; cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s; display: inline-block; } .file-label:hover { background: #7b1fa2; } .file-label.upper { background: #e91e63; } .file-label.upper:hover { background: #c2185b; } .file-label.lower { background: #2196f3; } .file-label.lower:hover { background: #1976d2; } input[type="file"] { display: none; } .status { background: #000000aa; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-family: monospace; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .model-indicator { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-family: monospace; font-weight: bold; } .model-indicator.upper-loaded { background: #e91e63; color: white; } .model-indicator.lower-loaded { background: #2196f3; color: white; } .model-indicator.not-loaded { background: #555; color: #999; } .model-indicator.selected { box-shadow: 0 0 8px rgba(255,255,255,0.6); } @media (max-width: 700px) { .btn-group { gap: 6px; } button, .file-label { padding: 5px 12px; font-size: 12px; } #controls-panel { flex-direction: column; align-items: stretch; bottom: 10px; left: 10px; right: 10px; } .status { white-space: normal; max-width: none; text-align: center; } } .loading-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.9); color: white; padding: 20px 40px; border-radius: 12px; z-index: 100; display: none; font-size: 16px; pointer-events: none; font-family: monospace; text-align: center; } .gap-slider { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.3); padding: 4px 12px; border-radius: 20px; } .gap-slider label { font-size: 12px; color: #aaa; } .gap-slider input { width: 100px; } .gap-value { font-size: 12px; color: #4caf50; font-weight: bold; min-width: 50px; } </style> </head> <body> <div id="info"> 🔗 双模型拼接 | 移动/旋转/缩放 | 合并导出 </div> <div id="controls-panel"> <div class="btn-group"> <span class="model-indicator not-loaded" id="upperIndicator">⬆ 上半部: 未加载</span> <label class="file-label upper" for="upperFile">🔴 加载上半部</label> <input type="file" id="upperFile" accept=".glb,.gltf,.GLB,.GLTF"> <span class="model-indicator not-loaded" id="lowerIndicator">⬇ 下半部: 未加载</span> <label class="file-label lower" for="lowerFile">🔵 加载下半部</label> <input type="file" id="lowerFile" accept=".glb,.gltf,.GLB,.GLTF"> </div> <div class="btn-group"> <button id="selectUpperBtn">⬆ 选上半部</button> <button id="selectLowerBtn">⬇ 选下半部</button> <button id="selectBothBtn">🔗 选整体</button> </div> <div class="btn-group"> <button id="modeTranslate" class="active">↔ 移动</button> <button id="modeRotate">🔄 旋转</button> <button id="modeScale">📐 缩放</button> </div> <div class="btn-group"> <div class="gap-slider"> <label>📏 间隙</label> <input type="range" id="gapSlider" min="0" max="2" step="0.01" value="0.05"> <span class="gap-value" id="gapValue">0.05</span> </div> <button id="alignBtn" class="primary">🔗 自动拼接</button> <button id="mergeBtn" class="merge-btn">🧩 合并成一个</button> <button id="exportBtn" class="warning">📦 导出GLB</button> <button id="resetViewBtn">🎥 重置</button> </div> <div class="status" id="loadStatus"> ⚡ 就绪 | 加载模型 → 调整 → 合并导出 </div> </div> <div class="loading-overlay" id="loadingOverlay"> <div>⏳ 正在处理...</div> </div> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.162.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.162.0/examples/jsm/" } } </script> <script type="module"> import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; import { TransformControls } from "three/addons/controls/TransformControls.js"; import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; import { GLTFExporter } from "three/addons/exporters/GLTFExporter.js"; // --- 场景 --- const scene = new THREE.Scene(); scene.background = new THREE.Color(0x1a1a2e); scene.fog = new THREE.FogExp2(0x1a1a2e, 0.006); const camera = new THREE.PerspectiveCamera(50, innerWidth/innerHeight, 0.1, 1000); camera.position.set(5, 3, 6); const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true }); renderer.setSize(innerWidth, innerHeight); renderer.setPixelRatio(devicePixelRatio); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); // OrbitControls const orbitControls = new OrbitControls(camera, renderer.domElement); orbitControls.enableDamping = true; orbitControls.dampingFactor = 0.05; orbitControls.target.set(0, 0.5, 0); orbitControls.update(); // TransformControls const transformControls = new TransformControls(camera, renderer.domElement); transformControls.addEventListener('dragging-changed', (event) => { orbitControls.enabled = !event.value; }); scene.add(transformControls); // 光照 scene.add(new THREE.AmbientLight(0x404060, 0.8)); const mainLight = new THREE.DirectionalLight(0xffffff, 1.5); mainLight.position.set(3, 6, 4); mainLight.castShadow = true; mainLight.shadow.mapSize.set(2048, 2048); mainLight.shadow.camera.near = 0.1; mainLight.shadow.camera.far = 50; mainLight.shadow.bias = -0.0001; scene.add(mainLight); scene.add(new THREE.PointLight(0x6688cc, 0.6, 20, 2)); scene.add(new THREE.PointLight(0xff9966, 0.4, 20, 2)); scene.add(new THREE.PointLight(0x8866ff, 0.5, 20, 2)); // 辅助 const grid = new THREE.GridHelper(8, 20, 0x88aaff, 0x335588); grid.position.y = -1; scene.add(grid); const jointPlaneGeo = new THREE.PlaneGeometry(4, 4); const jointPlaneMat = new THREE.MeshPhongMaterial({ color: 0x4caf50, side: THREE.DoubleSide, transparent: true, opacity: 0.3, emissive: 0x1a3a1a }); const jointPlane = new THREE.Mesh(jointPlaneGeo, jointPlaneMat); jointPlane.rotation.x = -Math.PI / 2; scene.add(jointPlane); // --- 状态 --- let upperModel = null; let lowerModel = null; let upperBounds = null; let lowerBounds = null; let currentGap = 0.05; let selectedTarget = 'both'; // 'upper' | 'lower' | 'both' let mergedGroup = null; // --- 工具 --- function disposeModel(model) { if (!model) return; model.traverse(c => { if (c.isMesh) { c.geometry?.dispose(); if (Array.isArray(c.material)) c.material.forEach(m => m.dispose()); else c.material?.dispose(); } }); model.parent?.remove(model); } function getBounds(model) { const box = new THREE.Box3().setFromObject(model); return { box, min: box.min.clone(), max: box.max.clone(), center: box.getCenter(new THREE.Vector3()), size: box.getSize(new THREE.Vector3()) }; } function setTransformTarget(target) { selectedTarget = target; // 更新按钮状态 document.getElementById('selectUpperBtn').classList.toggle('active', target === 'upper'); document.getElementById('selectLowerBtn').classList.toggle('active', target === 'lower'); document.getElementById('selectBothBtn').classList.toggle('active', target === 'both'); // 更新指示器 document.getElementById('upperIndicator').classList.toggle('selected', target === 'upper'); document.getElementById('lowerIndicator').classList.toggle('selected', target === 'lower'); // 附加 TransformControls if (target === 'upper' && upperModel) { transformControls.attach(upperModel); } else if (target === 'lower' && lowerModel) { transformControls.attach(lowerModel); } else if (target === 'both') { // 如果有合并的组，附加到组；否则分离 if (mergedGroup) { transformControls.attach(mergedGroup); } else { transformControls.detach(); // 两个都选时，分别操作 if (upperModel && lowerModel) { // 创建一个临时父节点 const tempParent = new THREE.Group(); const upperWorldPos = upperModel.position.clone(); const lowerWorldPos = lowerModel.position.clone(); scene.remove(upperModel); scene.remove(lowerModel); tempParent.add(upperModel); tempParent.add(lowerModel); upperModel.position.copy(upperWorldPos); lowerModel.position.copy(lowerWorldPos); scene.add(tempParent); mergedGroup = tempParent; transformControls.attach(mergedGroup); } } } } function updateIndicators() { const upEl = document.getElementById('upperIndicator'); const lowEl = document.getElementById('lowerIndicator'); if (upperModel) { upEl.textContent = '⬆ 上半部: 已加载'; upEl.className = 'model-indicator upper-loaded'; } if (lowerModel) { lowEl.textContent = '⬇ 下半部: 已加载'; lowEl.className = 'model-indicator lower-loaded'; } if (selectedTarget === 'upper') upEl.classList.add('selected'); if (selectedTarget === 'lower') lowEl.classList.add('selected'); } // --- 自动拼接 --- function autoAlign() { if (!upperModel || !lowerModel) { alert("请先加载上下两个模型"); return; } // 如果有合并组，先解散 if (mergedGroup) { while (mergedGroup.children.length) { scene.add(mergedGroup.children[0]); } scene.remove(mergedGroup); mergedGroup = null; } upperBounds = getBounds(upperModel); lowerBounds = getBounds(lowerModel); // 居中对齐 X/Z const cx = (upperBounds.center.x + lowerBounds.center.x) / 2; const cz = (upperBounds.center.z + lowerBounds.center.z) / 2; // 上半部底面在 y=0 upperModel.position.set( upperModel.position.x - upperBounds.center.x, -upperBounds.min.y, upperModel.position.z - upperBounds.center.z ); // 下半部顶面在 y=-gap lowerModel.position.set( lowerModel.position.x - lowerBounds.center.x, -lowerBounds.max.y - currentGap, lowerModel.position.z - lowerBounds.center.z ); upperBounds = getBounds(upperModel); lowerBounds = getBounds(lowerModel); // 更新平面 jointPlane.position.y = -currentGap / 2; const allBounds = new THREE.Box3(); allBounds.expandByObject(upperModel); allBounds.expandByObject(lowerModel); const size = allBounds.getSize(new THREE.Vector3()); jointPlane.scale.set(Math.max(size.x, size.z) * 1.5 / 4, Math.max(size.x, size.z) * 1.5 / 4, 1); // 相机 const center = allBounds.getCenter(new THREE.Vector3()); const maxDim = Math.max(size.x, size.y, size.z); orbitControls.target.copy(center); camera.position.set(center.x + maxDim * 1.2, center.y + maxDim * 0.8, center.z + maxDim * 1.5); orbitControls.update(); document.getElementById('loadStatus').innerHTML = `✅ 拼接完成 | 上:${upperBounds.size.x.toFixed(1)}x${upperBounds.size.y.toFixed(1)} | 下:${lowerBounds.size.x.toFixed(1)}x${lowerBounds.size.y.toFixed(1)} | 间隙:${currentGap.toFixed(2)}`; } // --- 合并成一个 --- function mergeIntoOne() { if (!upperModel || !lowerModel) { alert("请先加载两个模型"); return; } // 解散合并组 if (mergedGroup) { while (mergedGroup.children.length) { scene.add(mergedGroup.children[0]); } scene.remove(mergedGroup); mergedGroup = null; } // 创建新合并组 const combinedGroup = new THREE.Group(); combinedGroup.name = "CombinedModel"; // 克隆上半部 const upperClone = upperModel.clone(true); upperClone.position.copy(upperModel.position); upperClone.quaternion.copy(upperModel.quaternion); upperClone.scale.copy(upperModel.scale); upperClone.traverse(c => { if (c.isMesh) { c.castShadow = true; c.receiveShadow = true; } }); // 克隆下半部 const lowerClone = lowerModel.clone(true); lowerClone.position.copy(lowerModel.position); lowerClone.quaternion.copy(lowerModel.quaternion); lowerClone.scale.copy(lowerModel.scale); lowerClone.traverse(c => { if (c.isMesh) { c.castShadow = true; c.receiveShadow = true; } }); combinedGroup.add(upperClone); combinedGroup.add(lowerClone); // 隐藏原始模型 upperModel.visible = false; lowerModel.visible = false; // 添加到场景 scene.add(combinedGroup); mergedGroup = combinedGroup; // 附加TransformControls transformControls.attach(mergedGroup); selectedTarget = 'both'; setTransformTarget('both'); document.getElementById('loadStatus').innerHTML = "🧩 已合并为一个物体！可用移动/旋转/缩放整体调整，点击导出GLB保存"; } // --- 导出 --- function exportGLB() { const target = mergedGroup || (upperModel && lowerModel ? (() => { // 临时合并导出 const temp = new THREE.Group(); temp.add(upperModel.clone(true)); temp.add(lowerModel.clone(true)); return temp; })() : null); if (!target && upperModel) { // 只有一个模型 exportSingle(upperModel); return; } if (!target && lowerModel) { exportSingle(lowerModel); return; } if (!target) { alert("没有模型可导出"); return; } document.getElementById('loadingOverlay').style.display = 'flex'; const exporter = new GLTFExporter(); exporter.parse(target, (result) => { const blob = result instanceof ArrayBuffer ? new Blob([result], {type: 'application/octet-stream'}) : new Blob([JSON.stringify(result)], {type: 'application/json'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `combined_model_${Date.now()}.glb`; a.click(); document.getElementById('loadingOverlay').style.display = 'none'; document.getElementById('loadStatus').innerHTML = "📦 导出成功！"; }, (err) => { alert("导出失败: " + err); document.getElementById('loadingOverlay').style.display = 'none'; }, { binary: true, onlyVisible: false, trs: true }); } function exportSingle(model) { document.getElementById('loadingOverlay').style.display = 'flex'; const exporter = new GLTFExporter(); exporter.parse(model, (result) => { const blob = result instanceof ArrayBuffer ? new Blob([result], {type: 'application/octet-stream'}) : new Blob([JSON.stringify(result)], {type: 'application/json'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `model_${Date.now()}.glb`; a.click(); document.getElementById('loadingOverlay').style.display = 'none'; }, { binary: true, trs: true }); } // --- 加载 --- async function loadModel(file, type) { return new Promise((resolve, reject) => { const loader = new GLTFLoader(); const url = URL.createObjectURL(file); loader.load(url, (gltf) => { URL.revokeObjectURL(url); gltf.scene.traverse(c => { if (c.isMesh) { c.castShadow = true; c.receiveShadow = true; } }); resolve(gltf.scene); }, undefined, reject); }); } // --- 事件 --- document.getElementById('upperFile').addEventListener('change', async (e) => { const file = e.target.files[0]; if (!file) return; document.getElementById('loadingOverlay').style.display = 'flex'; try { if (upperModel) { disposeModel(upperModel); upperModel = null; } if (mergedGroup) { disposeModel(mergedGroup); mergedGroup = null; } upperModel = await loadModel(file, 'upper'); scene.add(upperModel); updateIndicators(); if (upperModel && lowerModel) autoAlign(); else setTransformTarget('upper'); document.getElementById('loadStatus').innerHTML = `✅ 上半部: ${file.name}`; } catch(err) { document.getElementById('loadStatus').innerHTML = `❌ ${err.message}`; } document.getElementById('loadingOverlay').style.display = 'none'; e.target.value = ''; }); document.getElementById('lowerFile').addEventListener('change', async (e) => { const file = e.target.files[0]; if (!file) return; document.getElementById('loadingOverlay').style.display = 'flex'; try { if (lowerModel) { disposeModel(lowerModel); lowerModel = null; } if (mergedGroup) { disposeModel(mergedGroup); mergedGroup = null; } lowerModel = await loadModel(file, 'lower'); scene.add(lowerModel); updateIndicators(); if (upperModel && lowerModel) autoAlign(); else setTransformTarget('lower'); document.getElementById('loadStatus').innerHTML = `✅ 下半部: ${file.name}`; } catch(err) { document.getElementById('loadStatus').innerHTML = `❌ ${err.message}`; } document.getElementById('loadingOverlay').style.display = 'none'; e.target.value = ''; }); document.getElementById('selectUpperBtn').addEventListener('click', () => setTransformTarget('upper')); document.getElementById('selectLowerBtn').addEventListener('click', () => setTransformTarget('lower')); document.getElementById('selectBothBtn').addEventListener('click', () => { if (mergedGroup) { setTransformTarget('both'); } else if (upperModel && lowerModel) { // 自动创建合并组用于操作 const tempGroup = new THREE.Group(); const upPos = upperModel.position.clone(); const lowPos = lowerModel.position.clone(); const upQuat = upperModel.quaternion.clone(); const lowQuat = lowerModel.quaternion.clone(); scene.remove(upperModel); scene.remove(lowerModel); tempGroup.add(upperModel); tempGroup.add(lowerModel); upperModel.position.copy(upPos); lowerModel.position.copy(lowPos); upperModel.quaternion.copy(upQuat); lowerModel.quaternion.copy(lowQuat); scene.add(tempGroup); mergedGroup = tempGroup; setTransformTarget('both'); } }); document.getElementById('modeTranslate').addEventListener('click', () => { transformControls.setMode('translate'); document.getElementById('modeTranslate').classList.add('active'); document.getElementById('modeRotate').classList.remove('active'); document.getElementById('modeScale').classList.remove('active'); }); document.getElementById('modeRotate').addEventListener('click', () => { transformControls.setMode('rotate'); document.getElementById('modeTranslate').classList.remove('active'); document.getElementById('modeRotate').classList.add('active'); document.getElementById('modeScale').classList.remove('active'); }); document.getElementById('modeScale').addEventListener('click', () => { transformControls.setMode('scale'); document.getElementById('modeTranslate').classList.remove('active'); document.getElementById('modeRotate').classList.remove('active'); document.getElementById('modeScale').classList.add('active'); }); document.getElementById('gapSlider').addEventListener('input', (e) => { currentGap = parseFloat(e.target.value); document.getElementById('gapValue').textContent = currentGap.toFixed(2); if (upperModel && lowerModel) { lowerBounds = getBounds(lowerModel); const lowerHeight = lowerBounds.size.y; lowerModel.position.y = -lowerHeight / 2 - currentGap; jointPlane.position.y = -currentGap / 2; } }); document.getElementById('alignBtn').addEventListener('click', autoAlign); document.getElementById('mergeBtn').addEventListener('click', mergeIntoOne); document.getElementById('exportBtn').addEventListener('click', exportGLB); document.getElementById('resetViewBtn').addEventListener('click', () => { const target = mergedGroup || (() => { const g = new THREE.Group(); if (upperModel) g.add(upperModel); if (lowerModel) g.add(lowerModel); return g; })(); const box = new THREE.Box3().setFromObject(target); const center = box.getCenter(new THREE.Vector3()); const size = box.getSize(new THREE.Vector3()); const maxDim = Math.max(size.x, size.y, size.z); orbitControls.target.copy(center); camera.position.set(center.x + maxDim*1.2, center.y + maxDim*0.8, center.z + maxDim*1.5); orbitControls.update(); }); // 键盘快捷键 window.addEventListener('keydown', (e) => { switch(e.key.toLowerCase()) { case 'w': transformControls.setMode('translate'); break; case 'e': transformControls.setMode('rotate'); break; case 'r': transformControls.setMode('scale'); break; case 'g': if (upperModel && lowerModel) mergeIntoOne(); break; case 'escape': transformControls.detach(); break; } }); window.addEventListener('resize', () => { camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight); }); // --- 动画 --- function animate() { requestAnimationFrame(animate); orbitControls.update(); const t = Date.now() * 0.002; jointPlane.material.opacity = 0.25 + Math.sin(t) * 0.1; renderer.render(scene, camera); } animate(); console.log("✅ 增强版拼接系统 | 移动W 旋转E 缩放R 合并G"); console.log("📦 支持 GLB/GLTF | 合并导出功能已就绪"); </script> </body> </html>
