55 lines
2.4 KiB
HTML
55 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>STEP 查看器嵌入示例</title>
|
||
<style>
|
||
body { margin: 0; font-family: "Microsoft YaHei", sans-serif; background: #f5f6f7; }
|
||
.header {
|
||
background: #fff; padding: 14px 24px; border-bottom: 1px solid #e3e6e8;
|
||
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
|
||
}
|
||
.header h1 { font-size: 18px; margin: 0; color: #2b9ae8; }
|
||
.model-btn {
|
||
border: 1px solid #ddd; background: #fff; border-radius: 4px;
|
||
padding: 8px 16px; cursor: pointer; font-size: 13px; color: #444;
|
||
}
|
||
.model-btn:hover { border-color: #2b9ae8; color: #2b9ae8; }
|
||
.content { padding: 16px; }
|
||
.frame-box {
|
||
background: #fff; border: 1px solid #e3e6e8; border-radius: 6px;
|
||
overflow: hidden; height: calc(100vh - 150px);
|
||
}
|
||
iframe { width: 100%; height: 100%; border: none; display: block; }
|
||
.tip { color: #888; font-size: 12px; margin-top: 8px; line-height: 1.8; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<h1>STEP 3D 查看器 · 嵌入示例</h1>
|
||
<button class="model-btn" data-model="samples/user/LZ01001001_H100_2mm.stp">LZ01001001_H100</button>
|
||
<button class="model-btn" data-model="samples/user/LZ01001005_H500_2mm.stp">LZ01001005_H500</button>
|
||
<button class="model-btn" data-model="samples/as1-oc-214.stp">as1 装配体</button>
|
||
</div>
|
||
<div class="content">
|
||
<div class="frame-box">
|
||
<!-- 嵌入方式：iframe + ?file= 参数自动加载指定模型 -->
|
||
<iframe id="viewerFrame" src="./index.html?file=samples/user/LZ01001001_H100_2mm.stp" allowFullScreen></iframe>
|
||
</div>
|
||
<div class="tip">
|
||
嵌入方法：<iframe src="查看器目录/index.html?file=模型路径.stp" width="100%" height="600" allowFullScreen></iframe><br>
|
||
部署：把整个 STEPViewer 目录（index.html、app.js、style.css、libs、icons）上传到你的网站，iframe 指向它即可。<br>
|
||
注意：模型文件要与查看器同源（同一域名下），或用 ?url= 加载远程模型（远程服务器需允许 CORS）。
|
||
</div>
|
||
</div>
|
||
<script>
|
||
document.querySelectorAll('.model-btn').forEach((b) => {
|
||
b.addEventListener('click', () => {
|
||
document.getElementById('viewerFrame').src = './index.html?file=' + encodeURIComponent(b.dataset.model);
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|