Skip to content

Commit 021e23d

Browse files
lilleyselilleyse
committed
Add clamp to 3d tiles demo
1 parent 5e133ff commit 021e23d

File tree

1 file changed

+143
-0
lines changed

1 file changed

+143
-0
lines changed

‎Apps/Sandcastle/gallery/Clamp to 3D Tiles.html

+143
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
7+
<meta name="description" content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
8+
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
9+
<title>Cesium Demo</title>
10+
<script type="text/javascript" src="../Sandcastle-header.js"></script>
11+
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
12+
<script type="text/javascript">
13+
if(typeof require === 'function') {
14+
require.config({
15+
baseUrl : '../../../Source',
16+
waitSeconds : 120
17+
});
18+
}
19+
</script>
20+
</head>
21+
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
22+
<style>
23+
@import url(../templates/bucket.css);
24+
</style>
25+
<div id="cesiumContainer" class="fullSize"></div>
26+
<div id="loadingOverlay"><h1>Loading...</h1></div>
27+
<div id="toolbar"></div>
28+
<script id="cesium_sandcastle_script">
29+
function startup(Cesium) {
30+
'use strict';
31+
//Sandcastle_Begin
32+
33+
// TWO BUGS
34+
// * Truck disappears if you look offscreen
35+
// * 3D Tiles does not refine correctly on opposite side of building. Is the offscreen pick pass messing up the render pass?
36+
var viewer = new Cesium.Viewer('cesiumContainer');
37+
var scene = viewer.scene;
38+
scene.globe.depthTestAgainstTerrain = true;
39+
40+
var start = Cesium.JulianDate.fromIso8601('2018-07-19T15:18:00Z');
41+
var stop = Cesium.JulianDate.fromIso8601('2018-07-19T15:18:30Z');
42+
var duration = Cesium.JulianDate.secondsDifference(stop, start);
43+
44+
viewer.timeline.zoomTo(start, stop);
45+
46+
var clock = viewer.clock;
47+
clock.startTime = start;
48+
clock.currentTime = start;
49+
clock.stopTime = stop;
50+
clock.clockRange = Cesium.ClockRange.LOOP_STOP;
51+
52+
var tileset = viewer.scene.primitives.add(
53+
new Cesium.Cesium3DTileset({
54+
url: Cesium.IonResource.fromAssetId(6074)
55+
})
56+
);
57+
58+
viewer.camera.setView({
59+
destination: new Cesium.Cartesian3(1216403.8845586285, -4736357.493351395, 4081299.715698949),
60+
orientation: new Cesium.HeadingPitchRoll(4.2892217081808806, -0.4799070147502502, 6.279789177843313),
61+
endTransform : Cesium.Matrix4.IDENTITY
62+
});
63+
64+
var startCartographic = Cesium.Cartographic.fromRadians(-1.3194173278580692, 0.6987983245671457, 79.48429974087243);
65+
var stopCartographic = Cesium.Cartographic.fromRadians(-1.319414626509859, 0.6987897506061312, 76.52729244635204);
66+
var startPosition = Cesium.Cartographic.toCartesian(startCartographic);
67+
var endPosition = Cesium.Cartographic.toCartesian(stopCartographic);
68+
var arrowStartPosition = Cesium.Cartesian3.fromRadians(startCartographic.longitude, startCartographic.latitude, startCartographic.height + 10.0);
69+
var arrowStopPosition = Cesium.Cartesian3.fromRadians(stopCartographic.longitude, stopCartographic.latitude, stopCartographic.height + 10.0);
70+
71+
var arrow = viewer.entities.add({
72+
polyline : {
73+
positions : [
74+
arrowStartPosition,
75+
arrowStopPosition
76+
],
77+
width : 10,
78+
followSurface : false,
79+
material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.YELLOW)
80+
}
81+
});
82+
83+
var entity = viewer.entities.add({
84+
position : startPosition,
85+
model : {
86+
uri : '../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb',
87+
minimumPixelSize : 64
88+
}
89+
});
90+
91+
function toggleShow(show) {
92+
// Toggle show for everything except the tileset
93+
var primitives = scene.primitives;
94+
var length = primitives.length;
95+
for (var i = 0; i < length; ++i) {
96+
var primitive = primitives.get(i);
97+
if (primitive !== tileset) {
98+
primitive.show = show;
99+
}
100+
}
101+
}
102+
103+
function calculatePosition(offset) {
104+
var currentPosition = Cesium.Cartesian3.lerp(startPosition, endPosition, offset, new Cesium.Cartesian3());
105+
var currentCartographic = Cesium.Cartographic.fromCartesian(currentPosition);
106+
toggleShow(false); // Hide primitives before calling sampleHeight so only the tileset is sampled
107+
var height = scene.sampleHeight(currentCartographic);
108+
toggleShow(true);
109+
if (Cesium.defined(height)) {
110+
currentCartographic.height = height;
111+
currentPosition = Cesium.Cartographic.toCartesian(currentCartographic);
112+
return currentPosition;
113+
}
114+
}
115+
116+
function initialViewReady(tileset, callback) {
117+
var allTilesLoadedFunction = function() {
118+
callback();
119+
tileset.allTilesLoaded.removeEventListener(allTilesLoadedFunction);
120+
};
121+
tileset.allTilesLoaded.addEventListener(allTilesLoadedFunction);
122+
}
123+
124+
initialViewReady(tileset, function() {
125+
viewer.clock.shouldAnimate = true;
126+
scene.postUpdate.addEventListener(function() {
127+
var timer = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, start);
128+
var offset = Cesium.Math.clamp(timer / duration, 0.0, 1.0);
129+
entity.position = calculatePosition(offset);
130+
});
131+
});
132+
133+
//Sandcastle_End
134+
Sandcastle.finishedLoading();
135+
}
136+
if (typeof Cesium !== 'undefined') {
137+
startup(Cesium);
138+
} else if (typeof require === 'function') {
139+
require(['Cesium'], startup);
140+
}
141+
</script>
142+
</body>
143+
</html>

0 commit comments

Comments
 (0)