forked from zhangti0708/cesium-tilesetEffect
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (83 loc) · 2.65 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模型特效</title>
<link href="src/Cesium/Widgets/widgets.css" rel="stylesheet" />
<script src="src/Cesium/Cesium.js"></script>
<script src="src/dat.gui.min.js"></script>
<script src="src/cesium-tilesetEffect.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#viewer-container {
width: 100%;
height: 100%;
overflow: hidden;
}
#btn {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="viewer-container"></div>
<script>
// init
function initPage() {
// 切换自己的token
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYTQ2ZjdjNS1jM2E0LTQ1M2EtOWM0My1mODMzNzY3YjYzY2YiLCJpZCI6MjkzMjcsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTE5NDIzNjB9.RzKlVTVDTQ9r7cqCo-PDydgUh8Frgw0Erul_BVxiS9c';
// 初始化
let viewer = new Cesium.Viewer("viewer-container", {
infoBox: false,
shouldAnimate: true,
vrButton: true,
geocoder: false,
homeButton: false,
sceneModePicker: false,
baseLayerPicker: true,
navigationHelpButton: false,
animation: false,
timeline: false,
fullscreenButton: false,
});
// 特效 默认为开启
Cesium.TILE_EFFECT_STAYE = true;
// 自定义着色器 默认有片元着色器
Cesium.TILE_FS_BODY = ` float stc_pl = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
float stc_sd = v_stcVertex.z / 320.0 + sin(stc_pl) * 0.1;
gl_FragColor *= vec4(stc_sd, stc_sd, stc_sd, 1.0);
float stc_a13 = fract(czm_frameNumber / 360.0);
float stc_h = clamp(v_stcVertex.z / 450.0, 0.0, 1.0);
stc_a13 = abs(stc_a13 - 0.5) * 2.0;
float stc_diff = step(0.005, abs(stc_h - stc_a13));
gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - stc_diff);`;
// 加载3dtileset
let tilesets = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'https://lab.earthsdk.com/model/702aa950d03c11e99f7ddd77cbe22fea/tileset.json' //切片url
}))
tilesets.readyPromise.then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["true", "color('cyan')"]
]
}
});
viewer.flyTo(tileset)
})
}
// load
window.onload = function () {
initPage()
}
</script>
</body>
</html>