admin/stream_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改纸箱颜色

Browse Source
This commit is contained in:
admin 2025-04-23 11:13:26 +08:00
parent 8238d35d3a
commit f32634f97e
1 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
index.html
View File

@ -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;
}
</style>
</head>
<body>
@ -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();
@ -127,7 +128,6 @@
result = await response.json();
document.getElementById('result').innerHTML = `最优装箱数：${result.count}`;
// 显示说明
const instructions = `
装箱方案说明：<br>
1. 纸箱尺寸：长${result.boxLength}mm × 宽${result.boxWidth}mm × 高${result.boxHeight}mm<br>
@ -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,7 +192,6 @@
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]));
@ -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,