bc-model-viewer 1.7.31 → 1.7.48
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 +226 -76
- package/examples/LayerManagerDemo.html +1 -1
- package/examples/MarkUpTool.html +138 -0
- package/examples/PropertyViewerDemo.html +299 -0
- package/examples/ScenePageDemo.html +78 -2
- package/examples/index.html +11 -0
- package/package.json +1 -1
|
@@ -1,76 +1,226 @@
|
|
|
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
|
|
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>📝
|
|
16
|
-
<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="
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
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>点击模型上的点开始批注，输入文本或使用语音输入，支持图片上传。</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="showAnnotations()" class="secondary">显示所有批注数据</button>
|
|
28
|
+
<button onclick="toggleVisibility()" class="secondary">切换批注可见性</button>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="control-group">
|
|
31
|
+
<button onclick="restoreFirstAnnotationView()" class="secondary">恢复第一个批注视角</button>
|
|
32
|
+
<button onclick="restoreLastAnnotationView()" class="secondary">恢复最后一个批注视角</button>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="control-group">
|
|
35
|
+
<button onclick="restoreAllViews()" class="secondary">依次恢复所有批注视角</button>
|
|
36
|
+
<button onclick="exportAnnotations()" class="secondary">导出批注数据</button>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="control-group">
|
|
39
|
+
<p style="font-size: 12px; color: #888; margin-top: 10px;">
|
|
40
|
+
💡 使用提示：<br>
|
|
41
|
+
• 点击模型上的点开始批注<br>
|
|
42
|
+
• 在输入框中输入文本，或点击麦克风图标使用语音输入<br>
|
|
43
|
+
• 点击图片图标上传图片<br>
|
|
44
|
+
• 按回车键完成批注，按 ESC 键取消<br>
|
|
45
|
+
• 激活时相机控制会被禁用<br>
|
|
46
|
+
• 点击批注文本可以恢复到创建批注时的视角
|
|
47
|
+
</p>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<script type="module">
|
|
52
|
+
|
|
53
|
+
import { Viewer, AnnotationTool } from '../../index.ts'
|
|
54
|
+
|
|
55
|
+
const container = document.getElementById('container')
|
|
56
|
+
|
|
57
|
+
// 实例化 Viewer 对象
|
|
58
|
+
const viewer = new Viewer(container, {
|
|
59
|
+
load: {
|
|
60
|
+
cache: {
|
|
61
|
+
enabled: false
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
})
|
|
65
|
+
|
|
66
|
+
// 加载测试模型
|
|
67
|
+
await viewer.loadZipAsync('../../assets/new.dgz')
|
|
68
|
+
|
|
69
|
+
// AnnotationTool 已在 Viewer 构造函数中自动初始化
|
|
70
|
+
// 可以通过 viewer.annotationTool 访问
|
|
71
|
+
const tool = viewer.annotationTool
|
|
72
|
+
|
|
73
|
+
// 设置批注添加前的回调
|
|
74
|
+
tool.setBeforeAddCallback(async (data) => {
|
|
75
|
+
console.log('准备添加批注:', data);
|
|
76
|
+
console.log('图片数量:', data.imageUrls ? data.imageUrls.length : 0);
|
|
77
|
+
|
|
78
|
+
// 这里可以调用接口发送数据
|
|
79
|
+
try {
|
|
80
|
+
// 模拟接口调用
|
|
81
|
+
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
82
|
+
console.log('接口调用成功');
|
|
83
|
+
|
|
84
|
+
// 返回 true 表示继续添加批注
|
|
85
|
+
return true;
|
|
86
|
+
} catch (error) {
|
|
87
|
+
console.error('接口调用失败:', error);
|
|
88
|
+
// 返回 false 表示取消添加批注
|
|
89
|
+
return false;
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
tool.activate()
|
|
94
|
+
|
|
95
|
+
window.tool = tool
|
|
96
|
+
window.viewer = viewer
|
|
97
|
+
|
|
98
|
+
// 显示所有批注数据
|
|
99
|
+
function showAnnotations() {
|
|
100
|
+
const annotations = tool.getAnnotations();
|
|
101
|
+
if (annotations.length === 0) {
|
|
102
|
+
alert('当前没有批注');
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
const data = annotations.map((ann, index) => ({
|
|
107
|
+
index: index + 1,
|
|
108
|
+
text: ann.text,
|
|
109
|
+
imageUrl: ann.imageUrl || '无',
|
|
110
|
+
hasView: !!ann.viewCoordinates,
|
|
111
|
+
anchorPoint: {
|
|
112
|
+
x: ann.anchorPoint.x.toFixed(3),
|
|
113
|
+
y: ann.anchorPoint.y.toFixed(3),
|
|
114
|
+
z: ann.anchorPoint.z.toFixed(3)
|
|
115
|
+
}
|
|
116
|
+
}));
|
|
117
|
+
|
|
118
|
+
console.table(data);
|
|
119
|
+
alert(`共有 ${annotations.length} 个批注，请查看控制台了解详细信息`);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// 切换批注可见性
|
|
123
|
+
let isAnnotationsVisible = true;
|
|
124
|
+
function toggleVisibility() {
|
|
125
|
+
isAnnotationsVisible = !isAnnotationsVisible;
|
|
126
|
+
tool.setVisible(isAnnotationsVisible);
|
|
127
|
+
alert(isAnnotationsVisible ? '批注已显示' : '批注已隐藏');
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// 恢复第一个批注的视角
|
|
131
|
+
async function restoreFirstAnnotationView() {
|
|
132
|
+
const result = await tool.restoreAnnotationView(0);
|
|
133
|
+
if (!result.success) {
|
|
134
|
+
alert(result.message || '恢复视角失败');
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
// 恢复最后一个批注的视角
|
|
139
|
+
async function restoreLastAnnotationView() {
|
|
140
|
+
const annotations = tool.getAnnotations();
|
|
141
|
+
if (annotations.length === 0) {
|
|
142
|
+
alert('没有批注可恢复');
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
const result = await tool.restoreAnnotationView(annotations.length - 1);
|
|
146
|
+
if (!result.success) {
|
|
147
|
+
alert(result.message || '恢复视角失败');
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// 依次恢复所有批注视角
|
|
152
|
+
async function restoreAllViews() {
|
|
153
|
+
const annotations = tool.getAnnotations();
|
|
154
|
+
if (annotations.length === 0) {
|
|
155
|
+
alert('没有批注可恢复');
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
for (let i = 0; i < annotations.length; i++) {
|
|
160
|
+
const result = await tool.restoreAnnotationView(i);
|
|
161
|
+
if (result.success) {
|
|
162
|
+
console.log(`已恢复第 ${i + 1} 个批注的视角`);
|
|
163
|
+
// 等待一段时间再恢复下一个
|
|
164
|
+
await new Promise(resolve => setTimeout(resolve, 1500));
|
|
165
|
+
} else {
|
|
166
|
+
console.error(`恢复第 ${i + 1} 个批注视角失败:`, result.message);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
alert(`已依次恢复所有 ${annotations.length} 个批注的视角`);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
// 导出批注数据
|
|
174
|
+
function exportAnnotations() {
|
|
175
|
+
const annotations = tool.getAnnotations();
|
|
176
|
+
if (annotations.length === 0) {
|
|
177
|
+
alert('当前没有批注可导出');
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
const exportData = annotations.map((ann, index) => ({
|
|
182
|
+
id: index + 1,
|
|
183
|
+
text: ann.text,
|
|
184
|
+
imageUrls: ann.imageUrls || null,
|
|
185
|
+
viewCoordinates: ann.viewCoordinates || null,
|
|
186
|
+
anchorPoint: {
|
|
187
|
+
x: ann.anchorPoint.x,
|
|
188
|
+
y: ann.anchorPoint.y,
|
|
189
|
+
z: ann.anchorPoint.z
|
|
190
|
+
},
|
|
191
|
+
textPoint: {
|
|
192
|
+
x: ann.textPoint.x,
|
|
193
|
+
y: ann.textPoint.y,
|
|
194
|
+
z: ann.textPoint.z
|
|
195
|
+
}
|
|
196
|
+
}));
|
|
197
|
+
|
|
198
|
+
const json = JSON.stringify(exportData, null, 2);
|
|
199
|
+
const blob = new Blob([json], { type: 'application/json' });
|
|
200
|
+
const url = URL.createObjectURL(blob);
|
|
201
|
+
|
|
202
|
+
const a = document.createElement('a');
|
|
203
|
+
a.href = url;
|
|
204
|
+
a.download = `annotations_${new Date().toISOString().slice(0, 10)}.json`;
|
|
205
|
+
document.body.appendChild(a);
|
|
206
|
+
a.click();
|
|
207
|
+
document.body.removeChild(a);
|
|
208
|
+
URL.revokeObjectURL(url);
|
|
209
|
+
|
|
210
|
+
console.log('导出的批注数据:', exportData);
|
|
211
|
+
alert(`已导出 ${annotations.length} 个批注到 JSON 文件`);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
// 将函数暴露到全局作用域，以便 HTML onclick 可以访问
|
|
215
|
+
window.showAnnotations = showAnnotations;
|
|
216
|
+
window.toggleVisibility = toggleVisibility;
|
|
217
|
+
window.restoreFirstAnnotationView = restoreFirstAnnotationView;
|
|
218
|
+
window.restoreLastAnnotationView = restoreLastAnnotationView;
|
|
219
|
+
window.restoreAllViews = restoreAllViews;
|
|
220
|
+
window.exportAnnotations = exportAnnotations;
|
|
221
|
+
|
|
222
|
+
</script>
|
|
223
|
+
|
|
224
|
+
</body>
|
|
225
|
+
|
|
226
|
+
</html>
|
|
@@ -0,0 +1,138 @@
|
|
|
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="tool.updateAnnotationsVisibility(20)">显示所有批注</button>
|
|
28
|
+
<button onclick="hideAllAnnotations()">隐藏所有批注</button>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="control-group">
|
|
31
|
+
<button onclick="loadTestAnnotations()">加载测试批注</button>
|
|
32
|
+
<button onclick="console.log(tool.getAnnotations())">打印批注数据</button>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="control-group">
|
|
35
|
+
<p style="font-size: 12px; color: #888; margin-top: 10px;">
|
|
36
|
+
💡 使用提示：<br>
|
|
37
|
+
• 第一次点击：在模型上选择锚点<br>
|
|
38
|
+
• 第二次点击：确定文本位置（会显示输入框）<br>
|
|
39
|
+
• 输入文字后按回车完成标注<br>
|
|
40
|
+
• 按 ESC 键取消当前标注<br>
|
|
41
|
+
• 点击标签可选中标注，点击 × 可删除<br>
|
|
42
|
+
• 激活时相机控制会被禁用<br>
|
|
43
|
+
• 按 Delete 键删除选中的标注
|
|
44
|
+
</p>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<script type="module">
|
|
49
|
+
|
|
50
|
+
import { Viewer, MarkupTool } from '../../index.ts'
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
const container = document.getElementById('container')
|
|
54
|
+
|
|
55
|
+
// 实例化 Viewer 对象
|
|
56
|
+
const viewer = new Viewer(container, {
|
|
57
|
+
load: {
|
|
58
|
+
cache: {
|
|
59
|
+
enabled: false
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
})
|
|
63
|
+
|
|
64
|
+
// 加载测试模型
|
|
65
|
+
// await viewer.loadZipAsync('../../assets/dgz/建筑.dgz')
|
|
66
|
+
await viewer.loadZipAsync('../../assets/new.dgz')
|
|
67
|
+
|
|
68
|
+
// MarkupTool 已在 Viewer 构造函数中自动初始化
|
|
69
|
+
// 可以通过 viewer.markupTool 访问
|
|
70
|
+
const tool = viewer.markupTool
|
|
71
|
+
|
|
72
|
+
tool.activate()
|
|
73
|
+
|
|
74
|
+
window.tool = tool
|
|
75
|
+
window.viewer = viewer
|
|
76
|
+
|
|
77
|
+
// 辅助函数：隐藏所有批注
|
|
78
|
+
window.hideAllAnnotations = function() {
|
|
79
|
+
if (!tool || !tool.annotations) return;
|
|
80
|
+
|
|
81
|
+
tool.annotations.forEach((annotation) => {
|
|
82
|
+
annotation.line.visible = false;
|
|
83
|
+
annotation.label.visible = false;
|
|
84
|
+
});
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
// 辅助函数：加载测试批注数据
|
|
88
|
+
window.loadTestAnnotations = function() {
|
|
89
|
+
if (!tool) return;
|
|
90
|
+
|
|
91
|
+
// 测试批注数据（使用简单的坐标）
|
|
92
|
+
const testAnnotations = [
|
|
93
|
+
{
|
|
94
|
+
point: [0, 0, 0],
|
|
95
|
+
label: "测试批注 1",
|
|
96
|
+
viewport: {
|
|
97
|
+
x: 100,
|
|
98
|
+
y: 100,
|
|
99
|
+
width: 800,
|
|
100
|
+
height: 600
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
point: [1, 1, 1],
|
|
105
|
+
label: "测试批注 2",
|
|
106
|
+
viewport: {
|
|
107
|
+
x: 100,
|
|
108
|
+
y: 100,
|
|
109
|
+
width: 800,
|
|
110
|
+
height: 600
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
point: [-1, -1, 0],
|
|
115
|
+
label: "测试批注 3",
|
|
116
|
+
viewport: {
|
|
117
|
+
x: 100,
|
|
118
|
+
y: 100,
|
|
119
|
+
width: 800,
|
|
120
|
+
height: 600
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
];
|
|
124
|
+
|
|
125
|
+
try {
|
|
126
|
+
tool.loadAnnotationsFromData(testAnnotations);
|
|
127
|
+
console.log('测试批注加载成功');
|
|
128
|
+
} catch (error) {
|
|
129
|
+
console.error('加载测试批注失败:', error);
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
</script>
|
|
134
|
+
|
|
135
|
+
</body>
|
|
136
|
+
|
|
137
|
+
</html>
|
|
138
|
+
|