bc-model-viewer 1.7.15 → 1.7.17

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.
Files changed (17) hide show
  1. package/dist/bc-model-viewer.min.js +1 -1
  2. package/examples/AreaMeasureTool.html +19 -26
  3. package/examples/BasicModelLoad.html +66 -0
  4. package/examples/ChangeStyleDemo.html +3 -74
  5. package/examples/DistanceMeasureTool.html +19 -26
  6. package/examples/ExplosionDiagram.html +16 -21
  7. package/examples/FaceDistanceMeasureTool.html +19 -26
  8. package/examples/HUDLabelTool.html +19 -35
  9. package/examples/ModelClipperTool.html +15 -23
  10. package/examples/PositionCameraTool.html +12 -21
  11. package/examples/ScenePageDemo.html +20 -49
  12. package/examples/SelectionZoomTool.html +12 -22
  13. package/examples/common-styles.css +173 -0
  14. package/examples/index.html +663 -36
  15. package/package.json +1 -1
  16. package/examples/ScenePageDemo.vue +0 -246
  17. package/examples/ScenePageDemoVue.html +0 -22
package/examples/AreaMeasureTool.html CHANGED
@@ -1,38 +1,31 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
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
- <style>
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
- </div>
12
+ <div id="container"></div>
13
+ <a href="index.html" class="back-button">返回示例列表</a>
25
14
  <div class="demo">
26
- <h2>面积测量工具演示</h2>
27
- <p></p>
28
- <button onclick="tool.activate()">激活工具</button>
29
- <button onclick="tool.deactivate()">停用工具(Esc)</button>
30
- <button onclick="tool.toggle()">切换工具状态</button>
31
- <br>
32
- <button onclick="tool.removeLast()">清除上一次</button>
33
- <button onclick="tool.clear()">清除所有</button>
34
- <br>
35
- <button onclick="console.log(tool.getMeasurements())">打印数据</button>
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">
package/examples/BasicModelLoad.html ADDED
@@ -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>
package/examples/ChangeStyleDemo.html CHANGED
@@ -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
- <style>
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>样式切换演示</h2>
15
+ <h2>🎨 样式切换演示</h2>
87
16
 
88
17
  <div class="control-group">
89
18
  <label>风格：</label>
package/examples/DistanceMeasureTool.html CHANGED
@@ -1,38 +1,31 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
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
- <style>
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
- </div>
12
+ <div id="container"></div>
13
+ <a href="index.html" class="back-button">返回示例列表</a>
25
14
  <div class="demo">
26
- <h2>距离测量工具演示</h2>
27
- <p>点击标签选中,变红按Delete删除</p>
28
- <button onclick="tool.activate()">激活工具</button>
29
- <button onclick="tool.deactivate()">停用工具(Esc)</button>
30
- <button onclick="tool.toggle()">切换工具状态</button>
31
- <br>
32
- <button onclick="tool.removeLast()">清除上一次</button>
33
- <button onclick="tool.clear()">清除所有</button>
34
- <br>
35
- <button onclick="console.log(tool.getMeasurements())">打印数据</button>
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">
package/examples/ExplosionDiagram.html CHANGED
@@ -1,33 +1,25 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
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
- <style>
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
- </div>
12
+ <div id="container"></div>
13
+ <a href="index.html" class="back-button">返回示例列表</a>
25
14
  <div class="demo">
26
- <h2>模型爆炸</h2>
27
- <p></p>
28
- <div class="controls">
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(e.target.value);
70
+ viewer.explosion.applyExplosion(value);
76
71
  });
77
72
 
78
73
  window.v = viewer
package/examples/FaceDistanceMeasureTool.html CHANGED
@@ -1,38 +1,31 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
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
- <style>
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
- </div>
12
+ <div id="container"></div>
13
+ <a href="index.html" class="back-button">返回示例列表</a>
25
14
  <div class="demo">
26
- <h2>面面测量工具演示</h2>
27
- <p></p>
28
- <button onclick="tool.activate()">激活工具</button>
29
- <button onclick="tool.deactivate()">停用工具(Esc)</button>
30
- <button onclick="tool.toggle()">切换工具状态</button>
31
- <br>
32
- <button onclick="tool.removeLast()">清除上一次</button>
33
- <button onclick="tool.clear()">清除所有</button>
34
- <br>
35
- <button onclick="console.log(tool.getMeasurements())">打印数据</button>
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">
package/examples/HUDLabelTool.html CHANGED
@@ -1,47 +1,31 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
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
- <style>
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
- </div>
12
+ <div id="container"></div>
13
+ <a href="index.html" class="back-button">返回示例列表</a>
25
14
  <div class="demo">
26
- <h2>标签工具演示</h2>
27
- <p>点击添加标签 通过类名控制样式</p>
28
- <button onclick="tool.activate()">激活工具</button>
29
- <button onclick="tool.deactivate()">停用工具(Esc)</button>
30
- <button onclick="tool.toggle()">切换工具状态</button>
31
- <br>
32
- <!--
33
- <button onclick="tool.activate({
34
- fixedY: 1,
35
- onPut(point, hud) {
36
- console.log('放置完成', point, hud);
37
- // tool.remove(hud) // 移除指定元素
38
- }
39
- })">锁定Y轴为1</button> -->
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">
package/examples/ModelClipperTool.html CHANGED
@@ -1,34 +1,26 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
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
- <style>
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
- </div>
12
+ <div id="container"></div>
13
+ <a href="index.html" class="back-button">返回示例列表</a>
25
14
  <div class="demo">
26
- <h2>剖切工具演示</h2>
27
- <button onclick="viewer.clipper.activate()">激活工具</button>
28
- <button onclick="viewer.clipper.deactivate()">停用工具(Esc)</button>
29
- <br>
30
- <button onclick="viewer.clipper.clear()">移除所有剖切面</button>
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('../../../assets/new.dgz')
51
+ await viewer.loadZipAsync('./dgz/样板间.dgz')
60
52
  // await viewer.loadZipAsync('../../../assets/dgz/机电综合.dgz')
61
53
 
62
54
  viewer.clipper.activate()
package/examples/PositionCameraTool.html CHANGED
@@ -1,33 +1,24 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
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
- <style>
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
- </div>
12
+ <div id="container"></div>
13
+ <a href="index.html" class="back-button">返回示例列表</a>
25
14
  <div class="demo">
26
- <h2>第一人称漫游</h2>
27
- <p></p>
28
- <button onclick="tool.activate()">激活工具</button>
29
- <button onclick="tool.deactivate()">停用工具(Esc)</button>
30
- <button onclick="tool.toggle()">切换工具状态</button>
15
+ <h2>👤 第一人称漫游演示</h2>
16
+ <p>第一人称视角的相机漫游功能。支持WASD移动、鼠标视角控制，提供沉浸式的模型浏览体验。</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>
31
22
  </div>
32
23
 
33
24
  <script type="module">