Skip to content

GitLab

Commit 2dbd8f1f authored by Schaaf's avatar Schaaf
Browse files

Initial commit

parents
Show whitespace changes
Inline Side-by-side
Sandcastle/gallery/CZML Box.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="CZML Circles and Ellipses" />
<meta name="cesium-sandcastle-labels" content="CZML" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var czml = [
{
id: "document",
name: "box",
version: "1.0",
},
{
id: "shape1",
name: "Blue box",
position: {
cartographicDegrees: [-114.0, 40.0, 300000.0],
},
box: {
dimensions: {
cartesian: [400000.0, 300000.0, 500000.0],
},
material: {
solidColor: {
color: {
rgba: [0, 0, 255, 255],
},
},
},
},
},
{
id: "shape2",
name: "Red box with black outline",
position: {
cartographicDegrees: [-107.0, 40.0, 300000.0],
},
box: {
dimensions: {
cartesian: [400000.0, 300000.0, 500000.0],
},
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 128],
},
},
},
outline: true,
outlineColor: {
rgba: [0, 0, 0, 255],
},
},
},
{
id: "shape3",
name: "Yellow box outline",
position: {
cartographicDegrees: [-100.0, 40.0, 300000.0],
},
box: {
dimensions: {
cartesian: [400000.0, 300000.0, 500000.0],
},
fill: false,
outline: true,
outlineColor: {
rgba: [255, 255, 0, 255],
},
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer");
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML Circles and Ellipses.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="CZML Circles and Ellipses" />
<meta name="cesium-sandcastle-labels" content="CZML" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var czml = [
{
id: "document",
name: "CZML Geometries: Circles and Ellipses",
version: "1.0",
},
{
id: "shape1",
name: "Green circle at height",
position: {
cartographicDegrees: [-111.0, 40.0, 150000.0],
},
ellipse: {
semiMinorAxis: 300000.0,
semiMajorAxis: 300000.0,
height: 200000.0,
material: {
solidColor: {
color: {
rgba: [0, 255, 0, 255],
},
},
},
},
},
{
id: "shape2",
name: "Red ellipse with white outline on surface",
position: {
cartographicDegrees: [-103.0, 40.0, 0],
},
ellipse: {
semiMinorAxis: 250000.0,
semiMajorAxis: 400000.0,
height: 0,
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 127],
},
},
},
outline: true, // height must be set for outlines to display
outlineColor: {
rgba: [255, 255, 255, 255],
},
},
},
{
id: "shape3",
name:
"Blue translucent, rotated, and extruded ellipse with outline",
position: {
cartographicDegrees: [-95.0, 40.0, 100000.0],
},
ellipse: {
semiMinorAxis: 150000.0,
semiMajorAxis: 300000.0,
extrudedHeight: 200000.0,
rotation: 0.78539,
material: {
solidColor: {
color: {
rgba: [0, 0, 255, 127],
},
},
},
outline: true,
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer");
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML Colors.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="CZML Colors" />
<meta name="cesium-sandcastle-labels" content="CZML" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var czml = [
{
id: "document",
name: "CZML Colors",
version: "1.0",
},
{
id: "rgba",
name: "Rectangle with outline using RGBA Colors",
rectangle: {
coordinates: {
wsenDegrees: [-120, 40, -110, 50],
},
fill: true,
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 100],
},
},
},
height: 0, // disables ground clamping, needed for outlines
outline: true,
outlineColor: {
rgba: [0, 0, 0, 255],
},
},
},
{
id: "rgbaf",
name: "Rectangle using RGBAF Colors",
rectangle: {
coordinates: { wsenDegrees: [-100, 40, -90, 50] },
fill: true,
material: {
solidColor: {
color: {
rgbaf: [1, 0, 0, 0.39],
},
},
},
height: 0, // disables ground clamping, needed for outlines
outline: true,
outlineColor: {
rgba: [0, 0, 0, 255],
},
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer");
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise); //Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML Cones and Cylinders.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="CZML Cones and Cylinders" />
<meta name="cesium-sandcastle-labels" content="CZML" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var czml = [
{
id: "document",
name: "CZML Geometries: Cones and Cylinders",
version: "1.0",
},
{
id: "shape1",
name: "Green cylinder with black outline",
position: {
cartographicDegrees: [-100.0, 40.0, 200000.0],
},
cylinder: {
length: 400000.0,
topRadius: 200000.0,
bottomRadius: 200000.0,
material: {
solidColor: {
color: {
rgba: [0, 255, 0, 128],
},
},
},
outline: true,
outlineColor: {
rgba: [0, 0, 0, 255],
},
},
},
{
id: "shape2",
name: "Red cone",
position: {
cartographicDegrees: [-105.0, 40.0, 200000.0],
},
cylinder: {
length: 400000.0,
topRadius: 0.0,
bottomRadius: 200000.0,
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 255],
},
},
},
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer");
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML Corridor.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="CZML Polyline" />
<meta name="cesium-sandcastle-labels" content="CZML" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var czml = [
{
id: "document",
name: "CZML Geometries: Polyline",
version: "1.0",
},
{
id: "redCorridor",
name: "Red corridor on surface with rounded corners",
corridor: {
positions: {
cartographicDegrees: [
-100.0,
40.0,
0,
-105.0,
40.0,
0,
-105.0,
35.0,
0,
],
},
width: 200000.0,
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 127],
},
},
},
},
},
{
id: "greenCorridor",
name: "Green corridor at height with mitered corners and outline",
corridor: {
positions: {
cartographicDegrees: [
-90.0,
40.0,
0,
-95.0,
40.0,
0,
-95.0,
35.0,
0,
],
},
height: 100000.0,
cornerType: "MITERED",
width: 200000.0,
material: {
solidColor: {
color: {
rgba: [0, 255, 0, 255],
},
},
},
outline: true, // height must be set for outlines to display
outlineColor: {
rgba: [0, 0, 0, 255],
},
},
},
{
id: "blueCorridor",
name: "Blue extruded corridor with beveled corners and outline",
corridor: {
positions: {
cartographicDegrees: [
-80.0,
40.0,
0,
-85.0,
40.0,
0,
-85.0,
35.0,
0,
],
},
height: 200000.0,
extrudedHeight: 100000.0,
width: 200000.0,
cornerType: "BEVELED",
material: {
solidColor: {
color: {
rgba: [0, 0, 255, 255],
},
},
},
outline: true,
outlineColor: {
rgba: [255, 255, 255, 255],
},
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer");
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML Custom Properties.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="CZML Custom Properties" />
<meta name="cesium-sandcastle-labels" content="CZML" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<div id="propertiesMenu"></div>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var czml = [
{
id: "document",
name: "CZML Custom Properties",
version: "1.0",
clock: {
interval: "1970/2010",
currentTime: "1970",
multiplier: 500000000,
},
},
{
id: "custom_property_object",
name: "An object with custom properties",
properties: {
constant_property: true,
population_intervals: [
{
interval: "1970/1980",
number: 2209600,
},
{
interval: "1980/2090",
number: 2889700,
},
{
interval: "1990/2000",
number: 3307600,
},
{
interval: "2000/2010",
number: 4326900,
},
],
population_sampled: {
number: [
"1970",
2209600,
"1980",
2889700,
"1990",
3307600,
"2000",
4326900,
"2010",
5049100,
],
},
},
},
{
id: "colorado",
name: "Colorado",
polygon: {
positions: {
cartographicDegrees: [
-109.03,
41,
0,
-102.03,
41,
0,
-102.03,
37,
0,
-109.03,
37,
0,
],
},
material: {
solidColor: {
color: {
rgba: [0, 255, 0, 150],
},
},
},
height: 0,
extrudedHeight: 0,
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
});
var dataSource = new Cesium.CzmlDataSource();
function scaleProperty(property, scalingFactor) {
// returns a property that scales another property by a constant factor.
return new Cesium.CallbackProperty(function (time, result) {
result = property.getValue(time, result);
result = result * scalingFactor;
return result;
}, property.isConstant);
}
function setExtrudedHeight(propertyName) {
var customPropertyObject = dataSource.entities.getById(
"custom_property_object"
);
var property = customPropertyObject.properties[propertyName];
var colorado = dataSource.entities.getById("colorado");
// Because the population values are so large, we scale them down
// by 50 so they fit on the screen.
// If we didn't need to scale, we could directly assign the property
// to extrudedHeight.
// colorado.polygon.extrudedHeight = scaleProperty(property, 1 / 50.0);
colorado.polygon.extrudedHeight = scaleProperty(property, 1 / 50.0);
}
// Custom properties can be used as the value of graphical properties:
Sandcastle.addToolbarMenu(
[
{
text: "Use interval data",
onselect: function () {
setExtrudedHeight("population_intervals");
},
},
{
text: "Use sampled data",
onselect: function () {
setExtrudedHeight("population_sampled");
},
},
],
"propertiesMenu"
);
dataSource.load(czml);
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource); //Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML Model - Node Transformations.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="CZML Model - Node Transformations" />
<meta name="cesium-sandcastle-labels" content="CZML" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var czml = [
{
id: "document",
name: "CZML Model",
version: "1.0",
clock: {
interval: "2015-01-01T00:00:00Z/2015-01-01T00:00:20Z",
currentTime: "2015-01-01T00:00:00Z",
multiplier: 20,
},
},
{
id: "model",
position: {
cartographicDegrees: [-77, 37, 100000],
},
viewFrom: {
cartesian: [4.3, 0.1, 2.6],
},
model: {
gltf: "../../SampleData/models/CesiumMan/Cesium_Man.glb",
runAnimations: false,
nodeTransformations: {
Skeleton_arm_joint_L__3_: {
rotation: {
epoch: "2015-01-01T00:00:00Z",
unitQuaternion: [
0,
-0.23381920887303329,
-0.6909886782144156,
-0.0938384854833712,
0.6775378681547408,
10,
-0.4924076887347565,
-0.6304934596091216,
0.20657864059632378,
0.563327551886459,
20,
-0.23381920887303329,
-0.6909886782144156,
-0.0938384854833712,
0.6775378681547408,
],
},
},
Skeleton_arm_joint_R__2_: {
rotation: {
unitQuaternion: [
-0.2840422631464792,
-0.40211904424847345,
0.25175867757399086,
0.7063888981321548,
],
},
},
},
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
});
var dataSourcePromise = viewer.dataSources.add(
Cesium.CzmlDataSource.load(czml)
);
dataSourcePromise
.then(function (dataSource) {
viewer.trackedEntity = dataSource.entities.getById("model");
})
.otherwise(function (error) {
window.alert(error);
}); //Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML Model Articulations.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="CZML Model Articulations" />
<meta name="cesium-sandcastle-labels" content="CZML" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var czml = [
{
id: "document",
name: "CZML Model",
version: "1.0",
clock: {
interval: "2019-06-01T16:00:00Z/2019-06-01T16:10:00Z",
currentTime: "2019-06-01T16:00:00Z",
multiplier: 60,
range: "LOOP_STOP",
step: "SYSTEM_CLOCK_MULTIPLIER",
},
},
{
id: "test model",
name: "Cesium Air",
position: {
cartographicDegrees: [-77, 37, 10000],
},
model: {
gltf: "https://assets.agi.com/models/launchvehicle.glb",
scale: 2.0,
minimumPixelSize: 128,
runAnimations: false,
articulations: {
"Fairing Open": {
epoch: "2019-06-01T16:00:00Z",
number: [0, 0, 600, 120],
},
"Fairing Separate": {
epoch: "2019-06-01T16:00:00Z",
number: [0, 0, 400, -50],
},
"Fairing Drop": {
epoch: "2019-06-01T16:00:00Z",
interpolationAlgorithm: "LAGRANGE",
interpolationDegree: 2,
number: [0, 0, 80, 0, 100, 0, 120, -1, 600, -120],
},
},
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
});
var dataSourcePromise = viewer.dataSources.add(
Cesium.CzmlDataSource.load(czml)
);
dataSourcePromise
.then(function (dataSource) {
viewer.trackedEntity = dataSource.entities.getById("test model");
})
.otherwise(function (error) {
console.error(error);
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML Model Data URL.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="CZML Model Data URL" />
<meta name="cesium-sandcastle-labels" content="CZML" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var gltf = {
accessors: [
{
name: "cube_1_0_positions",
componentType: 5126,
count: 24,
min: [-1, -1, -1],
max: [1, 1, 1],
type: "VEC3",
bufferView: 0,
byteOffset: 0,
},
{
name: "cube_1_0_normals",
componentType: 5126,
count: 24,
min: [-1, -1, -1],
max: [1, 1, 1],
type: "VEC3",
bufferView: 1,
byteOffset: 0,
},
{
name: "cube_1_0_indices",
componentType: 5123,
count: 36,
min: [0],
max: [23],
type: "SCALAR",
bufferView: 2,
byteOffset: 0,
},
],
asset: { generator: "obj2gltf", version: "2.0" },
buffers: [
{
name: "19bd138d-63f9-4012-890c-30ab6b478824",
byteLength: 648,
uri:
"data:application/octet-stream;base64,AACAvwAAgL8AAIC/AACAPwAAgD8AAIC/AACAPwAAgL8AAIC/AACAvwAAgD8AAIC/AACAvwAAgL8AAIC/AACAvwAAgD8AAIA/AACAvwAAgD8AAIC/AACAvwAAgL8AAIA/AACAvwAAgD8AAIC/AACAPwAAgD8AAIA/AACAPwAAgD8AAIC/AACAvwAAgD8AAIA/AACAPwAAgL8AAIC/AACAPwAAgD8AAIC/AACAPwAAgD8AAIA/AACAPwAAgL8AAIA/AACAvwAAgL8AAIC/AACAPwAAgL8AAIC/AACAPwAAgL8AAIA/AACAvwAAgL8AAIA/AACAvwAAgL8AAIA/AACAPwAAgL8AAIA/AACAPwAAgD8AAIA/AACAvwAAgD8AAIA/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAABAAIAAAADAAEABAAFAAYABAAHAAUACAAJAAoACAALAAkADAANAA4ADAAOAA8AEAARABIAEAASABMAFAAVABYAFAAWABcA",
},
],
bufferViews: [
{
name: "bufferView_0",
buffer: 0,
byteLength: 288,
byteOffset: 0,
byteStride: 12,
target: 34962,
},
{
name: "bufferView_1",
buffer: 0,
byteLength: 288,
byteOffset: 288,
byteStride: 12,
target: 34962,
},
{
name: "bufferView_2",
buffer: 0,
byteLength: 72,
byteOffset: 576,
target: 34963,
},
],
materials: [
{
name: "default",
pbrMetallicRoughness: {
baseColorFactor: [0.5, 0.5, 0.5, 1],
metallicFactor: 0,
roughnessFactor: 1,
},
emissiveFactor: [0, 0, 0],
alphaMode: "OPAQUE",
doubleSided: false,
},
],
meshes: [
{
name: "cube_1",
primitives: [
{
attributes: { POSITION: 0, NORMAL: 1 },
indices: 2,
material: 0,
mode: 4,
},
],
},
],
nodes: [{ name: "cube", mesh: 0 }],
scene: 0,
scenes: [{ nodes: [0] }],
};
var encoded = btoa(JSON.stringify(gltf));
var dataUrl = "data:application/json;charset=utf-8;base64," + encoded;
var czml = [
{
id: "document",
name: "CZML Model",
version: "1.0",
},
{
id: "cube",
name: "Cube",
position: {
cartographicDegrees: [-77, 37, 10000],
},
model: {
gltf: dataUrl,
scale: 2.0,
minimumPixelSize: 128,
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
});
var dataSourcePromise = viewer.dataSources.add(
Cesium.CzmlDataSource.load(czml)
);
dataSourcePromise
.then(function (dataSource) {
viewer.trackedEntity = dataSource.entities.getById("cube");
})
.otherwise(function (error) {
window.alert(error);
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/CZML Model.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta name="description" content="CZML Model" />
<meta name="cesium-sandcastle-labels" content="CZML" />
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script
type="text/javascript"
src="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></script>
</head>
<body
class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html"
>
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var czml = [
{
id: "document",
name: "CZML Model",
version: "1.0",
},
{
id: "aircraft model",
name: "Cesium Air",
position: {
cartographicDegrees: [-77, 37, 10000],
},
model: {
gltf: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
scale: 2.0,
minimumPixelSize: 128,
},
},
];
var viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
});
var dataSourcePromise = viewer.dataSources.add(
Cesium.CzmlDataSource.load(czml)
);
dataSourcePromise
.then(function (dataSource) {
viewer.trackedEntity = dataSource.entities.getById(
"aircraft model"
);
})
.otherwise(function (error) {
window.alert(error);
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal