227 lines
7.0 KiB
HTML
227 lines
7.0 KiB
HTML
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>3D模具几何可视化 - fsa30scy_tc-01-0817.stp</title>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
|
|||
|
|
<style>
|
|||
|
|
body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
|
|||
|
|
#container { position: relative; width: 100vw; height: 100vh; }
|
|||
|
|
#canvas { display: block; }
|
|||
|
|
#info-panel {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 10px;
|
|||
|
|
left: 10px;
|
|||
|
|
background: rgba(255, 255, 255, 0.9);
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
max-width: 300px;
|
|||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
#controls {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 10px;
|
|||
|
|
left: 10px;
|
|||
|
|
background: rgba(255, 255, 255, 0.9);
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
.metric { margin: 5px 0; }
|
|||
|
|
.metric-label { font-weight: bold; color: #333; }
|
|||
|
|
.metric-value { color: #666; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="container">
|
|||
|
|
<canvas id="canvas"></canvas>
|
|||
|
|
|
|||
|
|
<div id="info-panel">
|
|||
|
|
<h3>模具几何信息</h3>
|
|||
|
|
<div class="metric">
|
|||
|
|
<span class="metric-label">文件名:</span>
|
|||
|
|
<span class="metric-value">fsa30scy_tc-01-0817.stp</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="metric">
|
|||
|
|
<span class="metric-label">体积:</span>
|
|||
|
|
<span class="metric-value">5061080.00 mm³</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="metric">
|
|||
|
|
<span class="metric-label">表面积:</span>
|
|||
|
|
<span class="metric-value">640037.28 mm²</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="metric">
|
|||
|
|
<span class="metric-label">边界框:</span>
|
|||
|
|
<span class="metric-value">203.8 × 563.2 × 193.3 mm</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="metric">
|
|||
|
|
<span class="metric-label">面数:</span>
|
|||
|
|
<span class="metric-value">232</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="metric">
|
|||
|
|
<span class="metric-label">边数:</span>
|
|||
|
|
<span class="metric-value">1337</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="metric">
|
|||
|
|
<span class="metric-label">顶点数:</span>
|
|||
|
|
<span class="metric-value">2674</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="controls">
|
|||
|
|
<button onclick="resetView()">重置视图</button>
|
|||
|
|
<button onclick="toggleWireframe()">切换线框</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 初始化Three.js场景
|
|||
|
|
const scene = new THREE.Scene();
|
|||
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|||
|
|
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
|
|||
|
|
|
|||
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|||
|
|
renderer.setClearColor(0xf0f0f0);
|
|||
|
|
|
|||
|
|
// 添加光源
|
|||
|
|
const ambientLight = new THREE.AmbientLight(0x404040);
|
|||
|
|
scene.add(ambientLight);
|
|||
|
|
|
|||
|
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
|
|||
|
|
directionalLight.position.set(1, 1, 1);
|
|||
|
|
scene.add(directionalLight);
|
|||
|
|
|
|||
|
|
// 添加坐标轴
|
|||
|
|
const axesHelper = new THREE.AxesHelper(50);
|
|||
|
|
scene.add(axesHelper);
|
|||
|
|
|
|||
|
|
// 创建几何体（模拟模具形状）
|
|||
|
|
const geometryData = {
|
|||
|
|
"bounding_box": {
|
|||
|
|
"min": [
|
|||
|
|
-102.15609222840467,
|
|||
|
|
-266.68651824453497,
|
|||
|
|
-200.2952105906499
|
|||
|
|
],
|
|||
|
|
"max": [
|
|||
|
|
101.66140805628706,
|
|||
|
|
296.56301479098704,
|
|||
|
|
-6.96132576131294
|
|||
|
|
],
|
|||
|
|
"dimensions": [
|
|||
|
|
203.81750028469173,
|
|||
|
|
563.2495330355221,
|
|||
|
|
193.33388482933697
|
|||
|
|
],
|
|||
|
|
"center": [
|
|||
|
|
-0.2473420860588078,
|
|||
|
|
14.938248273226037,
|
|||
|
|
-103.62826817598142
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
"volume": 5061079.998482411,
|
|||
|
|
"surface_area": 640037.2799399707,
|
|||
|
|
"topology": {
|
|||
|
|
"faces": 232,
|
|||
|
|
"edges": 1337,
|
|||
|
|
"vertices": 2674
|
|||
|
|
},
|
|||
|
|
"center_of_mass": [
|
|||
|
|
-9.874164428540533,
|
|||
|
|
40.525685713471205,
|
|||
|
|
-120.81246492337347
|
|||
|
|
],
|
|||
|
|
"inertia_properties": {
|
|||
|
|
"mass": 5061079.998482411,
|
|||
|
|
"moment_of_inertia": [
|
|||
|
|
[
|
|||
|
|
186102894991.0164,
|
|||
|
|
-7899980049.787681,
|
|||
|
|
-1579033714.9552717
|
|||
|
|
],
|
|||
|
|
[
|
|||
|
|
-7899980049.787681,
|
|||
|
|
30681971505.446594,
|
|||
|
|
-1739615749.1562958
|
|||
|
|
],
|
|||
|
|
[
|
|||
|
|
-1579033714.9552717,
|
|||
|
|
-1739615749.1562958,
|
|||
|
|
198160230180.5097
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
"analysis_method": "pythonocc"
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 根据边界框创建模拟几何体
|
|||
|
|
const bbox = geometryData.bounding_box;
|
|||
|
|
if (bbox) {
|
|||
|
|
const width = bbox.dimensions ? bbox.dimensions[0] : 100;
|
|||
|
|
const height = bbox.dimensions ? bbox.dimensions[1] : 100;
|
|||
|
|
const depth = bbox.dimensions ? bbox.dimensions[2] : 100;
|
|||
|
|
|
|||
|
|
// 创建基础几何体
|
|||
|
|
const geometry = new THREE.BoxGeometry(width, height, depth);
|
|||
|
|
const material = new THREE.MeshPhongMaterial({
|
|||
|
|
color: 0x4CAF50,
|
|||
|
|
transparent: true,
|
|||
|
|
opacity: 0.8,
|
|||
|
|
wireframe: false
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const mesh = new THREE.Mesh(geometry, material);
|
|||
|
|
scene.add(mesh);
|
|||
|
|
|
|||
|
|
// 添加线框
|
|||
|
|
const wireframe = new THREE.WireframeGeometry(geometry);
|
|||
|
|
const line = new THREE.LineSegments(wireframe);
|
|||
|
|
line.material.depthTest = false;
|
|||
|
|
line.material.opacity = 0.25;
|
|||
|
|
line.material.transparent = true;
|
|||
|
|
scene.add(line);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置相机位置
|
|||
|
|
camera.position.set(200, 200, 200);
|
|||
|
|
camera.lookAt(0, 0, 0);
|
|||
|
|
|
|||
|
|
// 添加轨道控制器
|
|||
|
|
const controls = new THREE.OrbitControls(camera, renderer.domElement);
|
|||
|
|
controls.enableDamping = true;
|
|||
|
|
controls.dampingFactor = 0.25;
|
|||
|
|
|
|||
|
|
// 动画循环
|
|||
|
|
function animate() {
|
|||
|
|
requestAnimationFrame(animate);
|
|||
|
|
controls.update();
|
|||
|
|
renderer.render(scene, camera);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
animate();
|
|||
|
|
|
|||
|
|
// 窗口大小调整
|
|||
|
|
window.addEventListener('resize', () => {
|
|||
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|||
|
|
camera.updateProjectionMatrix();
|
|||
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 控制函数
|
|||
|
|
function resetView() {
|
|||
|
|
controls.reset();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toggleWireframe() {
|
|||
|
|
scene.traverse((child) => {
|
|||
|
|
if (child.isMesh) {
|
|||
|
|
child.material.wireframe = !child.material.wireframe;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|