bc-model-viewer 1.6.94 → 1.7.2
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.
|
@@ -0,0 +1,231 @@
|
|
|
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
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
margin: 0;
|
|
11
|
+
position: relative;
|
|
12
|
+
font-family: Arial, sans-serif;
|
|
13
|
+
font-size: 14px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.demo-controls {
|
|
17
|
+
position: absolute;
|
|
18
|
+
z-index: 1;
|
|
19
|
+
top: 0;
|
|
20
|
+
left: 0;
|
|
21
|
+
padding: 10px;
|
|
22
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
23
|
+
border-radius: 4px;
|
|
24
|
+
margin: 10px;
|
|
25
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h2 {
|
|
29
|
+
margin: 0 0 10px 0;
|
|
30
|
+
font-size: 16px;
|
|
31
|
+
color: #333;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.control-group {
|
|
35
|
+
margin-bottom: 8px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.control-group label {
|
|
39
|
+
display: inline-block;
|
|
40
|
+
margin-right: 5px;
|
|
41
|
+
font-size: 13px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
button {
|
|
45
|
+
padding: 4px 8px;
|
|
46
|
+
margin-right: 5px;
|
|
47
|
+
margin-bottom: 5px;
|
|
48
|
+
background-color: #4CAF50;
|
|
49
|
+
color: white;
|
|
50
|
+
border: none;
|
|
51
|
+
border-radius: 3px;
|
|
52
|
+
cursor: pointer;
|
|
53
|
+
font-size: 12px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
button:hover {
|
|
57
|
+
background-color: #45a049;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
input[type="color"] {
|
|
61
|
+
width: 40px;
|
|
62
|
+
height: 22px;
|
|
63
|
+
border: 1px solid #ddd;
|
|
64
|
+
border-radius: 3px;
|
|
65
|
+
margin-right: 5px;
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
select {
|
|
70
|
+
padding: 2px 4px;
|
|
71
|
+
font-size: 12px;
|
|
72
|
+
border: 1px solid #ddd;
|
|
73
|
+
border-radius: 3px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.separator {
|
|
77
|
+
margin: 8px 0;
|
|
78
|
+
border-top: 1px solid #eee;
|
|
79
|
+
}
|
|
80
|
+
</style>
|
|
81
|
+
</head>
|
|
82
|
+
|
|
83
|
+
<body>
|
|
84
|
+
<div id="container"></div>
|
|
85
|
+
<div class="demo-controls">
|
|
86
|
+
<h2>样式切换演示</h2>
|
|
87
|
+
|
|
88
|
+
<div class="control-group">
|
|
89
|
+
<label>风格：</label>
|
|
90
|
+
<button onclick="changeToPresetStyle(0)">预设风格</button>
|
|
91
|
+
<button onclick="changeToPresetStyle(1)">环境光渲染</button>
|
|
92
|
+
<button onclick="changeToPresetStyle(4)">X射线显示</button>
|
|
93
|
+
<button onclick="changeToPresetStyle(3)">单色显示</button>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="control-group">
|
|
97
|
+
<label>边线控制：</label>
|
|
98
|
+
<button onclick="toggleEdgeVisibility()">切换边线</button>
|
|
99
|
+
<button onclick="showEdge()">显示边线</button>
|
|
100
|
+
<button onclick="hideEdge()">隐藏边线</button>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<div class="control-group">
|
|
104
|
+
<label>纯色背景：</label>
|
|
105
|
+
<input type="color" id="solidColor" value="#f0f0f0">
|
|
106
|
+
<button onclick="setSolidBackground()">设置</button>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div class="control-group">
|
|
110
|
+
<label>渐变背景：</label>
|
|
111
|
+
<input type="color" id="topColor" value="#1a1a2e">
|
|
112
|
+
<input type="color" id="middleColor" value="#16213e">
|
|
113
|
+
<input type="color" id="bottomColor" value="#0f3460">
|
|
114
|
+
<select id="gradientDirection">
|
|
115
|
+
<option value="vertical">垂直</option>
|
|
116
|
+
<option value="horizontal">水平</option>
|
|
117
|
+
</select>
|
|
118
|
+
<button onclick="setGradientBackground()">设置渐变</button>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<div class="separator"></div>
|
|
122
|
+
|
|
123
|
+
<div class="control-group">
|
|
124
|
+
<label>边缘颜色：</label>
|
|
125
|
+
<input type="color" id="edgeColor" value="#000000">
|
|
126
|
+
<button onclick="setEdgeColor()">设置</button>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<script type="module">
|
|
131
|
+
|
|
132
|
+
import { Viewer } from '../../index.ts'
|
|
133
|
+
|
|
134
|
+
const container = document.getElementById('container')
|
|
135
|
+
|
|
136
|
+
// 实例化 Viewer 对象
|
|
137
|
+
const viewer = new Viewer(container)
|
|
138
|
+
|
|
139
|
+
// 加载测试模型
|
|
140
|
+
try {
|
|
141
|
+
await viewer.loadZipAsync('../../assets/new.dgz')
|
|
142
|
+
console.log('模型加载成功')
|
|
143
|
+
} catch (error) {
|
|
144
|
+
console.error('模型加载失败:', error)
|
|
145
|
+
// 尝试加载备用模型或提示用户
|
|
146
|
+
alert('无法加载测试模型，请确保模型文件存在')
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
// 获取样式管理器实例
|
|
150
|
+
const { styleManager } = viewer;
|
|
151
|
+
|
|
152
|
+
// 切换到预设样式
|
|
153
|
+
function changeToPresetStyle(styleIndex) {
|
|
154
|
+
console.log(`切换到预设样式 ${styleIndex}`);
|
|
155
|
+
styleManager.changeStyle(styleIndex, (style) => {
|
|
156
|
+
console.log('样式应用成功:', style);
|
|
157
|
+
});
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
// 设置纯色背景
|
|
161
|
+
function setSolidBackground() {
|
|
162
|
+
const colorInput = document.getElementById('solidColor');
|
|
163
|
+
const color = colorInput ? colorInput.value : '#f0f0f0';
|
|
164
|
+
console.log(`设置纯色背景: ${color}`);
|
|
165
|
+
styleManager.setSceneBackground(color);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
// 设置渐变背景
|
|
169
|
+
function setGradientBackground() {
|
|
170
|
+
const topColor = document.getElementById('topColor')?.value || '#1a1a2e';
|
|
171
|
+
const middleColor = document.getElementById('middleColor')?.value || '#16213e';
|
|
172
|
+
const bottomColor = document.getElementById('bottomColor')?.value || '#0f3460';
|
|
173
|
+
const direction = document.getElementById('gradientDirection')?.value || 'vertical';
|
|
174
|
+
|
|
175
|
+
const gradientConfig = {
|
|
176
|
+
color: topColor,
|
|
177
|
+
middleColor: middleColor,
|
|
178
|
+
gradientColor: bottomColor,
|
|
179
|
+
direction: direction
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
console.log('设置渐变背景:', gradientConfig);
|
|
183
|
+
styleManager.setSceneBackground(gradientConfig);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
// 设置边缘颜色
|
|
187
|
+
function setEdgeColor() {
|
|
188
|
+
const colorInput = document.getElementById('edgeColor');
|
|
189
|
+
const color = colorInput ? colorInput.value : '#000000';
|
|
190
|
+
console.log(`设置边缘颜色: ${color}`);
|
|
191
|
+
styleManager.setEdgeColor(color);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
// 将函数暴露到全局作用域，以便HTML可以访问
|
|
195
|
+
window.changeToPresetStyle = changeToPresetStyle;
|
|
196
|
+
window.setSolidBackground = setSolidBackground;
|
|
197
|
+
window.setGradientBackground = setGradientBackground;
|
|
198
|
+
window.setEdgeColor = setEdgeColor;
|
|
199
|
+
|
|
200
|
+
// 边线控制方法
|
|
201
|
+
function toggleEdgeVisibility() {
|
|
202
|
+
console.log('切换边线显隐状态');
|
|
203
|
+
styleManager.toggleEdgeVisibility();
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
function showEdge() {
|
|
207
|
+
console.log('显示边线');
|
|
208
|
+
styleManager.showEdge();
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
function hideEdge() {
|
|
212
|
+
console.log('隐藏边线');
|
|
213
|
+
styleManager.hideEdge();
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
// 暴露边线控制方法到全局
|
|
217
|
+
window.toggleEdgeVisibility = toggleEdgeVisibility;
|
|
218
|
+
window.showEdge = showEdge;
|
|
219
|
+
window.hideEdge = hideEdge;
|
|
220
|
+
|
|
221
|
+
// 暴露 viewer 实例到 window 对象，方便调试
|
|
222
|
+
window.viewer = viewer;
|
|
223
|
+
|
|
224
|
+
// 暴露到全局以便调试
|
|
225
|
+
window.viewer = viewer;
|
|
226
|
+
window.styleManager = styleManager;
|
|
227
|
+
</script>
|
|
228
|
+
|
|
229
|
+
</body>
|
|
230
|
+
|
|
231
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bc-model-viewer",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.2",
|
|
4
4
|
"main": "./dist/bc-model-viewer.min.js",
|
|
5
5
|
"module": "./dist/bc-model-viewer.min.js",
|
|
6
6
|
"description": "A model viewer",
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
"three": "^0.171.0"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"tweakpane": "^4.0.5",
|
|
12
11
|
"lodash-es": "^4.17.21",
|
|
13
12
|
"three": "^0.171.0"
|
|
14
13
|
}
|