diff --git a/index.html b/index.html
index 2ad5c41..18943f0 100644
--- a/index.html
+++ b/index.html
@@ -26,10 +26,15 @@
border-radius: 4px;
opacity: 0;
transition: opacity 0.3s;
+ white-space: nowrap;
}
.layer-checkbox { margin-bottom: 10px; }
#weightLimit { margin-top: 10px; }
.layer-checkboxes { margin-top: 20px; }
+ .box-tooltip {
+ font-size: 14px;
+ line-height: 1.2;
+ }
@@ -72,20 +77,16 @@
controls.enablePan = true;
controls.enableRotate = true;
- // 初始化相机位置
camera.position.set(15000, 5000, 15000);
controls.target.set(0, 0, 0);
- // 添加网格辅助线
const gridHelper = new THREE.GridHelper(20000, 20, 0xffffff, 0x444444);
gridHelper.material.opacity = 0.5;
scene.add(gridHelper);
- // 添加坐标轴
const axesHelper = new THREE.AxesHelper(5000);
scene.add(axesHelper);
- // 自适应窗口
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
@@ -126,8 +127,7 @@
if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
result = await response.json();
document.getElementById('result').innerHTML = `最优装箱数：${result.count}`;
-
- // 显示说明
+
const instructions = `
装箱方案说明：
1. 纸箱尺寸：长${result.boxLength}mm × 宽${result.boxWidth}mm × 高${result.boxHeight}mm
@@ -138,12 +138,10 @@
`;
document.getElementById('instructions').innerHTML = instructions;
- // 清理场景
scene.remove(containerMesh);
boxMeshes.forEach(mesh => scene.remove(mesh));
boxMeshes = [];
- // 创建集装箱
const containerGeo = new THREE.BoxGeometry(
data.container.length,
data.container.height,
@@ -161,7 +159,6 @@
);
scene.add(containerMesh);
- // 创建分层控制
const layerCheckboxes = document.querySelector('.layer-checkboxes');
layerCheckboxes.innerHTML = '';
result.layers.forEach((layer, index) => {
@@ -179,10 +176,8 @@
layerCheckboxes.appendChild(div);
});
- // 显示所有层
updateVisibility();
-
- // 添加光源
+
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
scene.add(light);
@@ -197,10 +192,9 @@
function updateVisibility() {
boxMeshes.forEach(mesh => scene.remove(mesh));
boxMeshes = [];
-
const checkedLayers = Array.from(document.querySelectorAll('.layer-checkboxes input:checked'))
.map(cb => parseInt(cb.id.split('-')[1]));
-
+
checkedLayers.forEach(layerIndex => {
const layer = result.layers[layerIndex];
layer.layout.forEach(pos => {
@@ -209,28 +203,39 @@
result.boxHeight,
result.boxWidth
);
- const boxMat = new THREE.MeshLambertMaterial({ color: 0xff0000 });
- const box = new THREE.Mesh(boxGeo, boxMat);
-
- // 设置中心坐标（Three.js坐标系）
- box.position.set(
+
+ // 创建实体部分
+ const boxMatFill = new THREE.MeshLambertMaterial({ color: 0xFFAAAA });
+ const boxFill = new THREE.Mesh(boxGeo, boxMatFill);
+
+ // 创建激光线框
+ const lineGeo = new THREE.EdgesGeometry(boxGeo);
+ const lineMat = new THREE.LineBasicMaterial({
+ color: 0xffff00,
+ linewidth: 2
+ });
+ const line = new THREE.LineSegments(lineGeo, lineMat);
+
+ boxFill.add(line);
+
+ boxFill.position.set(
pos.x + result.boxLength / 2,
pos.y + result.boxHeight / 2,
pos.z + result.boxWidth / 2
);
-
- // 应用旋转角度（弧度转角度）
- box.rotation.set(
+
+ boxFill.rotation.set(
pos.rotationX * Math.PI / 180,
pos.rotationY * Math.PI / 180,
pos.rotationZ * Math.PI / 180
);
- box.userData.index = pos.boxNumber;
-
- box.addEventListener('pointerover', showTooltip);
- box.addEventListener('pointerout', hideTooltip);
- scene.add(box);
- boxMeshes.push(box);
+
+ boxFill.userData.index = pos.boxNumber;
+ boxFill.addEventListener('pointerover', showTooltip);
+ boxFill.addEventListener('pointerout', hideTooltip);
+
+ scene.add(boxFill);
+ boxMeshes.push(boxFill);
});
});
}
@@ -270,21 +275,21 @@
}
};
switch (e.key) {
- case '1': // 前视图
+ case '1':
camera.position.set(
data.container.length * 2,
data.container.height / 2,
data.container.width / 2
);
break;
- case '2': // 顶视图
+ case '2':
camera.position.set(
data.container.length / 2,
data.container.height * 2,
data.container.width / 2
);
break;
- case '3': // 右视图
+ case '3':
camera.position.set(
data.container.length / 2,
data.container.height / 2,