188 lines
7.0 KiB
HTML
188 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE -->
|
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
|
<meta name="description" content="Apply animation effects to primitives such as polygons and sensors.">
|
|
<title>Cesium Demo</title>
|
|
<script type="text/javascript" src="../Sandcastle-header.js"></script>
|
|
<script data-dojo-config="async: 1, tlmSiblingOfDojo: 0" src="../../../ThirdParty/dojo-release-1.7.2-src/dojo/dojo.js"></script>
|
|
<script type="text/javascript">
|
|
require({
|
|
baseUrl : '../../..',
|
|
packages: [
|
|
{ name: 'dojo', location: 'ThirdParty/dojo-release-1.7.2-src/dojo' },
|
|
{ name: 'dijit', location: 'ThirdParty/dojo-release-1.7.2-src/dijit' },
|
|
{ name: 'dojox', location: 'ThirdParty/dojo-release-1.7.2-src/dojox' },
|
|
{ name: 'Assets', location: 'Source/Assets' },
|
|
{ name: 'Core', location: 'Source/Core' },
|
|
{ name: 'DynamicScene', location: 'Source/DynamicScene' },
|
|
{ name: 'Renderer', location: 'Source/Renderer' },
|
|
{ name: 'Scene', location: 'Source/Scene' },
|
|
{ name: 'Shaders', location: 'Source/Shaders' },
|
|
{ name: 'ThirdParty', location: 'Source/ThirdParty' },
|
|
{ name: 'Widgets', location: 'Source/Widgets' },
|
|
{ name: 'Workers', location: 'Source/Workers' }
|
|
]
|
|
});
|
|
</script>
|
|
<link rel="Stylesheet" href="../../../ThirdParty/dojo-release-1.7.2-src/dijit/themes/claro/claro.css" type="text/css">
|
|
<link rel="Stylesheet" href="../../../Source/Widgets/Dojo/CesiumViewerWidget.css" type="text/css">
|
|
</head>
|
|
<body class="claro" data-sandcastle-bucket="bucket-dojo.html" data-sandcastle-title="Cesium + Dojo">
|
|
<style>
|
|
body {
|
|
background: #000;
|
|
color: #eee;
|
|
font-family: sans-serif;
|
|
font-size: 9pt;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.fullSize {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#toolbar {
|
|
margin: 5px;
|
|
padding: 2px 5px;
|
|
position: absolute;
|
|
}
|
|
</style>
|
|
|
|
<div id="cesiumContainer" class="fullSize"></div>
|
|
<div id="toolbar">Loading...</div>
|
|
<script id="cesium_sandcastle_script">
|
|
require([
|
|
'Source/Cesium', 'Widgets/Dojo/CesiumWidget',
|
|
'dojo/on', 'dojo/dom', 'dijit/form/Button'
|
|
], function(
|
|
Cesium, CesiumWidget,
|
|
on, dom, Button)
|
|
{
|
|
"use strict";
|
|
|
|
var polygon;
|
|
var rectangularSensor;
|
|
|
|
function addAlphaAnimation(primitive, scene) {
|
|
Sandcastle.declare(addAlphaAnimation); // For highlighting in Sandcastle.
|
|
scene.getAnimations().addAlpha(primitive.material, 0.0, 0.7);
|
|
}
|
|
|
|
function addErosionAnimation(primitive, scene) {
|
|
Sandcastle.declare(addErosionAnimation); // For highlighting in Sandcastle.
|
|
scene.getAnimations().addProperty(primitive, 'erosion', 0.0, 1.0, {
|
|
duration: 1000
|
|
});
|
|
}
|
|
|
|
function addHeightAnimation(primitive, scene) {
|
|
Sandcastle.declare(addHeightAnimation); // For highlighting in Sandcastle.
|
|
scene.getAnimations().addProperty(primitive, 'height', 5000000.0, 0.0, {
|
|
duration: 1000
|
|
});
|
|
}
|
|
|
|
function addStripeAnimation(primitive, scene) {
|
|
Sandcastle.declare(addStripeAnimation); // For highlighting in Sandcastle.
|
|
scene.getAnimations().addOffsetIncrement(primitive.material);
|
|
}
|
|
|
|
function resetPolygonPropeties(polygon) {
|
|
polygon.erosion = 1.0;
|
|
polygon.height = 0.0;
|
|
polygon.material.uniforms.color = new Cesium.Color(1.0, 0.0, 0.0, 0.5);
|
|
}
|
|
|
|
function createPrimitives(widget) {
|
|
var ellipsoid = widget.ellipsoid;
|
|
var scene = widget.scene;
|
|
var primitives = scene.getPrimitives();
|
|
|
|
polygon = new Cesium.Polygon();
|
|
polygon.configureExtent(new Cesium.Extent(
|
|
Cesium.Math.toRadians(-120.0),
|
|
Cesium.Math.toRadians(20.0),
|
|
Cesium.Math.toRadians(-80.0),
|
|
Cesium.Math.toRadians(50.0)));
|
|
polygon.material = new Cesium.Material.fromType(scene.getContext(), 'Color');
|
|
primitives.add(polygon);
|
|
|
|
var modelMatrix = Cesium.Transforms.northEastDownToFixedFrame(ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-45.0, 45.0)));
|
|
modelMatrix = modelMatrix.multiply(Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(200000.0, 0.0, -3000000.0)));
|
|
var material = Cesium.Material.fromType(scene.getContext(), 'Stripe'); // Use default colors
|
|
material.uniforms.repeat = 10;
|
|
var sensors = new Cesium.SensorVolumeCollection(undefined);
|
|
rectangularSensor = sensors.addRectangularPyramid({
|
|
modelMatrix : modelMatrix,
|
|
radius : 10000000.0,
|
|
xHalfAngle : Cesium.Math.toRadians(30.0),
|
|
yHalfAngle : Cesium.Math.toRadians(20.0),
|
|
material : material
|
|
});
|
|
primitives.add(sensors);
|
|
}
|
|
|
|
function createButtons(scene) {
|
|
new Button({
|
|
label: 'Alpha Animation',
|
|
onClick: function() {
|
|
scene.getAnimations().removeAll();
|
|
resetPolygonPropeties(polygon);
|
|
addAlphaAnimation(polygon, scene);
|
|
Sandcastle.highlight(addAlphaAnimation);
|
|
}
|
|
}).placeAt('toolbar');
|
|
|
|
new Button({
|
|
label: 'Erosion Animation',
|
|
onClick: function() {
|
|
scene.getAnimations().removeAll();
|
|
resetPolygonPropeties(polygon);
|
|
addErosionAnimation(polygon, scene);
|
|
Sandcastle.highlight(addErosionAnimation);
|
|
}
|
|
}).placeAt('toolbar');
|
|
|
|
new Button({
|
|
label: 'Height Animation',
|
|
onClick: function() {
|
|
scene.getAnimations().removeAll();
|
|
resetPolygonPropeties(polygon);
|
|
addHeightAnimation(polygon, scene);
|
|
Sandcastle.highlight(addHeightAnimation);
|
|
}
|
|
}).placeAt('toolbar');
|
|
|
|
new Button({
|
|
label: 'Stripe Animation',
|
|
onClick: function() {
|
|
scene.getAnimations().removeAll();
|
|
addStripeAnimation(rectangularSensor, scene);
|
|
Sandcastle.highlight(addStripeAnimation);
|
|
}
|
|
}).placeAt('toolbar');
|
|
}
|
|
|
|
var widget = new CesiumWidget();
|
|
widget.placeAt(dom.byId('cesiumContainer'));
|
|
widget.startup();
|
|
dom.byId('toolbar').innerHTML = '';
|
|
|
|
createPrimitives(widget);
|
|
createButtons(widget.scene);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|