重构项目结构
This commit is contained in:
@@ -1,207 +0,0 @@
|
||||
|
||||
<!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">1000000.00 mm³</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-label">表面积:</span>
|
||||
<span class="metric-value">60000.00 mm²</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-label">边界框:</span>
|
||||
<span class="metric-value">100.0 × 100.0 × 100.0 mm</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-label">面数:</span>
|
||||
<span class="metric-value">6</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-label">边数:</span>
|
||||
<span class="metric-value">12</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-label">顶点数:</span>
|
||||
<span class="metric-value">8</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": [
|
||||
0.0,
|
||||
0.0,
|
||||
0.0
|
||||
],
|
||||
"max": [
|
||||
100.0,
|
||||
100.0,
|
||||
100.0
|
||||
],
|
||||
"dimensions": [
|
||||
100.0,
|
||||
100.0,
|
||||
100.0
|
||||
],
|
||||
"center": [
|
||||
50.0,
|
||||
50.0,
|
||||
50.0
|
||||
]
|
||||
},
|
||||
"volume": 1000000.0,
|
||||
"surface_area": 60000.0,
|
||||
"topology": {
|
||||
"faces": 6,
|
||||
"edges": 12,
|
||||
"vertices": 8
|
||||
},
|
||||
"center_of_mass": [
|
||||
50.0,
|
||||
50.0,
|
||||
50.0
|
||||
],
|
||||
"inertia_properties": {},
|
||||
"analysis_method": "simulated"
|
||||
};
|
||||
|
||||
// 根据边界框创建模拟几何体
|
||||
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>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user