bc-model-viewer 1.7.15 → 1.7.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bc-model-viewer.min.js +1 -1
- package/examples/AnnotationTool.html +74 -0
- package/examples/AreaMeasureTool.html +19 -26
- package/examples/BasicModelLoad.html +66 -0
- package/examples/ChangeStyleDemo.html +3 -74
- package/examples/DistanceMeasureTool.html +19 -26
- package/examples/ExplosionDiagram.html +16 -21
- package/examples/FaceDistanceMeasureTool.html +19 -26
- package/examples/HUDLabelTool.html +19 -35
- package/examples/LineTool.html +76 -0
- package/examples/ModelClipperTool.html +15 -23
- package/examples/PencilTool.html +73 -0
- package/examples/PositionCameraTool.html +12 -21
- package/examples/ScenePageDemo.html +20 -49
- package/examples/SelectionZoomTool.html +12 -22
- package/examples/common-styles.css +173 -0
- package/examples/index.html +696 -36
- package/package.json +1 -1
- package/examples/ScenePageDemo.vue +0 -246
- package/examples/ScenePageDemoVue.html +0 -22
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>标注工具演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
<div id="container"></div>
|
|
13
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
14
|
+
<div class="demo">
|
|
15
|
+
<h2>📝 标注工具演示</h2>
|
|
16
|
+
<p>点击模型上的点开始标注，再次点击确定文本位置，输入标注文字后按回车完成。支持删除功能。</p>
|
|
17
|
+
<div class="control-group">
|
|
18
|
+
<button onclick="tool.activate()">激活工具</button>
|
|
19
|
+
<button onclick="tool.deactivate()">停用工具</button>
|
|
20
|
+
<button onclick="tool.toggle()">切换状态</button>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="control-group">
|
|
23
|
+
<button onclick="tool.removeLast()" class="secondary">清除上一次</button>
|
|
24
|
+
<button onclick="tool.clear()" class="danger">清除所有</button>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="control-group">
|
|
27
|
+
<button onclick="console.log(tool.getAnnotations())">打印数据</button>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="control-group">
|
|
30
|
+
<p style="font-size: 12px; color: #888; margin-top: 10px;">
|
|
31
|
+
💡 使用提示：<br>
|
|
32
|
+
• 第一次点击：在模型上选择锚点<br>
|
|
33
|
+
• 第二次点击：确定文本位置（会显示输入框）<br>
|
|
34
|
+
• 输入文字后按回车完成标注<br>
|
|
35
|
+
• 按 ESC 键取消当前标注<br>
|
|
36
|
+
• 点击标签可选中标注，点击 × 可删除<br>
|
|
37
|
+
• 激活时相机控制会被禁用<br>
|
|
38
|
+
• 按 Delete 键删除选中的标注
|
|
39
|
+
</p>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<script type="module">
|
|
44
|
+
|
|
45
|
+
import { Viewer, AnnotationTool } from '../../index.ts'
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
const container = document.getElementById('container')
|
|
49
|
+
|
|
50
|
+
// 实例化 Viewer 对象
|
|
51
|
+
const viewer = new Viewer(container, {
|
|
52
|
+
load: {
|
|
53
|
+
cache: {
|
|
54
|
+
enabled: false
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
})
|
|
58
|
+
|
|
59
|
+
// 加载测试模型
|
|
60
|
+
await viewer.loadZipAsync('../../assets/dgz/建筑.dgz')
|
|
61
|
+
// await viewer.loadZipAsync('../../assets/new.dgz')
|
|
62
|
+
|
|
63
|
+
const tool = new AnnotationTool(viewer)
|
|
64
|
+
|
|
65
|
+
tool.activate()
|
|
66
|
+
|
|
67
|
+
window.tool = tool
|
|
68
|
+
window.viewer = viewer
|
|
69
|
+
</script>
|
|
70
|
+
|
|
71
|
+
</body>
|
|
72
|
+
|
|
73
|
+
</html>
|
|
74
|
+
|
|
@@ -1,38 +1,31 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
2
|
+
<html lang="zh-CN">
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title
|
|
8
|
-
<
|
|
9
|
-
body {
|
|
10
|
-
margin: 0;
|
|
11
|
-
position: relative;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.demo {
|
|
15
|
-
position: absolute;
|
|
16
|
-
z-index: 1;
|
|
17
|
-
top: 0;
|
|
18
|
-
}
|
|
19
|
-
</style>
|
|
7
|
+
<title>面积测量工具演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
20
9
|
</head>
|
|
21
10
|
|
|
22
11
|
<body>
|
|
23
|
-
<div id="container">
|
|
24
|
-
|
|
12
|
+
<div id="container"></div>
|
|
13
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
25
14
|
<div class="demo">
|
|
26
|
-
<h2
|
|
27
|
-
<p
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
15
|
+
<h2>📊 面积测量工具演示</h2>
|
|
16
|
+
<p>在模型表面测量区域面积，适用于平面和曲面测量。</p>
|
|
17
|
+
<div class="control-group">
|
|
18
|
+
<button onclick="tool.activate()">激活工具</button>
|
|
19
|
+
<button onclick="tool.deactivate()">停用工具</button>
|
|
20
|
+
<button onclick="tool.toggle()">切换状态</button>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="control-group">
|
|
23
|
+
<button onclick="tool.removeLast()" class="secondary">清除上一次</button>
|
|
24
|
+
<button onclick="tool.clear()" class="danger">清除所有</button>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="control-group">
|
|
27
|
+
<button onclick="console.log(tool.getMeasurements())">打印数据</button>
|
|
28
|
+
</div>
|
|
36
29
|
</div>
|
|
37
30
|
|
|
38
31
|
<script type="module">
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>基础模型加载演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
9
|
+
<style>
|
|
10
|
+
.info-panel {
|
|
11
|
+
position: absolute;
|
|
12
|
+
top: 20px;
|
|
13
|
+
left: 20px;
|
|
14
|
+
z-index: 1000;
|
|
15
|
+
background: rgba(255, 255, 255, 0.95);
|
|
16
|
+
backdrop-filter: blur(10px);
|
|
17
|
+
border-radius: 12px;
|
|
18
|
+
padding: 20px;
|
|
19
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
20
|
+
max-width: 350px;
|
|
21
|
+
}
|
|
22
|
+
</style>
|
|
23
|
+
</head>
|
|
24
|
+
|
|
25
|
+
<body>
|
|
26
|
+
<div id="container"></div>
|
|
27
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
28
|
+
|
|
29
|
+
<div class="info-panel">
|
|
30
|
+
<h2>📦 基础模型加载演示</h2>
|
|
31
|
+
<p>这是一个最简单的模型加载示例，演示如何在不使用任何工具的情况下加载和显示模型。</p>
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
<div class="controls-hint">
|
|
35
|
+
<strong>操作提示：</strong>
|
|
36
|
+
<ul>
|
|
37
|
+
<li>左键拖拽：旋转视角</li>
|
|
38
|
+
<li>右键拖拽：平移视图</li>
|
|
39
|
+
<li>滚轮：缩放视图</li>
|
|
40
|
+
</ul>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<script type="module">
|
|
45
|
+
import { Viewer } from '../../index.ts'
|
|
46
|
+
|
|
47
|
+
const container = document.getElementById('container')
|
|
48
|
+
|
|
49
|
+
// 实例化 Viewer 对象
|
|
50
|
+
const viewer = new Viewer(container)
|
|
51
|
+
|
|
52
|
+
// 加载测试模型
|
|
53
|
+
try {
|
|
54
|
+
await viewer.loadZipAsync('./dgz/样板间.dgz')
|
|
55
|
+
console.log('模型加载成功')
|
|
56
|
+
} catch (error) {
|
|
57
|
+
console.error('模型加载失败:', error)
|
|
58
|
+
|
|
59
|
+
}
|
|
60
|
+
// 暴露 viewer 实例到 window 对象，方便调试
|
|
61
|
+
window.viewer = viewer
|
|
62
|
+
</script>
|
|
63
|
+
|
|
64
|
+
</body>
|
|
65
|
+
|
|
66
|
+
</html>
|
|
@@ -5,85 +5,14 @@
|
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
7
|
<title>样式切换演示 - Bc-model-viewer</title>
|
|
8
|
-
<
|
|
9
|
-
body {
|
|
10
|
-
margin: 0;
|
|
11
|
-
position: relative;
|
|
12
|
-
font-family: Arial, sans-serif;
|
|
13
|
-
font-size: 14px;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.demo-controls {
|
|
17
|
-
position: absolute;
|
|
18
|
-
z-index: 1;
|
|
19
|
-
top: 0;
|
|
20
|
-
left: 0;
|
|
21
|
-
padding: 10px;
|
|
22
|
-
background-color: rgba(255, 255, 255, 0.9);
|
|
23
|
-
border-radius: 4px;
|
|
24
|
-
margin: 10px;
|
|
25
|
-
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
h2 {
|
|
29
|
-
margin: 0 0 10px 0;
|
|
30
|
-
font-size: 16px;
|
|
31
|
-
color: #333;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.control-group {
|
|
35
|
-
margin-bottom: 8px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.control-group label {
|
|
39
|
-
display: inline-block;
|
|
40
|
-
margin-right: 5px;
|
|
41
|
-
font-size: 13px;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
button {
|
|
45
|
-
padding: 4px 8px;
|
|
46
|
-
margin-right: 5px;
|
|
47
|
-
margin-bottom: 5px;
|
|
48
|
-
background-color: #4CAF50;
|
|
49
|
-
color: white;
|
|
50
|
-
border: none;
|
|
51
|
-
border-radius: 3px;
|
|
52
|
-
cursor: pointer;
|
|
53
|
-
font-size: 12px;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
button:hover {
|
|
57
|
-
background-color: #45a049;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
input[type="color"] {
|
|
61
|
-
width: 40px;
|
|
62
|
-
height: 22px;
|
|
63
|
-
border: 1px solid #ddd;
|
|
64
|
-
border-radius: 3px;
|
|
65
|
-
margin-right: 5px;
|
|
66
|
-
cursor: pointer;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
select {
|
|
70
|
-
padding: 2px 4px;
|
|
71
|
-
font-size: 12px;
|
|
72
|
-
border: 1px solid #ddd;
|
|
73
|
-
border-radius: 3px;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.separator {
|
|
77
|
-
margin: 8px 0;
|
|
78
|
-
border-top: 1px solid #eee;
|
|
79
|
-
}
|
|
80
|
-
</style>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
81
9
|
</head>
|
|
82
10
|
|
|
83
11
|
<body>
|
|
84
12
|
<div id="container"></div>
|
|
13
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
85
14
|
<div class="demo-controls">
|
|
86
|
-
<h2
|
|
15
|
+
<h2>🎨 样式切换演示</h2>
|
|
87
16
|
|
|
88
17
|
<div class="control-group">
|
|
89
18
|
<label>风格：</label>
|
|
@@ -1,38 +1,31 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
2
|
+
<html lang="zh-CN">
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title
|
|
8
|
-
<
|
|
9
|
-
body {
|
|
10
|
-
margin: 0;
|
|
11
|
-
position: relative;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.demo {
|
|
15
|
-
position: absolute;
|
|
16
|
-
z-index: 1;
|
|
17
|
-
top: 0;
|
|
18
|
-
}
|
|
19
|
-
</style>
|
|
7
|
+
<title>距离测量工具演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
20
9
|
</head>
|
|
21
10
|
|
|
22
11
|
<body>
|
|
23
|
-
<div id="container">
|
|
24
|
-
|
|
12
|
+
<div id="container"></div>
|
|
13
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
25
14
|
<div class="demo">
|
|
26
|
-
<h2
|
|
27
|
-
<p
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
15
|
+
<h2>📐 距离测量工具演示</h2>
|
|
16
|
+
<p>在3D场景中测量两点之间的距离。支持多点连续测量和标签编辑。点击标签选中，变红后按Delete删除。</p>
|
|
17
|
+
<div class="control-group">
|
|
18
|
+
<button onclick="tool.activate()">激活工具</button>
|
|
19
|
+
<button onclick="tool.deactivate()">停用工具</button>
|
|
20
|
+
<button onclick="tool.toggle()">切换状态</button>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="control-group">
|
|
23
|
+
<button onclick="tool.removeLast()" class="secondary">清除上一次</button>
|
|
24
|
+
<button onclick="tool.clear()" class="danger">清除所有</button>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="control-group">
|
|
27
|
+
<button onclick="console.log(tool.getMeasurements())">打印数据</button>
|
|
28
|
+
</div>
|
|
36
29
|
</div>
|
|
37
30
|
|
|
38
31
|
<script type="module">
|
|
@@ -1,33 +1,25 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
2
|
+
<html lang="zh-CN">
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title
|
|
8
|
-
<
|
|
9
|
-
body {
|
|
10
|
-
margin: 0;
|
|
11
|
-
position: relative;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.demo {
|
|
15
|
-
position: absolute;
|
|
16
|
-
z-index: 1;
|
|
17
|
-
top: 0;
|
|
18
|
-
}
|
|
19
|
-
</style>
|
|
7
|
+
<title>模型爆炸图演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
20
9
|
</head>
|
|
21
10
|
|
|
22
11
|
<body>
|
|
23
|
-
<div id="container">
|
|
24
|
-
|
|
12
|
+
<div id="container"></div>
|
|
13
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
25
14
|
<div class="demo">
|
|
26
|
-
<h2
|
|
27
|
-
<p
|
|
28
|
-
<div class="
|
|
15
|
+
<h2>💥 模型爆炸图演示</h2>
|
|
16
|
+
<p>通过调整爆炸强度来分离和展示模型的不同部件，便于查看内部结构。</p>
|
|
17
|
+
<div class="control-group">
|
|
29
18
|
<button onclick="viewer.explosion.applyExplosion(10)">爆炸</button>
|
|
30
|
-
<button onclick="viewer.explosion.resetExplosion()" id="resetBtn">复位</button>
|
|
19
|
+
<button onclick="viewer.explosion.resetExplosion()" id="resetBtn" class="secondary">复位</button>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="control-group">
|
|
22
|
+
<label for="intensity">爆炸强度: <span id="intensityValue">0</span></label>
|
|
31
23
|
<input type="range" id="intensity" step="0.1" min="0" value="0" title="爆炸强度">
|
|
32
24
|
</div>
|
|
33
25
|
</div>
|
|
@@ -70,9 +62,12 @@
|
|
|
70
62
|
|
|
71
63
|
|
|
72
64
|
// 实时调整爆炸强度
|
|
65
|
+
const intensityValue = document.getElementById('intensityValue');
|
|
73
66
|
intensity.addEventListener('input', (e) => {
|
|
67
|
+
const value = parseFloat(e.target.value);
|
|
68
|
+
intensityValue.textContent = value.toFixed(1);
|
|
74
69
|
viewer.setEdgeVisible(false)
|
|
75
|
-
viewer.explosion.applyExplosion(
|
|
70
|
+
viewer.explosion.applyExplosion(value);
|
|
76
71
|
});
|
|
77
72
|
|
|
78
73
|
window.v = viewer
|
|
@@ -1,38 +1,31 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
2
|
+
<html lang="zh-CN">
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title
|
|
8
|
-
<
|
|
9
|
-
body {
|
|
10
|
-
margin: 0;
|
|
11
|
-
position: relative;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.demo {
|
|
15
|
-
position: absolute;
|
|
16
|
-
z-index: 1;
|
|
17
|
-
top: 0;
|
|
18
|
-
}
|
|
19
|
-
</style>
|
|
7
|
+
<title>面面测量工具演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
20
9
|
</head>
|
|
21
10
|
|
|
22
11
|
<body>
|
|
23
|
-
<div id="container">
|
|
24
|
-
|
|
12
|
+
<div id="container"></div>
|
|
13
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
25
14
|
<div class="demo">
|
|
26
|
-
<h2
|
|
27
|
-
<p
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
15
|
+
<h2>📏 面面测量工具演示</h2>
|
|
16
|
+
<p>测量两个面之间的距离。适用于建筑和工程场景中的精确测量需求。</p>
|
|
17
|
+
<div class="control-group">
|
|
18
|
+
<button onclick="tool.activate()">激活工具</button>
|
|
19
|
+
<button onclick="tool.deactivate()">停用工具</button>
|
|
20
|
+
<button onclick="tool.toggle()">切换状态</button>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="control-group">
|
|
23
|
+
<button onclick="tool.removeLast()" class="secondary">清除上一次</button>
|
|
24
|
+
<button onclick="tool.clear()" class="danger">清除所有</button>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="control-group">
|
|
27
|
+
<button onclick="console.log(tool.getMeasurements())">打印数据</button>
|
|
28
|
+
</div>
|
|
36
29
|
</div>
|
|
37
30
|
|
|
38
31
|
<script type="module">
|
|
@@ -1,47 +1,31 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
2
|
+
<html lang="zh-CN">
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Bc-model-viewer</title>
|
|
8
|
-
<
|
|
9
|
-
body {
|
|
10
|
-
margin: 0;
|
|
11
|
-
position: relative;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.demo {
|
|
15
|
-
position: absolute;
|
|
16
|
-
z-index: 1;
|
|
17
|
-
top: 0;
|
|
18
|
-
}
|
|
19
|
-
</style>
|
|
7
|
+
<title>HUD 标签工具演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
20
9
|
</head>
|
|
21
10
|
|
|
22
11
|
<body>
|
|
23
|
-
<div id="container">
|
|
24
|
-
|
|
12
|
+
<div id="container"></div>
|
|
13
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
25
14
|
<div class="demo">
|
|
26
|
-
<h2
|
|
27
|
-
<p
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<button onclick="tool.removeLast()">清除上一次标签</button>
|
|
42
|
-
<button onclick="tool.clear()">清除所有标签</button>
|
|
43
|
-
<button onclick="tool.gets()">获取所有标签</button>
|
|
44
|
-
|
|
15
|
+
<h2>🏷️ HUD 标签工具演示</h2>
|
|
16
|
+
<p>在3D场景中添加HTML标签。支持自定义标签内容、样式和位置，可以通过类名控制样式。</p>
|
|
17
|
+
<div class="control-group">
|
|
18
|
+
<button onclick="tool.activate()">激活工具</button>
|
|
19
|
+
<button onclick="tool.deactivate()">停用工具</button>
|
|
20
|
+
<button onclick="tool.toggle()">切换状态</button>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="control-group">
|
|
23
|
+
<button onclick="tool.removeLast()" class="secondary">清除上一次标签</button>
|
|
24
|
+
<button onclick="tool.clear()" class="danger">清除所有标签</button>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="control-group">
|
|
27
|
+
<button onclick="console.log(tool.gets())">获取所有标签</button>
|
|
28
|
+
</div>
|
|
45
29
|
</div>
|
|
46
30
|
|
|
47
31
|
<script type="module">
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>直线工具演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
<div id="container"></div>
|
|
13
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
14
|
+
<div class="demo">
|
|
15
|
+
<h2>📏 直线工具演示</h2>
|
|
16
|
+
<p>点击两点绘制直线。支持吸附到模型表面，按住 Shift 锁定轴（X/Y/Z），自动检测轴对齐并显示提示。默认连续绘制模式，点击标签可选中，点击删除按钮可删除。激活工具时会禁用相机控制，停用时恢复。</p>
|
|
17
|
+
<div class="control-group">
|
|
18
|
+
<button onclick="tool.activate()">激活工具</button>
|
|
19
|
+
<button onclick="tool.deactivate()">停用工具</button>
|
|
20
|
+
<button onclick="tool.toggle()">切换状态</button>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="control-group">
|
|
23
|
+
<button onclick="tool.removeLast()" class="secondary">清除上一次</button>
|
|
24
|
+
<button onclick="tool.clear()" class="danger">清除所有</button>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="control-group">
|
|
27
|
+
<button onclick="console.log(tool.getLines())">打印数据</button>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="control-group">
|
|
30
|
+
<p style="font-size: 12px; color: #888; margin-top: 10px;">
|
|
31
|
+
💡 使用提示：<br>
|
|
32
|
+
• 点击第一点设置起点<br>
|
|
33
|
+
• 点击第二点设置终点，完成直线绘制<br>
|
|
34
|
+
• 按住 Shift 键锁定到最近的轴（X/Y/Z）<br>
|
|
35
|
+
• 自动检测轴对齐并显示提示（平行 X/Y/Z 轴）<br>
|
|
36
|
+
• 自动吸附到模型表面顶点和边线<br>
|
|
37
|
+
• 默认连续绘制模式（完成一条后继续绘制）<br>
|
|
38
|
+
• 点击标签可选中直线，点击 × 可删除<br>
|
|
39
|
+
• 激活时相机控制会被禁用<br>
|
|
40
|
+
• 按 Delete 键删除选中的直线
|
|
41
|
+
</p>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<script type="module">
|
|
46
|
+
|
|
47
|
+
import { Viewer, LineTool } from '../../index.ts'
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
const container = document.getElementById('container')
|
|
51
|
+
|
|
52
|
+
// 实例化 Viewer 对象
|
|
53
|
+
const viewer = new Viewer(container, {
|
|
54
|
+
load: {
|
|
55
|
+
cache: {
|
|
56
|
+
enabled: false
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
})
|
|
60
|
+
|
|
61
|
+
// 加载测试模型
|
|
62
|
+
await viewer.loadZipAsync('../../assets/dgz/建筑.dgz')
|
|
63
|
+
// await viewer.loadZipAsync('../../assets/new.dgz')
|
|
64
|
+
|
|
65
|
+
const tool = new LineTool(viewer)
|
|
66
|
+
|
|
67
|
+
tool.activate()
|
|
68
|
+
|
|
69
|
+
window.tool = tool
|
|
70
|
+
window.viewer = viewer
|
|
71
|
+
</script>
|
|
72
|
+
|
|
73
|
+
</body>
|
|
74
|
+
|
|
75
|
+
</html>
|
|
76
|
+
|
|
@@ -1,34 +1,26 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
2
|
+
<html lang="zh-CN">
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title
|
|
8
|
-
<
|
|
9
|
-
body {
|
|
10
|
-
margin: 0;
|
|
11
|
-
position: relative;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.demo {
|
|
15
|
-
position: absolute;
|
|
16
|
-
z-index: 1;
|
|
17
|
-
top: 0;
|
|
18
|
-
}
|
|
19
|
-
</style>
|
|
7
|
+
<title>模型剖切工具演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
20
9
|
</head>
|
|
21
10
|
|
|
22
11
|
<body>
|
|
23
|
-
<div id="container">
|
|
24
|
-
|
|
12
|
+
<div id="container"></div>
|
|
13
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
25
14
|
<div class="demo">
|
|
26
|
-
<h2
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
15
|
+
<h2>✂️ 模型剖切工具演示</h2>
|
|
16
|
+
<p>对模型进行切片查看。支持多个剖切面，可以从不同角度查看模型内部结构。</p>
|
|
17
|
+
<div class="control-group">
|
|
18
|
+
<button onclick="viewer.clipper.activate()">激活工具</button>
|
|
19
|
+
<button onclick="viewer.clipper.deactivate()">停用工具</button>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="control-group">
|
|
22
|
+
<button onclick="viewer.clipper.clear()" class="danger">移除所有剖切面</button>
|
|
23
|
+
</div>
|
|
32
24
|
</div>
|
|
33
25
|
|
|
34
26
|
<script type="module">
|
|
@@ -56,7 +48,7 @@
|
|
|
56
48
|
})
|
|
57
49
|
|
|
58
50
|
// 加载测试模型
|
|
59
|
-
await viewer.loadZipAsync('
|
|
51
|
+
await viewer.loadZipAsync('./dgz/样板间.dgz')
|
|
60
52
|
// await viewer.loadZipAsync('../../../assets/dgz/机电综合.dgz')
|
|
61
53
|
|
|
62
54
|
viewer.clipper.activate()
|