107 lines
3.0 KiB
JavaScript
107 lines
3.0 KiB
JavaScript
let scene, camera, renderer, controls;
|
|
|
|
function initThree() {
|
|
// 初始化场景
|
|
scene = new THREE.Scene();
|
|
camera = new THREE.PerspectiveCamera(75,
|
|
window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setSize(800, 600);
|
|
document.getElementById('visualization').appendChild(renderer.domElement);
|
|
|
|
// 添加光源
|
|
const light = new THREE.AmbientLight(0xffffff, 0.8);
|
|
scene.add(light);
|
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
|
|
directionalLight.position.set(0, 1, 1);
|
|
scene.add(directionalLight);
|
|
|
|
// 设置相机位置
|
|
camera.position.set(10, 10, 10);
|
|
camera.lookAt(0, 0, 0);
|
|
|
|
// 添加轨道控制器
|
|
controls = new THREE.OrbitControls(camera, renderer.domElement);
|
|
}
|
|
|
|
function clearScene() {
|
|
while(scene.children.length > 0){
|
|
scene.remove(scene.children[0]);
|
|
}
|
|
}
|
|
|
|
function renderContainer(container) {
|
|
// 绘制集装箱线框
|
|
const geometry = new THREE.BoxGeometry(
|
|
container.Length,
|
|
container.Width,
|
|
container.Height
|
|
);
|
|
const edges = new THREE.EdgesGeometry(geometry);
|
|
const line = new THREE.LineSegments(
|
|
edges,
|
|
new THREE.LineBasicMaterial({ color: 0x000000 })
|
|
);
|
|
scene.add(line);
|
|
}
|
|
|
|
function renderBoxes(placements) {
|
|
placements.forEach(pos => {
|
|
const geometry = new THREE.BoxGeometry(pos.Length, pos.Width, pos.Height);
|
|
const material = new THREE.MeshPhongMaterial({
|
|
color: 0x00ff00,
|
|
transparent: true,
|
|
opacity: 0.7
|
|
});
|
|
const cube = new THREE.Mesh(geometry, material);
|
|
cube.position.set(
|
|
pos.X + pos.Length/2,
|
|
pos.Y + pos.Width/2,
|
|
pos.Z + pos.Height/2
|
|
);
|
|
scene.add(cube);
|
|
});
|
|
}
|
|
|
|
async function calculate() {
|
|
// 获取输入值
|
|
const container = {
|
|
Length: parseFloat(document.getElementById('contLength').value),
|
|
Width: parseFloat(document.getElementById('contWidth').value),
|
|
Height: parseFloat(document.getElementById('contHeight').value),
|
|
MaxWeight: parseFloat(document.getElementById('contWeight').value)
|
|
};
|
|
|
|
const box = {
|
|
Length: parseFloat(document.getElementById('boxLength').value),
|
|
Width: parseFloat(document.getElementById('boxWidth').value),
|
|
Height: parseFloat(document.getElementById('boxHeight').value),
|
|
Weight: parseFloat(document.getElementById('boxWeight').value)
|
|
};
|
|
|
|
// 发送请求
|
|
const response = await fetch('/api/calculate', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ container, box })
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
// 更新可视化
|
|
clearScene();
|
|
renderContainer(container);
|
|
renderBoxes(result.placements);
|
|
}
|
|
|
|
// 初始化
|
|
initThree();
|
|
animate();
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
controls.update();
|
|
renderer.render(scene, camera);
|
|
} |