bc-model-viewer 1.7.17 → 1.7.19
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/ChangeStyleDemo.html +75 -4
- package/examples/ExplosionDiagram.html +34 -12
- package/examples/LineTool.html +76 -0
- package/examples/ModelClipperTool.html +274 -6
- package/examples/PencilTool.html +73 -0
- package/examples/ToggleCamera.html +310 -0
- package/examples/index.html +45 -1
- package/package.json +1 -1
|
@@ -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
|
+
|
|
@@ -0,0 +1,310 @@
|
|
|
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
|
+
.camera-info {
|
|
11
|
+
margin-top: 15px;
|
|
12
|
+
padding: 12px;
|
|
13
|
+
background: rgba(102, 126, 234, 0.1);
|
|
14
|
+
border-radius: 6px;
|
|
15
|
+
border-left: 3px solid #667eea;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.camera-info-label {
|
|
19
|
+
font-size: 12px;
|
|
20
|
+
color: #666;
|
|
21
|
+
margin-bottom: 4px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.camera-info-value {
|
|
25
|
+
font-size: 16px;
|
|
26
|
+
font-weight: 600;
|
|
27
|
+
color: #667eea;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.camera-params {
|
|
31
|
+
margin-top: 15px;
|
|
32
|
+
padding: 12px;
|
|
33
|
+
background: rgba(255, 255, 255, 0.05);
|
|
34
|
+
border-radius: 6px;
|
|
35
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.camera-param-group {
|
|
39
|
+
margin-bottom: 12px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.camera-param-group:last-child {
|
|
43
|
+
margin-bottom: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.camera-param-label {
|
|
47
|
+
display: flex;
|
|
48
|
+
justify-content: space-between;
|
|
49
|
+
align-items: center;
|
|
50
|
+
margin-bottom: 6px;
|
|
51
|
+
font-size: 12px;
|
|
52
|
+
color: rgba(255, 255, 255, 0.8);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.camera-param-value {
|
|
56
|
+
color: #4CAF50;
|
|
57
|
+
font-weight: 600;
|
|
58
|
+
font-size: 13px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.camera-param-input {
|
|
62
|
+
width: 100%;
|
|
63
|
+
height: 6px;
|
|
64
|
+
border-radius: 3px;
|
|
65
|
+
background: rgba(255, 255, 255, 0.2);
|
|
66
|
+
outline: none;
|
|
67
|
+
-webkit-appearance: none;
|
|
68
|
+
appearance: none;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.camera-param-input::-webkit-slider-thumb {
|
|
72
|
+
-webkit-appearance: none;
|
|
73
|
+
appearance: none;
|
|
74
|
+
width: 16px;
|
|
75
|
+
height: 16px;
|
|
76
|
+
border-radius: 50%;
|
|
77
|
+
background: #4CAF50;
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
80
|
+
transition: background 0.2s;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.camera-param-input::-webkit-slider-thumb:hover {
|
|
84
|
+
background: #45a049;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.camera-param-input::-moz-range-thumb {
|
|
88
|
+
width: 16px;
|
|
89
|
+
height: 16px;
|
|
90
|
+
border-radius: 50%;
|
|
91
|
+
background: #4CAF50;
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
border: none;
|
|
94
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
95
|
+
transition: background 0.2s;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.camera-param-input::-moz-range-thumb:hover {
|
|
99
|
+
background: #45a049;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.camera-type-badge {
|
|
103
|
+
display: inline-block;
|
|
104
|
+
padding: 4px 10px;
|
|
105
|
+
border-radius: 12px;
|
|
106
|
+
font-size: 12px;
|
|
107
|
+
font-weight: 600;
|
|
108
|
+
text-transform: uppercase;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.camera-type-perspective {
|
|
112
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
113
|
+
color: white;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.camera-type-orthographic {
|
|
117
|
+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
118
|
+
color: white;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.info-text {
|
|
122
|
+
font-size: 12px;
|
|
123
|
+
color: rgba(255, 255, 255, 0.6);
|
|
124
|
+
line-height: 1.6;
|
|
125
|
+
margin-top: 10px;
|
|
126
|
+
}
|
|
127
|
+
</style>
|
|
128
|
+
</head>
|
|
129
|
+
|
|
130
|
+
<body>
|
|
131
|
+
<div id="container"></div>
|
|
132
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
133
|
+
<div class="demo">
|
|
134
|
+
<h2>📷 相机切换演示</h2>
|
|
135
|
+
<p>在透视相机和正交相机之间切换，体验不同的视图效果。</p>
|
|
136
|
+
|
|
137
|
+
<div class="control-group">
|
|
138
|
+
<button onclick="switchToPerspective()">切换到透视相机</button>
|
|
139
|
+
<button onclick="switchToOrthographic()" class="secondary">切换到正交相机</button>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<div class="camera-info">
|
|
143
|
+
<div class="camera-info-label">当前相机类型</div>
|
|
144
|
+
<div class="camera-info-value" id="cameraType">透视相机</div>
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
<div class="camera-params" id="cameraParams">
|
|
148
|
+
<!-- 动态生成的相机参数控制 -->
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<div class="info-text">
|
|
152
|
+
<strong>透视相机：</strong>模拟人眼视角，近大远小，适合查看整体场景。<br>
|
|
153
|
+
<strong>正交相机：</strong>无透视变形，平行投影，适合查看精确尺寸。
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<script type="module">
|
|
158
|
+
|
|
159
|
+
import { Viewer } from '../../index.ts'
|
|
160
|
+
|
|
161
|
+
const container = document.getElementById('container')
|
|
162
|
+
|
|
163
|
+
// 实例化 Viewer 对象
|
|
164
|
+
const viewer = new Viewer(container, {
|
|
165
|
+
style: {
|
|
166
|
+
type: 1
|
|
167
|
+
},
|
|
168
|
+
load: {
|
|
169
|
+
cache: {
|
|
170
|
+
enabled: false,
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
gui: {
|
|
174
|
+
enabled: true
|
|
175
|
+
}
|
|
176
|
+
})
|
|
177
|
+
|
|
178
|
+
// 加载测试模型
|
|
179
|
+
try {
|
|
180
|
+
await viewer.loadZipAsync('./dgz/样板间.dgz')
|
|
181
|
+
console.log('模型加载成功')
|
|
182
|
+
} catch (error) {
|
|
183
|
+
console.error('模型加载失败:', error)
|
|
184
|
+
alert('无法加载测试模型，请确保模型文件存在')
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
// 更新相机信息显示
|
|
188
|
+
function updateCameraInfo() {
|
|
189
|
+
const isPerspective = viewer.isPerspective();
|
|
190
|
+
const cameraTypeElement = document.getElementById('cameraType');
|
|
191
|
+
const cameraParamsElement = document.getElementById('cameraParams');
|
|
192
|
+
|
|
193
|
+
if (cameraTypeElement) {
|
|
194
|
+
if (isPerspective) {
|
|
195
|
+
cameraTypeElement.innerHTML = '<span class="camera-type-badge camera-type-perspective">透视相机</span>';
|
|
196
|
+
} else {
|
|
197
|
+
cameraTypeElement.innerHTML = '<span class="camera-type-badge camera-type-orthographic">正交相机</span>';
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
// 更新相机参数控制
|
|
202
|
+
if (cameraParamsElement) {
|
|
203
|
+
if (isPerspective) {
|
|
204
|
+
const fov = viewer.camera.fov || 45;
|
|
205
|
+
cameraParamsElement.innerHTML = `
|
|
206
|
+
<div class="camera-param-group">
|
|
207
|
+
<div class="camera-param-label">
|
|
208
|
+
<span>视野角度 (FOV)</span>
|
|
209
|
+
<span class="camera-param-value" id="fovValue">${fov}°</span>
|
|
210
|
+
</div>
|
|
211
|
+
<input
|
|
212
|
+
type="range"
|
|
213
|
+
class="camera-param-input"
|
|
214
|
+
min="10"
|
|
215
|
+
max="120"
|
|
216
|
+
step="1"
|
|
217
|
+
value="${fov}"
|
|
218
|
+
oninput="updateFOV(this.value)"
|
|
219
|
+
/>
|
|
220
|
+
</div>
|
|
221
|
+
`;
|
|
222
|
+
} else {
|
|
223
|
+
// 计算当前 viewSize（基于 orthographicCamera 的 zoom）
|
|
224
|
+
const orthoCamera = viewer.orthographicCamera;
|
|
225
|
+
const zoom = orthoCamera ? orthoCamera.zoom : 1;
|
|
226
|
+
// 估算 viewSize（实际值需要根据 boxSize 计算）
|
|
227
|
+
const estimatedViewSize = 10 / zoom;
|
|
228
|
+
|
|
229
|
+
cameraParamsElement.innerHTML = `
|
|
230
|
+
<div class="camera-param-group">
|
|
231
|
+
<div class="camera-param-label">
|
|
232
|
+
<span>视图大小 (View Size)</span>
|
|
233
|
+
<span class="camera-param-value" id="viewSizeValue">${estimatedViewSize.toFixed(1)}</span>
|
|
234
|
+
</div>
|
|
235
|
+
<input
|
|
236
|
+
type="range"
|
|
237
|
+
class="camera-param-input"
|
|
238
|
+
min="1"
|
|
239
|
+
max="50"
|
|
240
|
+
step="0.5"
|
|
241
|
+
value="${estimatedViewSize}"
|
|
242
|
+
oninput="updateViewSize(this.value)"
|
|
243
|
+
/>
|
|
244
|
+
</div>
|
|
245
|
+
`;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
// 切换到透视相机
|
|
251
|
+
function switchToPerspective() {
|
|
252
|
+
viewer.toggleCamera('perspective');
|
|
253
|
+
updateCameraInfo();
|
|
254
|
+
console.log('已切换到透视相机');
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
// 切换到正交相机
|
|
258
|
+
function switchToOrthographic() {
|
|
259
|
+
viewer.toggleCamera('orthographic');
|
|
260
|
+
updateCameraInfo();
|
|
261
|
+
console.log('已切换到正交相机');
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
// 更新 FOV（仅透视相机）
|
|
265
|
+
function updateFOV(value) {
|
|
266
|
+
if (!viewer.isPerspective()) return;
|
|
267
|
+
|
|
268
|
+
const fov = parseFloat(value);
|
|
269
|
+
viewer.camera.fov = fov;
|
|
270
|
+
viewer.camera.updateProjectionMatrix();
|
|
271
|
+
|
|
272
|
+
const fovValueElement = document.getElementById('fovValue');
|
|
273
|
+
if (fovValueElement) {
|
|
274
|
+
fovValueElement.textContent = `${fov}°`;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
// 更新 ViewSize（仅正交相机）
|
|
279
|
+
function updateViewSize(value) {
|
|
280
|
+
if (viewer.isPerspective()) return;
|
|
281
|
+
|
|
282
|
+
const viewSize = parseFloat(value);
|
|
283
|
+
viewer.updateOrthographicCamera(viewSize);
|
|
284
|
+
|
|
285
|
+
const viewSizeValueElement = document.getElementById('viewSizeValue');
|
|
286
|
+
if (viewSizeValueElement) {
|
|
287
|
+
viewSizeValueElement.textContent = viewSize.toFixed(1);
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
// 暴露函数到全局
|
|
292
|
+
window.viewer = viewer;
|
|
293
|
+
window.switchToPerspective = switchToPerspective;
|
|
294
|
+
window.switchToOrthographic = switchToOrthographic;
|
|
295
|
+
window.updateFOV = updateFOV;
|
|
296
|
+
window.updateViewSize = updateViewSize;
|
|
297
|
+
|
|
298
|
+
// 初始更新一次
|
|
299
|
+
updateCameraInfo();
|
|
300
|
+
|
|
301
|
+
// 监听窗口大小变化，更新相机信息
|
|
302
|
+
window.addEventListener('resize', () => {
|
|
303
|
+
setTimeout(updateCameraInfo, 100);
|
|
304
|
+
});
|
|
305
|
+
</script>
|
|
306
|
+
|
|
307
|
+
</body>
|
|
308
|
+
|
|
309
|
+
</html>
|
|
310
|
+
|
package/examples/index.html
CHANGED
|
@@ -280,7 +280,7 @@
|
|
|
280
280
|
<body>
|
|
281
281
|
<div class="container">
|
|
282
282
|
<header>
|
|
283
|
-
<h1>🚀
|
|
283
|
+
<h1>🚀 model-viewer</h1>
|
|
284
284
|
<p>3D 模型查看器示例导航</p>
|
|
285
285
|
</header>
|
|
286
286
|
|
|
@@ -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
|
|
|
@@ -390,6 +423,17 @@
|
|
|
390
423
|
<a href="PositionCameraTool.html" class="link-button">查看示例 →</a>
|
|
391
424
|
</div>
|
|
392
425
|
|
|
426
|
+
<div class="example-card" data-name="相机切换" data-desc="透视正交切换">
|
|
427
|
+
<h3><span class="icon">📷</span>相机切换</h3>
|
|
428
|
+
<div class="description">演示在透视相机和正交相机之间切换。透视相机模拟人眼视角，正交相机无透视变形，适合查看精确尺寸。</div>
|
|
429
|
+
<div class="tags">
|
|
430
|
+
<span class="tag tag-tool">相机工具</span>
|
|
431
|
+
<span class="tag tag-feature">透视相机</span>
|
|
432
|
+
<span class="tag tag-feature">正交相机</span>
|
|
433
|
+
</div>
|
|
434
|
+
<a href="ToggleCamera.html" class="link-button">查看示例 →</a>
|
|
435
|
+
</div>
|
|
436
|
+
|
|
393
437
|
<div class="example-card" data-name="框选放大" data-desc="选择缩放">
|
|
394
438
|
<h3><span class="icon">🔍</span>框选放大工具</h3>
|
|
395
439
|
<div class="description">演示如何使用框选工具来放大查看模型的特定区域。框选范围越小，放大倍数越大，适合查看细节。</div>
|