bc-model-viewer 1.7.17 → 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/LineTool.html +76 -0
- package/examples/PencilTool.html +73 -0
- package/examples/index.html +33 -0
- package/package.json +1 -1
|
@@ -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
|
+
|
|
@@ -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
|
+
|
|
@@ -0,0 +1,73 @@
|
|
|
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>按住鼠标拖动绘制连续线条。支持吸附到模型表面，松开鼠标完成绘制。激活工具时会禁用相机控制，停用时恢复。点击已绘制的线条可以选中（高亮显示），按 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.getDrawings())">打印数据</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
|
+
• 自动吸附到模型表面顶点和边线<br>
|
|
36
|
+
• 激活时相机控制会被禁用<br>
|
|
37
|
+
• 按 Delete 键删除选中的线条
|
|
38
|
+
</p>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<script type="module">
|
|
43
|
+
|
|
44
|
+
import { Viewer, FreehandTool } from '../../index.ts'
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
const container = document.getElementById('container')
|
|
48
|
+
|
|
49
|
+
// 实例化 Viewer 对象
|
|
50
|
+
const viewer = new Viewer(container, {
|
|
51
|
+
load: {
|
|
52
|
+
cache: {
|
|
53
|
+
enabled: false
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
})
|
|
57
|
+
|
|
58
|
+
// 加载测试模型
|
|
59
|
+
await viewer.loadZipAsync('../../assets/dgz/建筑.dgz')
|
|
60
|
+
// await viewer.loadZipAsync('../../assets/new.dgz')
|
|
61
|
+
|
|
62
|
+
const tool = new FreehandTool(viewer)
|
|
63
|
+
|
|
64
|
+
tool.activate()
|
|
65
|
+
|
|
66
|
+
window.tool = tool
|
|
67
|
+
window.viewer = viewer
|
|
68
|
+
</script>
|
|
69
|
+
|
|
70
|
+
</body>
|
|
71
|
+
|
|
72
|
+
</html>
|
|
73
|
+
|
package/examples/index.html
CHANGED
|
@@ -326,6 +326,39 @@
|
|
|
326
326
|
</div>
|
|
327
327
|
<a href="FaceDistanceMeasureTool.html" class="link-button">查看示例 →</a>
|
|
328
328
|
</div>
|
|
329
|
+
|
|
330
|
+
<div class="example-card" data-name="手绘线工具" data-desc="绘制线条">
|
|
331
|
+
<h3><span class="icon">✏️</span>手绘线工具</h3>
|
|
332
|
+
<div class="description">按住鼠标拖动绘制连续线条。支持吸附到模型表面，松开鼠标完成绘制。激活时禁用相机控制。</div>
|
|
333
|
+
<div class="tags">
|
|
334
|
+
<span class="tag tag-tool">绘制工具</span>
|
|
335
|
+
<span class="tag tag-feature">手绘线条</span>
|
|
336
|
+
<span class="tag tag-feature">表面吸附</span>
|
|
337
|
+
</div>
|
|
338
|
+
<a href="PencilTool.html" class="link-button">查看示例 →</a>
|
|
339
|
+
</div>
|
|
340
|
+
|
|
341
|
+
<div class="example-card" data-name="直线工具" data-desc="绘制直线">
|
|
342
|
+
<h3><span class="icon">📏</span>直线工具</h3>
|
|
343
|
+
<div class="description">点击两点绘制直线。支持吸附到模型表面，点击起点和终点完成绘制。激活时禁用相机控制。</div>
|
|
344
|
+
<div class="tags">
|
|
345
|
+
<span class="tag tag-tool">绘制工具</span>
|
|
346
|
+
<span class="tag tag-feature">直线绘制</span>
|
|
347
|
+
<span class="tag tag-feature">表面吸附</span>
|
|
348
|
+
</div>
|
|
349
|
+
<a href="LineTool.html" class="link-button">查看示例 →</a>
|
|
350
|
+
</div>
|
|
351
|
+
|
|
352
|
+
<div class="example-card" data-name="标注工具" data-desc="文本标注">
|
|
353
|
+
<h3><span class="icon">📝</span>标注工具</h3>
|
|
354
|
+
<div class="description">点击模型上的点作为锚点，再次点击确定文本位置，输入标注文字后按回车完成。支持删除功能。</div>
|
|
355
|
+
<div class="tags">
|
|
356
|
+
<span class="tag tag-tool">标注工具</span>
|
|
357
|
+
<span class="tag tag-feature">文本标注</span>
|
|
358
|
+
<span class="tag tag-feature">交互输入</span>
|
|
359
|
+
</div>
|
|
360
|
+
<a href="AnnotationTool.html" class="link-button">查看示例 →</a>
|
|
361
|
+
</div>
|
|
329
362
|
</div>
|
|
330
363
|
</section>
|
|
331
364
|
|