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
|
@@ -0,0 +1,299 @@
|
|
|
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
|
+
.demo {
|
|
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
|
+
|
|
23
|
+
.control-group {
|
|
24
|
+
margin-bottom: 15px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.control-group h3 {
|
|
28
|
+
margin: 0 0 10px 0;
|
|
29
|
+
color: #333;
|
|
30
|
+
font-size: 16px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.btn {
|
|
34
|
+
background: #377ee8;
|
|
35
|
+
color: white;
|
|
36
|
+
border: none;
|
|
37
|
+
padding: 8px 12px;
|
|
38
|
+
border-radius: 4px;
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
font-size: 14px;
|
|
41
|
+
transition: background 0.2s;
|
|
42
|
+
margin-right: 8px;
|
|
43
|
+
margin-bottom: 8px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.btn:hover {
|
|
47
|
+
background: #2a6bd1;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.btn.active {
|
|
51
|
+
background: #1e4f9e;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.btn:disabled {
|
|
55
|
+
background: #aaa;
|
|
56
|
+
cursor: not-allowed;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.instructions {
|
|
60
|
+
background: rgba(55, 126, 232, 0.1);
|
|
61
|
+
border: 1px solid rgba(55, 126, 232, 0.3);
|
|
62
|
+
border-radius: 4px;
|
|
63
|
+
padding: 15px;
|
|
64
|
+
margin-bottom: 15px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.instructions h4 {
|
|
68
|
+
margin: 0 0 10px 0;
|
|
69
|
+
color: #377ee8;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.instructions ul {
|
|
73
|
+
margin: 0;
|
|
74
|
+
padding-left: 20px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.instructions li {
|
|
78
|
+
margin-bottom: 5px;
|
|
79
|
+
color: #666;
|
|
80
|
+
font-size: 13px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.model-info {
|
|
84
|
+
background: rgba(0, 0, 0, 0.05);
|
|
85
|
+
border-radius: 4px;
|
|
86
|
+
padding: 15px;
|
|
87
|
+
margin-bottom: 15px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.model-info h4 {
|
|
91
|
+
margin: 0 0 10px 0;
|
|
92
|
+
color: #377ee8;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.info-item {
|
|
96
|
+
display: flex;
|
|
97
|
+
justify-content: space-between;
|
|
98
|
+
margin-bottom: 5px;
|
|
99
|
+
font-size: 13px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.info-label {
|
|
103
|
+
color: #666;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.info-value {
|
|
107
|
+
color: #333;
|
|
108
|
+
font-weight: 500;
|
|
109
|
+
}
|
|
110
|
+
</style>
|
|
111
|
+
</head>
|
|
112
|
+
|
|
113
|
+
<body>
|
|
114
|
+
<div id="container"></div>
|
|
115
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
116
|
+
|
|
117
|
+
<div class="demo">
|
|
118
|
+
<h2>🔍 属性查看工具演示</h2>
|
|
119
|
+
<p>点击模型上的对象查看其属性信息，包括基本属性和用户自定义数据。</p>
|
|
120
|
+
|
|
121
|
+
<div class="instructions">
|
|
122
|
+
<h4>使用说明</h4>
|
|
123
|
+
<ul>
|
|
124
|
+
<li>点击"激活工具"按钮启用属性查看功能</li>
|
|
125
|
+
<li>点击模型上的任意对象查看其属性</li>
|
|
126
|
+
<li>属性信息将显示在右侧面板中</li>
|
|
127
|
+
<li>点击空白区域可关闭属性面板</li>
|
|
128
|
+
<li>支持查看基本属性和用户自定义属性</li>
|
|
129
|
+
</ul>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
<div class="control-group">
|
|
133
|
+
<h3>工具控制</h3>
|
|
134
|
+
<button id="activateBtn" class="btn">激活工具</button>
|
|
135
|
+
<button id="deactivateBtn" class="btn" disabled>停用工具</button>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<div class="control-group">
|
|
139
|
+
<h3>加载模型</h3>
|
|
140
|
+
<button id="loadModel1" class="btn">加载测试模型1</button>
|
|
141
|
+
<button id="loadModel2" class="btn">加载测试模型2</button>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<div class="model-info">
|
|
145
|
+
<h4>当前状态</h4>
|
|
146
|
+
<div class="info-item">
|
|
147
|
+
<span class="info-label">工具状态:</span>
|
|
148
|
+
<span id="toolStatus" class="info-value">未激活</span>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="info-item">
|
|
151
|
+
<span class="info-label">已选择对象:</span>
|
|
152
|
+
<span id="selectedObject" class="info-value">无</span>
|
|
153
|
+
</div>
|
|
154
|
+
<div class="info-item">
|
|
155
|
+
<span class="info-label">模型加载:</span>
|
|
156
|
+
<span id="modelStatus" class="info-value">未加载</span>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<div class="control-group">
|
|
161
|
+
<p style="font-size: 12px; color: #888; margin-top: 10px;">
|
|
162
|
+
💡 使用提示：<br>
|
|
163
|
+
• 激活工具后，鼠标悬停在对象上会显示对象名称<br>
|
|
164
|
+
• 点击对象后，属性面板会显示在右上角<br>
|
|
165
|
+
• 支持查看位置、旋转、缩放等基本属性<br>
|
|
166
|
+
• 自动提取并显示对象的用户自定义数据<br>
|
|
167
|
+
• 点击空白区域或关闭按钮可隐藏属性面板
|
|
168
|
+
</p>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
<script type="module">
|
|
173
|
+
import { Viewer, PropertyViewerTool } from '../../index.ts'
|
|
174
|
+
|
|
175
|
+
const container = document.getElementById('container')
|
|
176
|
+
|
|
177
|
+
// 实例化 Viewer 对象
|
|
178
|
+
const viewer = new Viewer(container, {
|
|
179
|
+
load: {
|
|
180
|
+
cache: {
|
|
181
|
+
enabled: false
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
})
|
|
185
|
+
|
|
186
|
+
let propertyViewerTool = null
|
|
187
|
+
|
|
188
|
+
// 更新状态显示
|
|
189
|
+
function updateStatus() {
|
|
190
|
+
document.getElementById('toolStatus').textContent =
|
|
191
|
+
propertyViewerTool && propertyViewerTool.isActive ? '已激活' : '未激活'
|
|
192
|
+
|
|
193
|
+
document.getElementById('selectedObject').textContent =
|
|
194
|
+
propertyViewerTool && propertyViewerTool.selectedObject ?
|
|
195
|
+
(propertyViewerTool.selectedObject.name || propertyViewerTool.selectedObject.type) : '无'
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
// 激活属性查看工具
|
|
199
|
+
document.getElementById('activateBtn').addEventListener('click', () => {
|
|
200
|
+
if (!propertyViewerTool) {
|
|
201
|
+
propertyViewerTool = new PropertyViewerTool(viewer)
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
// 停用其他工具
|
|
205
|
+
// viewer.deactivateAllTools()
|
|
206
|
+
|
|
207
|
+
// 激活属性查看工具
|
|
208
|
+
propertyViewerTool.activate()
|
|
209
|
+
|
|
210
|
+
// 更新按钮状态
|
|
211
|
+
document.getElementById('activateBtn').disabled = true
|
|
212
|
+
document.getElementById('deactivateBtn').disabled = false
|
|
213
|
+
|
|
214
|
+
updateStatus()
|
|
215
|
+
})
|
|
216
|
+
|
|
217
|
+
// 停用属性查看工具
|
|
218
|
+
document.getElementById('deactivateBtn').addEventListener('click', () => {
|
|
219
|
+
if (propertyViewerTool) {
|
|
220
|
+
propertyViewerTool.deactivate()
|
|
221
|
+
|
|
222
|
+
// 更新按钮状态
|
|
223
|
+
document.getElementById('activateBtn').disabled = false
|
|
224
|
+
document.getElementById('deactivateBtn').disabled = true
|
|
225
|
+
|
|
226
|
+
updateStatus()
|
|
227
|
+
}
|
|
228
|
+
})
|
|
229
|
+
|
|
230
|
+
// 加载测试模型1
|
|
231
|
+
document.getElementById('loadModel1').addEventListener('click', async () => {
|
|
232
|
+
try {
|
|
233
|
+
// 加载测试模型
|
|
234
|
+
await viewer.loadZipAsync('../../assets/dgz/建筑.dgz')
|
|
235
|
+
document.getElementById('modelStatus').textContent = '模型1已加载'
|
|
236
|
+
|
|
237
|
+
// 为模型对象添加一些自定义属性用于测试
|
|
238
|
+
setTimeout(() => {
|
|
239
|
+
if (viewer.scene && viewer.scene.children.length > 0) {
|
|
240
|
+
viewer.scene.children.forEach((child, index) => {
|
|
241
|
+
// 添加一些测试用的用户数据
|
|
242
|
+
child.userData = {
|
|
243
|
+
material: 'Steel',
|
|
244
|
+
weight: '15kg',
|
|
245
|
+
manufacturer: 'Test Corp',
|
|
246
|
+
partNumber: `PN-${index + 1000}`,
|
|
247
|
+
description: '这是一个测试对象的描述信息'
|
|
248
|
+
}
|
|
249
|
+
})
|
|
250
|
+
}
|
|
251
|
+
}, 100)
|
|
252
|
+
|
|
253
|
+
} catch (error) {
|
|
254
|
+
console.error('加载模型失败:', error)
|
|
255
|
+
document.getElementById('modelStatus').textContent = '加载失败'
|
|
256
|
+
}
|
|
257
|
+
})
|
|
258
|
+
|
|
259
|
+
// 加载测试模型2
|
|
260
|
+
document.getElementById('loadModel2').addEventListener('click', async () => {
|
|
261
|
+
try {
|
|
262
|
+
// 加载另一个测试模型
|
|
263
|
+
await viewer.loadZipAsync('../../assets/dgz/样板间.dgz')
|
|
264
|
+
document.getElementById('modelStatus').textContent = '模型2已加载'
|
|
265
|
+
|
|
266
|
+
// 为模型对象添加不同的自定义属性
|
|
267
|
+
setTimeout(() => {
|
|
268
|
+
if (viewer.scene && viewer.scene.children.length > 0) {
|
|
269
|
+
viewer.scene.children.forEach((child, index) => {
|
|
270
|
+
child.userData = {
|
|
271
|
+
material: 'Aluminum',
|
|
272
|
+
weight: '8kg',
|
|
273
|
+
manufacturer: 'Demo Inc',
|
|
274
|
+
partNumber: `PN-${index + 2000}`,
|
|
275
|
+
color: 'Blue',
|
|
276
|
+
productionDate: '2024-01-15'
|
|
277
|
+
}
|
|
278
|
+
})
|
|
279
|
+
}
|
|
280
|
+
}, 100)
|
|
281
|
+
|
|
282
|
+
} catch (error) {
|
|
283
|
+
console.error('加载模型失败:', error)
|
|
284
|
+
document.getElementById('modelStatus').textContent = '加载失败'
|
|
285
|
+
}
|
|
286
|
+
})
|
|
287
|
+
|
|
288
|
+
// 初始状态更新
|
|
289
|
+
updateStatus()
|
|
290
|
+
|
|
291
|
+
// 暴露到全局对象方便调试
|
|
292
|
+
window.viewer = viewer
|
|
293
|
+
window.propertyViewerTool = propertyViewerTool
|
|
294
|
+
|
|
295
|
+
console.log('属性查看工具演示已初始化')
|
|
296
|
+
</script>
|
|
297
|
+
</body>
|
|
298
|
+
|
|
299
|
+
</html>
|
|
@@ -83,6 +83,17 @@
|
|
|
83
83
|
<a href="index.html" class="back-button">返回示例列表</a>
|
|
84
84
|
<div class="control-panel">
|
|
85
85
|
<h2>🎭 场景页面管理器演示</h2>
|
|
86
|
+
|
|
87
|
+
<!-- 属性查看工具控制 -->
|
|
88
|
+
<div class="control-group">
|
|
89
|
+
<h3>🔍 属性查看工具</h3>
|
|
90
|
+
<button id="activatePropertyViewer" class="btn">激活属性查看</button>
|
|
91
|
+
<button id="deactivatePropertyViewer" class="btn" disabled>停用属性查看</button>
|
|
92
|
+
<div style="font-size: 12px; color: #666; margin-top: 5px;">
|
|
93
|
+
工具状态: <span id="propertyViewerStatus">未激活</span>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
86
97
|
<div class="scene-buttons" id="modelScenesContainer">
|
|
87
98
|
<!-- 模型中的场景按钮将在这里动态生成 -->
|
|
88
99
|
</div>
|
|
@@ -111,7 +122,7 @@
|
|
|
111
122
|
|
|
112
123
|
<script type="module">
|
|
113
124
|
// 导入必要的组件
|
|
114
|
-
import { Viewer } from '../../index.ts';
|
|
125
|
+
import { Viewer, PropertyViewerTool } from '../../index.ts';
|
|
115
126
|
|
|
116
127
|
// 获取容器元素
|
|
117
128
|
const container = document.getElementById('container');
|
|
@@ -125,10 +136,55 @@
|
|
|
125
136
|
},
|
|
126
137
|
});
|
|
127
138
|
|
|
139
|
+
// 属性查看工具实例
|
|
140
|
+
let propertyViewerTool = null;
|
|
141
|
+
|
|
142
|
+
// 属性查看工具控制函数
|
|
143
|
+
function setupPropertyViewerTool() {
|
|
144
|
+
const activateBtn = document.getElementById('activatePropertyViewer');
|
|
145
|
+
const deactivateBtn = document.getElementById('deactivatePropertyViewer');
|
|
146
|
+
const statusSpan = document.getElementById('propertyViewerStatus');
|
|
147
|
+
|
|
148
|
+
// 激活属性查看工具
|
|
149
|
+
activateBtn.addEventListener('click', () => {
|
|
150
|
+
if (!propertyViewerTool) {
|
|
151
|
+
propertyViewerTool = new PropertyViewerTool(viewer);
|
|
152
|
+
}
|
|
153
|
+
// 激活属性查看工具
|
|
154
|
+
propertyViewerTool.activate();
|
|
155
|
+
|
|
156
|
+
// 更新按钮状态
|
|
157
|
+
activateBtn.disabled = true;
|
|
158
|
+
deactivateBtn.disabled = false;
|
|
159
|
+
statusSpan.textContent = '已激活';
|
|
160
|
+
statusSpan.style.color = '#4CAF50';
|
|
161
|
+
|
|
162
|
+
console.log('属性查看工具已激活');
|
|
163
|
+
});
|
|
164
|
+
|
|
165
|
+
// 停用属性查看工具
|
|
166
|
+
deactivateBtn.addEventListener('click', () => {
|
|
167
|
+
if (propertyViewerTool) {
|
|
168
|
+
propertyViewerTool.deactivate();
|
|
169
|
+
|
|
170
|
+
// 更新按钮状态
|
|
171
|
+
activateBtn.disabled = false;
|
|
172
|
+
deactivateBtn.disabled = true;
|
|
173
|
+
statusSpan.textContent = '未激活';
|
|
174
|
+
statusSpan.style.color = '#666';
|
|
175
|
+
|
|
176
|
+
console.log('属性查看工具已停用');
|
|
177
|
+
}
|
|
178
|
+
});
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
// 初始化属性查看工具
|
|
182
|
+
setupPropertyViewerTool();
|
|
183
|
+
|
|
128
184
|
// 加载测试模型 - 请根据实际情况修改模型路径
|
|
129
185
|
try {
|
|
130
186
|
// 尝试加载默认模型，如果失败会显示错误信息
|
|
131
|
-
await viewer.loadZipAsync('../../../assets/
|
|
187
|
+
await viewer.loadZipAsync('../../../assets/p1.dgz');
|
|
132
188
|
// await viewer.loadZipAsync('../../../assets/dgz/地下室管综2.dgz');
|
|
133
189
|
|
|
134
190
|
// 模型加载完成后，检查是否有内置场景
|
|
@@ -139,6 +195,25 @@
|
|
|
139
195
|
|
|
140
196
|
// 自动加载模型中的场景
|
|
141
197
|
loadAndDisplayModelScenes();
|
|
198
|
+
|
|
199
|
+
// 为模型对象添加一些测试用的用户数据
|
|
200
|
+
setTimeout(() => {
|
|
201
|
+
if (viewer.scene && viewer.scene.children.length > 0) {
|
|
202
|
+
viewer.scene.children.forEach((child, index) => {
|
|
203
|
+
// 添加一些测试用的用户数据
|
|
204
|
+
if (!child.userData) {
|
|
205
|
+
child.userData = {
|
|
206
|
+
material: 'Steel',
|
|
207
|
+
weight: '15kg',
|
|
208
|
+
manufacturer: 'Test Corp',
|
|
209
|
+
partNumber: `PN-${index + 1000}`,
|
|
210
|
+
description: '这是一个测试对象的描述信息'
|
|
211
|
+
};
|
|
212
|
+
}
|
|
213
|
+
});
|
|
214
|
+
}
|
|
215
|
+
}, 100);
|
|
216
|
+
|
|
142
217
|
} catch (error) {
|
|
143
218
|
// console.error('模型加载失败，请检查路径是否正确:', error);
|
|
144
219
|
// alert('模型加载失败，请确保模型文件路径正确');
|
|
@@ -263,6 +338,7 @@
|
|
|
263
338
|
}
|
|
264
339
|
// 暴露viewer和辅助函数到全局以便调试
|
|
265
340
|
window.viewer = viewer;
|
|
341
|
+
window.propertyViewerTool = propertyViewerTool;
|
|
266
342
|
window.getModelScenes = getModelScenes;
|
|
267
343
|
window.getSceneByName = getSceneByName;
|
|
268
344
|
window.loadAndDisplayModelScenes = loadAndDisplayModelScenes;
|
package/examples/index.html
CHANGED
|
@@ -443,6 +443,17 @@
|
|
|
443
443
|
</div>
|
|
444
444
|
<a href="SelectionZoomTool.html" class="link-button">查看示例 →</a>
|
|
445
445
|
</div>
|
|
446
|
+
|
|
447
|
+
<div class="example-card" data-name="属性查看" data-desc="对象属性">
|
|
448
|
+
<h3><span class="icon">🔍</span>属性查看工具</h3>
|
|
449
|
+
<div class="description">点击模型对象查看其属性信息，包括基本属性（位置、旋转、缩放等）和用户自定义数据。支持实时属性显示。</div>
|
|
450
|
+
<div class="tags">
|
|
451
|
+
<span class="tag tag-tool">查看工具</span>
|
|
452
|
+
<span class="tag tag-feature">属性查看</span>
|
|
453
|
+
<span class="tag tag-feature">用户数据</span>
|
|
454
|
+
</div>
|
|
455
|
+
<a href="PropertyViewerDemo.html" class="link-button">查看示例 →</a>
|
|
456
|
+
</div>
|
|
446
457
|
</div>
|
|
447
458
|
</section>
|
|
448
459
|
|