bc-model-viewer 1.7.14 → 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.
- package/dist/bc-model-viewer.min.js +1 -1
- package/examples/AreaMeasureTool.html +19 -26
- package/examples/BasicModelLoad.html +66 -0
- package/examples/ChangeStyleDemo.html +3 -74
- package/examples/DistanceMeasureTool.html +19 -26
- package/examples/ExplosionDiagram.html +16 -21
- package/examples/FaceDistanceMeasureTool.html +19 -26
- package/examples/HUDLabelTool.html +19 -35
- package/examples/ModelClipperTool.html +15 -23
- package/examples/PositionCameraTool.html +12 -21
- package/examples/ScenePageDemo.html +20 -49
- package/examples/SelectionZoomTool.html +12 -22
- package/examples/common-styles.css +173 -0
- package/examples/index.html +663 -36
- package/package.json +1 -1
- package/examples/ScenePageDemo.vue +0 -246
- package/examples/ScenePageDemoVue.html +0 -22
|
@@ -4,37 +4,10 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>场景页面管理器演示 -
|
|
7
|
+
<title>场景页面管理器演示 - Bc-model-viewer</title>
|
|
8
|
+
<link rel="stylesheet" href="common-styles.css">
|
|
8
9
|
<style>
|
|
9
|
-
|
|
10
|
-
margin: 0;
|
|
11
|
-
position: relative;
|
|
12
|
-
font-family: Arial, sans-serif;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
#container {
|
|
16
|
-
width: 100vw;
|
|
17
|
-
height: 100vh;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.control-panel {
|
|
21
|
-
position: absolute;
|
|
22
|
-
top: 20px;
|
|
23
|
-
left: 20px;
|
|
24
|
-
z-index: 100;
|
|
25
|
-
background-color: rgba(255, 255, 255, 0.9);
|
|
26
|
-
padding: 20px;
|
|
27
|
-
border-radius: 8px;
|
|
28
|
-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
29
|
-
max-width: 300px;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
h2 {
|
|
33
|
-
margin-top: 0;
|
|
34
|
-
color: #333;
|
|
35
|
-
font-size: 18px;
|
|
36
|
-
}
|
|
37
|
-
|
|
10
|
+
/* ScenePageDemo 特殊样式 */
|
|
38
11
|
.scene-buttons {
|
|
39
12
|
display: flex;
|
|
40
13
|
flex-direction: column;
|
|
@@ -42,24 +15,11 @@
|
|
|
42
15
|
margin-bottom: 20px;
|
|
43
16
|
}
|
|
44
17
|
|
|
45
|
-
button {
|
|
46
|
-
padding: 8px 16px;
|
|
47
|
-
background-color: #4CAF50;
|
|
48
|
-
color: white;
|
|
49
|
-
border: none;
|
|
50
|
-
border-radius: 4px;
|
|
51
|
-
cursor: pointer;
|
|
52
|
-
transition: background-color 0.3s;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
button:hover {
|
|
56
|
-
background-color: #45a049;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
18
|
.current-scene {
|
|
60
19
|
margin-top: 15px;
|
|
61
20
|
font-weight: bold;
|
|
62
21
|
color: #2c3e50;
|
|
22
|
+
font-size: 14px;
|
|
63
23
|
}
|
|
64
24
|
|
|
65
25
|
.info {
|
|
@@ -68,6 +28,17 @@
|
|
|
68
28
|
margin-top: 15px;
|
|
69
29
|
}
|
|
70
30
|
|
|
31
|
+
#sceneInfo {
|
|
32
|
+
margin-top: 15px;
|
|
33
|
+
padding: 10px;
|
|
34
|
+
background-color: #f5f5f5;
|
|
35
|
+
border-radius: 6px;
|
|
36
|
+
max-height: 200px;
|
|
37
|
+
overflow-y: auto;
|
|
38
|
+
font-size: 12px;
|
|
39
|
+
line-height: 1.6;
|
|
40
|
+
}
|
|
41
|
+
|
|
71
42
|
.event-log {
|
|
72
43
|
margin-top: 15px;
|
|
73
44
|
padding: 10px;
|
|
@@ -109,9 +80,9 @@
|
|
|
109
80
|
|
|
110
81
|
<body>
|
|
111
82
|
<div id="container"></div>
|
|
112
|
-
|
|
83
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
113
84
|
<div class="control-panel">
|
|
114
|
-
<h2
|
|
85
|
+
<h2>🎭 场景页面管理器演示</h2>
|
|
115
86
|
<div class="scene-buttons" id="modelScenesContainer">
|
|
116
87
|
<!-- 模型中的场景按钮将在这里动态生成 -->
|
|
117
88
|
</div>
|
|
@@ -119,9 +90,9 @@
|
|
|
119
90
|
style="margin-top: 15px; padding: 10px; background-color: #f5f5f5; border-radius: 4px; max-height: 200px; overflow-y: auto;">
|
|
120
91
|
场景信息将在这里显示
|
|
121
92
|
</div>
|
|
122
|
-
<div>
|
|
93
|
+
<div class="control-group">
|
|
123
94
|
<label>
|
|
124
|
-
<input type="checkbox" id="transition" checked>
|
|
95
|
+
<input type="checkbox" id="transition" checked style="margin-right: 8px;">
|
|
125
96
|
启用过渡动画
|
|
126
97
|
</label>
|
|
127
98
|
</div>
|
|
@@ -131,7 +102,7 @@
|
|
|
131
102
|
<div class="info">
|
|
132
103
|
点击按钮切换到不同预设场景，每个场景包含不同的相机位置、目标点和可能的图层可见性设置。
|
|
133
104
|
</div>
|
|
134
|
-
<h3 style="margin-top: 20px; font-size: 14px; color: #333;">事件日志</h3>
|
|
105
|
+
<h3 style="margin-top: 20px; font-size: 14px; color: #333; margin-bottom: 10px;">事件日志</h3>
|
|
135
106
|
<div class="event-log" id="eventLog">
|
|
136
107
|
<!-- 事件日志将在这里动态显示 -->
|
|
137
108
|
事件日志将在此显示...
|
|
@@ -1,34 +1,24 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
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
|
|
8
|
-
<
|
|
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
|
-
|
|
12
|
+
<div id="container"></div>
|
|
13
|
+
<a href="index.html" class="back-button">返回示例列表</a>
|
|
25
14
|
<div class="demo">
|
|
26
|
-
<h2
|
|
27
|
-
<p
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
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>
|
|
32
22
|
</div>
|
|
33
23
|
|
|
34
24
|
<script type="module">
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
/** Bc-model-viewer 示例统一样式 */
|
|
2
|
+
|
|
3
|
+
/* ===== 基础样式 ===== */
|
|
4
|
+
* { box-sizing: border-box; }
|
|
5
|
+
body {
|
|
6
|
+
margin: 0; padding: 0; position: relative;
|
|
7
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
|
|
8
|
+
font-size: 14px; line-height: 1.5; color: #333; background: #000; overflow: hidden;
|
|
9
|
+
}
|
|
10
|
+
#container { width: 100vw; height: 100vh; }
|
|
11
|
+
|
|
12
|
+
/* ===== 控制面板样式 ===== */
|
|
13
|
+
.demo, .demo-controls, .control-panel {
|
|
14
|
+
position: absolute; top: 20px; left: 20px; z-index: 1000;
|
|
15
|
+
background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
|
|
16
|
+
border-radius: 12px; padding: 20px;
|
|
17
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
18
|
+
min-width: 280px; max-width: 400px; transition: all 0.3s ease;
|
|
19
|
+
}
|
|
20
|
+
.demo:hover, .demo-controls:hover, .control-panel:hover {
|
|
21
|
+
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* ===== 标题样式 ===== */
|
|
25
|
+
.demo h2, .demo-controls h2, .control-panel h2 {
|
|
26
|
+
margin: 0 0 15px 0; font-size: 18px; font-weight: 600; color: #2c3e50;
|
|
27
|
+
padding-bottom: 10px; border-bottom: 2px solid #e0e0e0;
|
|
28
|
+
}
|
|
29
|
+
.demo h3, .demo-controls h3, .control-panel h3 {
|
|
30
|
+
margin: 15px 0 10px 0; font-size: 16px; font-weight: 600; color: #34495e;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* ===== 文本样式 ===== */
|
|
34
|
+
.demo p, .demo-controls p, .control-panel p {
|
|
35
|
+
margin: 0 0 15px 0; color: #666; font-size: 13px; line-height: 1.6;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* ===== 按钮样式 ===== */
|
|
39
|
+
.demo button, .demo-controls button, .control-panel button {
|
|
40
|
+
padding: 8px 16px; margin: 4px 6px 4px 0; min-width: 100px;
|
|
41
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
42
|
+
color: white; border: none; border-radius: 6px; cursor: pointer;
|
|
43
|
+
font-size: 13px; font-weight: 500; transition: all 0.2s ease;
|
|
44
|
+
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
|
|
45
|
+
}
|
|
46
|
+
.demo button:hover, .demo-controls button:hover, .control-panel button:hover {
|
|
47
|
+
transform: translateY(-2px);
|
|
48
|
+
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
|
|
49
|
+
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
|
|
50
|
+
}
|
|
51
|
+
.demo button:active, .demo-controls button:active, .control-panel button:active {
|
|
52
|
+
transform: translateY(0); box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
|
|
53
|
+
}
|
|
54
|
+
.demo button:focus, .demo-controls button:focus, .control-panel button:focus {
|
|
55
|
+
outline: 2px solid rgba(102, 126, 234, 0.5); outline-offset: 2px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* 次要按钮样式 */
|
|
59
|
+
.demo button.secondary, .demo-controls button.secondary, .control-panel button.secondary {
|
|
60
|
+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
61
|
+
box-shadow: 0 2px 4px rgba(245, 87, 108, 0.2);
|
|
62
|
+
}
|
|
63
|
+
.demo button.secondary:hover, .demo-controls button.secondary:hover, .control-panel button.secondary:hover {
|
|
64
|
+
box-shadow: 0 4px 8px rgba(245, 87, 108, 0.3);
|
|
65
|
+
background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* 危险按钮样式 */
|
|
69
|
+
.demo button.danger, .demo-controls button.danger, .control-panel button.danger {
|
|
70
|
+
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
|
71
|
+
box-shadow: 0 2px 4px rgba(250, 112, 154, 0.2);
|
|
72
|
+
}
|
|
73
|
+
.demo button.danger:hover, .demo-controls button.danger:hover, .control-panel button.danger:hover {
|
|
74
|
+
box-shadow: 0 4px 8px rgba(250, 112, 154, 0.3);
|
|
75
|
+
background: linear-gradient(135deg, #fee140 0%, #fa709a 100%);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* ===== 控制组样式 ===== */
|
|
79
|
+
.control-group {
|
|
80
|
+
margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #e8e8e8;
|
|
81
|
+
}
|
|
82
|
+
.control-group:last-child {
|
|
83
|
+
border-bottom: none; margin-bottom: 0; padding-bottom: 0;
|
|
84
|
+
}
|
|
85
|
+
.control-group label {
|
|
86
|
+
display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: #555;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* ===== 输入框样式 ===== */
|
|
90
|
+
.demo input[type="text"], .demo input[type="number"],
|
|
91
|
+
.demo-controls input[type="text"], .demo-controls input[type="number"],
|
|
92
|
+
.control-panel input[type="text"], .control-panel input[type="number"] {
|
|
93
|
+
width: 100%; padding: 8px 12px; margin-bottom: 10px;
|
|
94
|
+
border: 1px solid #ddd; border-radius: 6px; font-size: 13px; transition: all 0.2s ease;
|
|
95
|
+
}
|
|
96
|
+
.demo input[type="text"]:focus, .demo input[type="number"]:focus,
|
|
97
|
+
.demo-controls input[type="text"]:focus, .demo-controls input[type="number"]:focus,
|
|
98
|
+
.control-panel input[type="text"]:focus, .control-panel input[type="number"]:focus {
|
|
99
|
+
outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.demo input[type="color"], .demo-controls input[type="color"], .control-panel input[type="color"] {
|
|
103
|
+
width: 50px; height: 36px; border: 2px solid #ddd; border-radius: 6px;
|
|
104
|
+
cursor: pointer; margin-right: 8px; vertical-align: middle; transition: all 0.2s ease;
|
|
105
|
+
}
|
|
106
|
+
.demo input[type="color"]:hover, .demo-controls input[type="color"]:hover, .control-panel input[type="color"]:hover {
|
|
107
|
+
border-color: #667eea; transform: scale(1.05);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.demo input[type="range"], .demo-controls input[type="range"], .control-panel input[type="range"] {
|
|
111
|
+
width: 100%; margin: 10px 0; cursor: pointer;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* ===== 选择框样式 ===== */
|
|
115
|
+
.demo select, .demo-controls select, .control-panel select {
|
|
116
|
+
padding: 8px 12px; margin: 0 8px 0 0;
|
|
117
|
+
border: 1px solid #ddd; border-radius: 6px; font-size: 13px;
|
|
118
|
+
background: white; cursor: pointer; transition: all 0.2s ease;
|
|
119
|
+
}
|
|
120
|
+
.demo select:focus, .demo-controls select:focus, .control-panel select:focus {
|
|
121
|
+
outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* ===== 分隔线样式 ===== */
|
|
125
|
+
.separator { margin: 15px 0; border-top: 1px solid #e8e8e8; border-bottom: none; }
|
|
126
|
+
|
|
127
|
+
/* ===== 响应式设计 ===== */
|
|
128
|
+
@media (max-width: 768px) {
|
|
129
|
+
.demo, .demo-controls, .control-panel {
|
|
130
|
+
top: 10px; left: 10px; right: 10px; max-width: none; padding: 15px;
|
|
131
|
+
}
|
|
132
|
+
.demo h2, .demo-controls h2, .control-panel h2 { font-size: 16px; }
|
|
133
|
+
.demo button, .demo-controls button, .control-panel button { width: 100%; margin: 4px 0; }
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@media (max-width: 480px) {
|
|
137
|
+
.demo, .demo-controls, .control-panel { padding: 12px; }
|
|
138
|
+
.demo button, .demo-controls button, .control-panel button {
|
|
139
|
+
font-size: 12px; padding: 6px 12px;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* ===== 工具提示样式 ===== */
|
|
144
|
+
.tooltip { position: relative; display: inline-block; }
|
|
145
|
+
.tooltip .tooltiptext {
|
|
146
|
+
visibility: hidden; width: 120px; background-color: #555; color: #fff;
|
|
147
|
+
text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1;
|
|
148
|
+
bottom: 125%; left: 50%; margin-left: -60px; opacity: 0;
|
|
149
|
+
transition: opacity 0.3s; font-size: 12px;
|
|
150
|
+
}
|
|
151
|
+
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
|
|
152
|
+
|
|
153
|
+
/* ===== 加载状态样式 ===== */
|
|
154
|
+
.loading {
|
|
155
|
+
display: inline-block; width: 16px; height: 16px;
|
|
156
|
+
border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
|
|
157
|
+
border-top-color: white; animation: spin 0.8s linear infinite;
|
|
158
|
+
}
|
|
159
|
+
@keyframes spin { to { transform: rotate(360deg); } }
|
|
160
|
+
|
|
161
|
+
/* ===== 返回按钮样式 ===== */
|
|
162
|
+
.back-button {
|
|
163
|
+
position: absolute; top: 20px; right: 20px; z-index: 1001;
|
|
164
|
+
padding: 10px 20px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px);
|
|
165
|
+
border: none; border-radius: 8px; color: #667eea; font-size: 14px; font-weight: 500;
|
|
166
|
+
cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
|
|
167
|
+
gap: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.2s ease;
|
|
168
|
+
}
|
|
169
|
+
.back-button:hover {
|
|
170
|
+
background: rgba(255, 255, 255, 1); transform: translateY(-2px);
|
|
171
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
172
|
+
}
|
|
173
|
+
.back-button::before { content: '←'; font-size: 16px; }
|