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>
|