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

67
index.html
View File

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