init
This commit is contained in:
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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.998482413,
|
||||
"surface_area": 640037.2799399707,
|
||||
"topology": {
|
||||
"faces": 232,
|
||||
"edges": 1337,
|
||||
"vertices": 2674
|
||||
},
|
||||
"center_of_mass": [
|
||||
-9.874164428540528,
|
||||
40.52568571347111,
|
||||
-120.81246492337333
|
||||
],
|
||||
"inertia_properties": {
|
||||
"mass": 5061079.998482413,
|
||||
"moment_of_inertia": [
|
||||
[
|
||||
186102894991.01657,
|
||||
-7899980049.787681,
|
||||
-1579033714.9552822
|
||||
],
|
||||
[
|
||||
-7899980049.787681,
|
||||
30681971505.44673,
|
||||
-1739615749.1562157
|
||||
],
|
||||
[
|
||||
-1579033714.9552822,
|
||||
-1739615749.1562157,
|
||||
198160230180.50974
|
||||
]
|
||||
]
|
||||
},
|
||||
"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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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.998482413,
|
||||
"surface_area": 640037.2799399707,
|
||||
"topology": {
|
||||
"faces": 232,
|
||||
"edges": 1337,
|
||||
"vertices": 2674
|
||||
},
|
||||
"center_of_mass": [
|
||||
-9.874164428540528,
|
||||
40.52568571347111,
|
||||
-120.81246492337333
|
||||
],
|
||||
"inertia_properties": {
|
||||
"mass": 5061079.998482413,
|
||||
"moment_of_inertia": [
|
||||
[
|
||||
186102894991.01657,
|
||||
-7899980049.787681,
|
||||
-1579033714.9552822
|
||||
],
|
||||
[
|
||||
-7899980049.787681,
|
||||
30681971505.44673,
|
||||
-1739615749.1562157
|
||||
],
|
||||
[
|
||||
-1579033714.9552822,
|
||||
-1739615749.1562157,
|
||||
198160230180.50974
|
||||
]
|
||||
]
|
||||
},
|
||||
"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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
@@ -0,0 +1,226 @@
|
||||
|
||||
<!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>
|
||||
Reference in New Issue
Block a user