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/Particle System Tails.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="Particle systems for rocket and comet tails."
/>
<meta
name="cesium-sandcastle-labels"
content="Beginner, Showcases, Tutorials"
/>
<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 viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
});
var planePosition = Cesium.Cartesian3.fromDegrees(
-75.59777,
40.03883,
800.0
);
var particlesOffset = new Cesium.Cartesian3(
-8.950115473940969,
34.852766731753945,
-30.235411095432937
);
var cameraLocation = Cesium.Cartesian3.add(
planePosition,
particlesOffset,
new Cesium.Cartesian3()
);
var resetCamera = function () {
viewer.camera.lookAt(
cameraLocation,
new Cesium.Cartesian3(-450, -300, 200)
);
};
resetCamera();
// Draw particle image to a canvas
var particleCanvas;
function getImage() {
if (!Cesium.defined(particleCanvas)) {
particleCanvas = document.createElement("canvas");
particleCanvas.width = 20;
particleCanvas.height = 20;
var context2D = particleCanvas.getContext("2d");
context2D.beginPath();
context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
context2D.closePath();
context2D.fillStyle = "rgb(255, 255, 255)";
context2D.fill();
}
return particleCanvas;
}
// Add plane to scene
var hpr = new Cesium.HeadingPitchRoll(
0.0,
Cesium.Math.PI_OVER_TWO,
0.0
);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
planePosition,
hpr
);
var entity = viewer.entities.add({
model: {
uri: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
scale: 3.5,
},
position: planePosition,
orientation: orientation,
});
// creating particles model matrix
var translationOffset = Cesium.Matrix4.fromTranslation(
particlesOffset,
new Cesium.Matrix4()
);
var translationOfPlane = Cesium.Matrix4.fromTranslation(
planePosition,
new Cesium.Matrix4()
);
var particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(
translationOfPlane,
translationOffset,
new Cesium.Matrix4()
);
// creating the particle systems
var rocketOptions = {
numberOfSystems: 50.0,
iterationOffset: 0.1,
cartographicStep: 0.000001,
baseRadius: 0.0005,
colorOptions: [
{
minimumRed: 1.0,
green: 0.5,
minimumBlue: 0.05,
alpha: 1.0,
},
{
red: 0.9,
minimumGreen: 0.6,
minimumBlue: 0.01,
alpha: 1.0,
},
{
red: 0.8,
green: 0.05,
minimumBlue: 0.09,
alpha: 1.0,
},
{
minimumRed: 1,
minimumGreen: 0.05,
blue: 0.09,
alpha: 1.0,
},
],
};
var cometOptions = {
numberOfSystems: 100.0,
iterationOffset: 0.003,
cartographicStep: 0.0000001,
baseRadius: 0.0005,
colorOptions: [
{
red: 0.6,
green: 0.6,
blue: 0.6,
alpha: 1.0,
},
{
red: 0.6,
green: 0.6,
blue: 0.9,
alpha: 0.9,
},
{
red: 0.5,
green: 0.5,
blue: 0.7,
alpha: 0.5,
},
],
};
var scratchCartesian3 = new Cesium.Cartesian3();
var scratchCartographic = new Cesium.Cartographic();
var forceFunction = function (options, iteration) {
return function (particle, dt) {
dt = Cesium.Math.clamp(dt, 0.0, 0.05);
scratchCartesian3 = Cesium.Cartesian3.normalize(
particle.position,
new Cesium.Cartesian3()
);
scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(
scratchCartesian3,
-40.0 * dt,
scratchCartesian3
);
scratchCartesian3 = Cesium.Cartesian3.add(
particle.position,
scratchCartesian3,
scratchCartesian3
);
scratchCartographic = Cesium.Cartographic.fromCartesian(
scratchCartesian3,
Cesium.Ellipsoid.WGS84,
scratchCartographic
);
var angle =
(Cesium.Math.PI * 2.0 * iteration) / options.numberOfSystems;
iteration += options.iterationOffset;
scratchCartographic.longitude +=
Math.cos(angle) * options.cartographicStep * 30.0 * dt;
scratchCartographic.latitude +=
Math.sin(angle) * options.cartographicStep * 30.0 * dt;
particle.position = Cesium.Cartographic.toCartesian(
scratchCartographic
);
};
};
var matrix4Scratch = new Cesium.Matrix4();
var scratchAngleForOffset = 0.0;
var scratchOffset = new Cesium.Cartesian3();
var imageSize = new Cesium.Cartesian2(15.0, 15.0);
function createParticleSystems(options, systemsArray) {
var length = options.numberOfSystems;
for (var i = 0; i < length; ++i) {
scratchAngleForOffset =
(Math.PI * 2.0 * i) / options.numberOfSystems;
scratchOffset.x +=
options.baseRadius * Math.cos(scratchAngleForOffset);
scratchOffset.y +=
options.baseRadius * Math.sin(scratchAngleForOffset);
var emitterModelMatrix = Cesium.Matrix4.fromTranslation(
scratchOffset,
matrix4Scratch
);
var color = Cesium.Color.fromRandom(
options.colorOptions[i % options.colorOptions.length]
);
var force = forceFunction(options, i);
var item = viewer.scene.primitives.add(
new Cesium.ParticleSystem({
image: getImage(),
startColor: color,
endColor: color.withAlpha(0.0),
particleLife: 3.5,
speed: 0.00005,
imageSize: imageSize,
emissionRate: 30.0,
emitter: new Cesium.CircleEmitter(0.1),
lifetime: 0.1,
updateCallback: force,
modelMatrix: particlesModelMatrix,
emitterModelMatrix: emitterModelMatrix,
})
);
systemsArray.push(item);
}
}
var rocketSystems = [];
var cometSystems = [];
createParticleSystems(rocketOptions, rocketSystems);
createParticleSystems(cometOptions, cometSystems);
// toolbar elements
function showAll(systemsArray, show) {
var length = systemsArray.length;
for (var i = 0; i < length; ++i) {
systemsArray[i].show = show;
}
}
var options = [
{
text: "Comet Tail",
onselect: function () {
showAll(rocketSystems, false);
showAll(cometSystems, true);
resetCamera();
},
},
{
text: "Rocket Thruster",
onselect: function () {
showAll(cometSystems, false);
showAll(rocketSystems, true);
resetCamera();
},
},
];
Sandcastle.addToolbarMenu(options);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Particle System Weather.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="Particle systems for rain and snow." />
<meta
name="cesium-sandcastle-labels"
content="Beginner, Showcases, Tutorials"
/>
<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 viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
terrainProvider: Cesium.createWorldTerrain(),
});
var scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;
var resetCameraFunction = function () {
scene.camera.setView({
destination: new Cesium.Cartesian3(
277096.634865404,
5647834.481964232,
2985563.7039122293
),
orientation: {
heading: 4.731089976107251,
pitch: -0.32003481981370063,
},
});
};
resetCameraFunction();
// snow
var snowParticleSize = 12.0;
var snowRadius = 100000.0;
var minimumSnowImageSize = new Cesium.Cartesian2(
snowParticleSize,
snowParticleSize
);
var maximumSnowImageSize = new Cesium.Cartesian2(
snowParticleSize * 2.0,
snowParticleSize * 2.0
);
var snowSystem;
var snowGravityScratch = new Cesium.Cartesian3();
var snowUpdate = function (particle, dt) {
snowGravityScratch = Cesium.Cartesian3.normalize(
particle.position,
snowGravityScratch
);
Cesium.Cartesian3.multiplyByScalar(
snowGravityScratch,
Cesium.Math.randomBetween(-30.0, -300.0),
snowGravityScratch
);
particle.velocity = Cesium.Cartesian3.add(
particle.velocity,
snowGravityScratch,
particle.velocity
);
var distance = Cesium.Cartesian3.distance(
scene.camera.position,
particle.position
);
if (distance > snowRadius) {
particle.endColor.alpha = 0.0;
} else {
particle.endColor.alpha =
snowSystem.endColor.alpha / (distance / snowRadius + 0.1);
}
};
snowSystem = new Cesium.ParticleSystem({
modelMatrix: new Cesium.Matrix4.fromTranslation(
scene.camera.position
),
minimumSpeed: -1.0,
maximumSpeed: 0.0,
lifetime: 15.0,
emitter: new Cesium.SphereEmitter(snowRadius),
startScale: 0.5,
endScale: 1.0,
image: "../../SampleData/snowflake_particle.png",
emissionRate: 7000.0,
startColor: Cesium.Color.WHITE.withAlpha(0.0),
endColor: Cesium.Color.WHITE.withAlpha(1.0),
minimumImageSize: minimumSnowImageSize,
maximumImageSize: maximumSnowImageSize,
updateCallback: snowUpdate,
});
scene.primitives.add(snowSystem);
// rain
var rainParticleSize = 15.0;
var rainRadius = 100000.0;
var rainImageSize = new Cesium.Cartesian2(
rainParticleSize,
rainParticleSize * 2.0
);
var rainSystem;
var rainGravityScratch = new Cesium.Cartesian3();
var rainUpdate = function (particle, dt) {
rainGravityScratch = Cesium.Cartesian3.normalize(
particle.position,
rainGravityScratch
);
rainGravityScratch = Cesium.Cartesian3.multiplyByScalar(
rainGravityScratch,
-1050.0,
rainGravityScratch
);
particle.position = Cesium.Cartesian3.add(
particle.position,
rainGravityScratch,
particle.position
);
var distance = Cesium.Cartesian3.distance(
scene.camera.position,
particle.position
);
if (distance > rainRadius) {
particle.endColor.alpha = 0.0;
} else {
particle.endColor.alpha =
rainSystem.endColor.alpha / (distance / rainRadius + 0.1);
}
};
rainSystem = new Cesium.ParticleSystem({
modelMatrix: new Cesium.Matrix4.fromTranslation(
scene.camera.position
),
speed: -1.0,
lifetime: 15.0,
emitter: new Cesium.SphereEmitter(rainRadius),
startScale: 1.0,
endScale: 0.0,
image: "../../SampleData/circular_particle.png",
emissionRate: 9000.0,
startColor: new Cesium.Color(0.27, 0.5, 0.7, 0.0),
endColor: new Cesium.Color(0.27, 0.5, 0.7, 0.98),
imageSize: rainImageSize,
updateCallback: rainUpdate,
});
scene.primitives.add(rainSystem);
// button
Sandcastle.addToolbarButton("Reset Camera", resetCameraFunction);
// drop down
var options = [
{
text: "Snow",
onselect: function () {
rainSystem.show = false;
snowSystem.show = true;
scene.skyAtmosphere.hueShift = -0.8;
scene.skyAtmosphere.saturationShift = -0.7;
scene.skyAtmosphere.brightnessShift = -0.33;
scene.fog.density = 0.001;
scene.fog.minimumBrightness = 0.8;
},
},
{
text: "Rain",
onselect: function () {
rainSystem.show = true;
snowSystem.show = false;
scene.skyAtmosphere.hueShift = -0.97;
scene.skyAtmosphere.saturationShift = 0.25;
scene.skyAtmosphere.brightnessShift = -0.4;
scene.fog.density = 0.00025;
scene.fog.minimumBrightness = 0.01;
},
},
];
Sandcastle.addToolbarMenu(options);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Particle System.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="Particle systems." />
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
<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);
#toolbar {
background: rgba(42, 42, 42, 0.8);
padding: 4px;
border-radius: 4px;
}
#toolbar input {
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
#toolbar .header {
font-weight: bold;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table>
<tbody>
<tr>
<td>Rate</td>
<td>
<input
type="range"
min="0.0"
max="100.0"
step="1"
data-bind="value: emissionRate, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: emissionRate" />
</td>
</tr>
<tr>
<td>Size</td>
<td>
<input
type="range"
min="2"
max="60.0"
step="1"
data-bind="value: particleSize, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: particleSize" />
</td>
</tr>
<tr>
<td>Min Life</td>
<td>
<input
type="range"
min="0.1"
max="30.0"
step="1"
data-bind="value: minimumParticleLife, valueUpdate: 'input'"
/>
<input
type="text"
size="5"
data-bind="value: minimumParticleLife"
/>
</td>
</tr>
<tr>
<td>Max Life</td>
<td>
<input
type="range"
min="0.1"
max="30.0"
step="1"
data-bind="value: maximumParticleLife, valueUpdate: 'input'"
/>
<input
type="text"
size="5"
data-bind="value: maximumParticleLife"
/>
</td>
</tr>
<tr>
<td>Min Speed</td>
<td>
<input
type="range"
min="0.0"
max="30.0"
step="1"
data-bind="value: minimumSpeed, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: minimumSpeed" />
</td>
</tr>
<tr>
<td>Max Speed</td>
<td>
<input
type="range"
min="0.0"
max="30.0"
step="1"
data-bind="value: maximumSpeed, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: maximumSpeed" />
</td>
</tr>
<tr>
<td>Start Scale</td>
<td>
<input
type="range"
min="0.0"
max="10.0"
step="1"
data-bind="value: startScale, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: startScale" />
</td>
</tr>
<tr>
<td>End Scale</td>
<td>
<input
type="range"
min="0.0"
max="10.0"
step="1"
data-bind="value: endScale, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: endScale" />
</td>
</tr>
<tr>
<td>Gravity</td>
<td>
<input
type="range"
min="-20.0"
max="20.0"
step="1"
data-bind="value: gravity, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: gravity" />
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer");
//Set the random number seed for consistent results.
Cesium.Math.setRandomNumberSeed(3);
//Set bounds of our simulation time
var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(
start,
120,
new Cesium.JulianDate()
);
//Make sure viewer is at the desired time.
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
viewer.clock.multiplier = 1;
viewer.clock.shouldAnimate = true;
//Set timeline to simulation bounds
viewer.timeline.zoomTo(start, stop);
var viewModel = {
emissionRate: 5.0,
gravity: 0.0,
minimumParticleLife: 1.2,
maximumParticleLife: 1.2,
minimumSpeed: 1.0,
maximumSpeed: 4.0,
startScale: 1.0,
endScale: 5.0,
particleSize: 25.0,
};
Cesium.knockout.track(viewModel);
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
var entityPosition = new Cesium.Cartesian3();
var entityOrientation = new Cesium.Quaternion();
var rotationMatrix = new Cesium.Matrix3();
var modelMatrix = new Cesium.Matrix4();
function computeModelMatrix(entity, time) {
return entity.computeModelMatrix(time, new Cesium.Matrix4());
}
var emitterModelMatrix = new Cesium.Matrix4();
var translation = new Cesium.Cartesian3();
var rotation = new Cesium.Quaternion();
var hpr = new Cesium.HeadingPitchRoll();
var trs = new Cesium.TranslationRotationScale();
function computeEmitterModelMatrix() {
hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr);
trs.translation = Cesium.Cartesian3.fromElements(
-4.0,
0.0,
1.4,
translation
);
trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation);
return Cesium.Matrix4.fromTranslationRotationScale(
trs,
emitterModelMatrix
);
}
var pos1 = Cesium.Cartesian3.fromDegrees(
-75.15787310614596,
39.97862668312678
);
var pos2 = Cesium.Cartesian3.fromDegrees(
-75.1633691390455,
39.95355089912078
);
var position = new Cesium.SampledPositionProperty();
position.addSample(start, pos1);
position.addSample(stop, pos2);
var entity = viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: start,
stop: stop,
}),
]),
model: {
uri: "../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
minimumPixelSize: 64,
},
viewFrom: new Cesium.Cartesian3(-100.0, 0.0, 100.0),
position: position,
orientation: new Cesium.VelocityOrientationProperty(position),
});
viewer.trackedEntity = entity;
var scene = viewer.scene;
var particleSystem = scene.primitives.add(
new Cesium.ParticleSystem({
image: "../../SampleData/smoke.png",
startColor: Cesium.Color.LIGHTSEAGREEN.withAlpha(0.7),
endColor: Cesium.Color.WHITE.withAlpha(0.0),
startScale: viewModel.startScale,
endScale: viewModel.endScale,
minimumParticleLife: viewModel.minimumParticleLife,
maximumParticleLife: viewModel.maximumParticleLife,
minimumSpeed: viewModel.minimumSpeed,
maximumSpeed: viewModel.maximumSpeed,
imageSize: new Cesium.Cartesian2(
viewModel.particleSize,
viewModel.particleSize
),
emissionRate: viewModel.emissionRate,
bursts: [
// these burst will occasionally sync to create a multicolored effect
new Cesium.ParticleBurst({
time: 5.0,
minimum: 10,
maximum: 100,
}),
new Cesium.ParticleBurst({
time: 10.0,
minimum: 50,
maximum: 100,
}),
new Cesium.ParticleBurst({
time: 15.0,
minimum: 200,
maximum: 300,
}),
],
lifetime: 16.0,
emitter: new Cesium.CircleEmitter(2.0),
emitterModelMatrix: computeEmitterModelMatrix(),
updateCallback: applyGravity,
})
);
var gravityScratch = new Cesium.Cartesian3();
function applyGravity(p, dt) {
// We need to compute a local up vector for each particle in geocentric space.
var position = p.position;
Cesium.Cartesian3.normalize(position, gravityScratch);
Cesium.Cartesian3.multiplyByScalar(
gravityScratch,
viewModel.gravity * dt,
gravityScratch
);
p.velocity = Cesium.Cartesian3.add(
p.velocity,
gravityScratch,
p.velocity
);
}
viewer.scene.preUpdate.addEventListener(function (scene, time) {
particleSystem.modelMatrix = computeModelMatrix(entity, time);
// Account for any changes to the emitter model matrix.
particleSystem.emitterModelMatrix = computeEmitterModelMatrix();
// Spin the emitter if enabled.
if (viewModel.spin) {
viewModel.heading += 1.0;
viewModel.pitch += 1.0;
viewModel.roll += 1.0;
}
});
Cesium.knockout
.getObservable(viewModel, "emissionRate")
.subscribe(function (newValue) {
particleSystem.emissionRate = parseFloat(newValue);
});
Cesium.knockout
.getObservable(viewModel, "particleSize")
.subscribe(function (newValue) {
var particleSize = parseFloat(newValue);
particleSystem.minimumImageSize.x = particleSize;
particleSystem.minimumImageSize.y = particleSize;
particleSystem.maximumImageSize.x = particleSize;
particleSystem.maximumImageSize.y = particleSize;
});
Cesium.knockout
.getObservable(viewModel, "minimumParticleLife")
.subscribe(function (newValue) {
particleSystem.minimumParticleLife = parseFloat(newValue);
});
Cesium.knockout
.getObservable(viewModel, "maximumParticleLife")
.subscribe(function (newValue) {
particleSystem.maximumParticleLife = parseFloat(newValue);
});
Cesium.knockout
.getObservable(viewModel, "minimumSpeed")
.subscribe(function (newValue) {
particleSystem.minimumSpeed = parseFloat(newValue);
});
Cesium.knockout
.getObservable(viewModel, "maximumSpeed")
.subscribe(function (newValue) {
particleSystem.maximumSpeed = parseFloat(newValue);
});
Cesium.knockout
.getObservable(viewModel, "startScale")
.subscribe(function (newValue) {
particleSystem.startScale = parseFloat(newValue);
});
Cesium.knockout
.getObservable(viewModel, "endScale")
.subscribe(function (newValue) {
particleSystem.endScale = parseFloat(newValue);
});
var options = [
{
text: "Circle Emitter",
onselect: function () {
particleSystem.emitter = new Cesium.CircleEmitter(2.0);
},
},
{
text: "Sphere Emitter",
onselect: function () {
particleSystem.emitter = new Cesium.SphereEmitter(2.5);
},
},
{
text: "Cone Emitter",
onselect: function () {
particleSystem.emitter = new Cesium.ConeEmitter(
Cesium.Math.toRadians(45.0)
);
},
},
{
text: "Box Emitter",
onselect: function () {
particleSystem.emitter = new Cesium.BoxEmitter(
new Cesium.Cartesian3(10.0, 10.0, 10.0)
);
},
},
];
Sandcastle.addToolbarMenu(options);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Per-Feature Post Processing.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="Post processing effects." />
<meta
name="cesium-sandcastle-labels"
content="Showcases, Post Processing"
/>
<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 viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
});
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
var url = "../../SampleData/models/CesiumMan/Cesium_Man.glb";
viewer.trackedEntity = viewer.entities.add({
name: url,
position: position,
model: {
uri: url,
},
});
if (
!Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)
) {
window.alert(
"This browser does not support the silhouette post process."
);
}
var stages = viewer.scene.postProcessStages;
var silhouette = stages.add(
Cesium.PostProcessStageLibrary.createSilhouetteStage()
);
silhouette.uniforms.color = Cesium.Color.LIME;
var blackAndWhite = stages.add(
Cesium.PostProcessStageLibrary.createBlackAndWhiteStage()
);
blackAndWhite.uniforms.gradations = 5.0;
var handler;
function addMouseOver(stage) {
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
var pickedObject = viewer.scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject)) {
stage.selected = [pickedObject.primitive];
} else {
stage.selected = [];
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
function removeMouseOver(stage) {
handler = handler && handler.destroy();
stage.selected = [];
}
Sandcastle.addToolbarMenu([
{
text: "Mouse-over Black and White",
onselect: function () {
blackAndWhite.enabled = true;
silhouette.enabled = false;
removeMouseOver(silhouette);
addMouseOver(blackAndWhite);
},
},
{
text: "Mouse-over Silhouette",
onselect: function () {
blackAndWhite.enabled = false;
silhouette.enabled = true;
removeMouseOver(blackAndWhite);
addMouseOver(silhouette);
},
},
]);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Physically-Based Materials.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="Create 3D models with realistic materials using glTF 2.0."
/>
<meta name="cesium-sandcastle-labels" content="Showcases" />
<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 clock = new Cesium.Clock({
startTime: Cesium.JulianDate.fromIso8601("2017-07-11T00:00:00Z"),
stopTime: Cesium.JulianDate.fromIso8601("2017-07-11T24:00:00Z"),
currentTime: Cesium.JulianDate.fromIso8601("2017-07-11T10:00:00Z"),
clockRange: Cesium.ClockRange.LOOP_STOP,
clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
multiplier: 1000,
shouldAnimate: true,
});
var viewer = new Cesium.Viewer("cesiumContainer", {
clockViewModel: new Cesium.ClockViewModel(clock),
selectionIndicator: false,
terrainProvider: Cesium.createWorldTerrain(),
});
Sandcastle.addToggleButton("Shadows", viewer.shadows, function (
checked
) {
viewer.shadows = checked;
});
viewer.scene.globe.enableLighting = true;
viewer.scene.globe.depthTestAgainstTerrain = true;
var position = new Cesium.Cartesian3(
-1371108.6511167218,
-5508684.080096612,
2901825.449865087
);
var heading = Cesium.Math.toRadians(180);
var pitch = Cesium.Math.toRadians(2);
var roll = Cesium.Math.toRadians(-6);
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);
var entity = viewer.entities.add({
name: "truck",
position: position,
orientation: orientation,
model: {
uri: "../../SampleData/models/GroundVehicle/GroundVehicle.glb",
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
minimumPixelSize: 128,
maximumScale: 20,
scale: 8.0,
runAnimations: false,
},
});
var threeQuartersView = {
destination: new Cesium.Cartesian3(
-1371203.1456494154,
-5508700.033950869,
2901802.2749172337
),
orientation: {
heading: Cesium.Math.toRadians(67.64973594265429),
pitch: Cesium.Math.toRadians(-8.158676059409297),
roll: Cesium.Math.toRadians(359.9999987450017),
},
maximumHeight: 100,
};
var frontView = {
destination: new Cesium.Cartesian3(
-1371214.9554156072,
-5508700.8494476415,
2901826.794611029
),
orientation: {
heading: Cesium.Math.toRadians(80.5354269423926),
pitch: Cesium.Math.toRadians(-15.466062969558285),
roll: Cesium.Math.toRadians(359.9999999526579),
},
maximumHeight: 100,
};
var topView = {
destination: new Cesium.Cartesian3(
-1371190.7755780201,
-5508732.668834588,
2901827.2625979027
),
orientation: {
heading: Cesium.Math.toRadians(68.29411482061157),
pitch: Cesium.Math.toRadians(-33.97774554735345),
roll: Cesium.Math.toRadians(359.9999999298912),
},
maximumHeight: 100,
};
var upwardsView = {
destination: new Cesium.Cartesian3(
-1371052.4616855076,
-5508691.745389906,
2901861.440673151
),
orientation: {
heading: Cesium.Math.toRadians(236.4536374528137),
pitch: Cesium.Math.toRadians(-1.3382025460115552),
roll: Cesium.Math.toRadians(359.9999985917282),
},
maximumHeight: 100,
};
viewer.scene.camera.flyTo({
destination: frontView.destination,
orientation: frontView.orientation,
duration: 5.0,
pitchAdjustHeight: 20,
});
Sandcastle.addToolbarMenu(
[
{
text: "Front reflection",
onselect: function () {
viewer.scene.camera.flyTo(frontView);
viewer.clockViewModel.clock.currentTime = Cesium.JulianDate.fromIso8601(
"2017-07-11T20:00:00Z"
);
},
},
{
text: "Three quarters sunrise",
onselect: function () {
viewer.scene.camera.flyTo(threeQuartersView);
viewer.clockViewModel.clock.currentTime = Cesium.JulianDate.fromIso8601(
"2017-07-11T11:00:00Z"
);
},
},
{
text: "Top reflection",
onselect: function () {
viewer.scene.camera.flyTo(topView);
viewer.clockViewModel.clock.currentTime = Cesium.JulianDate.fromIso8601(
"2017-07-11T12:00:00Z"
);
},
},
{
text: "Upward angle side reflection",
onselect: function () {
viewer.scene.camera.flyTo(upwardsView);
viewer.clockViewModel.clock.currentTime = Cesium.JulianDate.fromIso8601(
"2017-07-11T23:00:00Z"
);
},
},
],
"toolbar"
);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Picking.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="Use the mouse to select and manipulate objects in the scene."
/>
<meta name="cesium-sandcastle-labels" content="Showcases" />
<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 viewer = new Cesium.Viewer("cesiumContainer", {
selectionIndicator: false,
infoBox: false,
});
var scene = viewer.scene;
if (!scene.pickPositionSupported) {
window.alert("This browser does not support pickPosition.");
}
var handler;
Sandcastle.addDefaultToolbarButton(
"Show Cartographic Position on Mouse Over",
function () {
var entity = viewer.entities.add({
label: {
show: false,
showBackground: true,
font: "14px monospace",
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.TOP,
pixelOffset: new Cesium.Cartesian2(15, 0),
},
});
// Mouse over the globe to see the cartographic position
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
var cartesian = viewer.camera.pickEllipsoid(
movement.endPosition,
scene.globe.ellipsoid
);
if (cartesian) {
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var longitudeString = Cesium.Math.toDegrees(
cartographic.longitude
).toFixed(2);
var latitudeString = Cesium.Math.toDegrees(
cartographic.latitude
).toFixed(2);
entity.position = cartesian;
entity.label.show = true;
entity.label.text =
"Lon: " +
(" " + longitudeString).slice(-7) +
"\u00B0" +
"\nLat: " +
(" " + latitudeString).slice(-7) +
"\u00B0";
} else {
entity.label.show = false;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
);
Sandcastle.addToolbarButton("Pick Entity", function () {
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: "../images/Cesium_Logo_overlay.png",
},
});
// If the mouse is over the billboard, change its scale and color
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
var pickedObject = scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject) && pickedObject.id === entity) {
entity.billboard.scale = 2.0;
entity.billboard.color = Cesium.Color.YELLOW;
} else {
entity.billboard.scale = 1.0;
entity.billboard.color = Cesium.Color.WHITE;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
});
Sandcastle.addToolbarButton("Drill-Down Picking", function () {
var pickedEntities = new Cesium.EntityCollection();
var pickColor = Cesium.Color.YELLOW.withAlpha(0.5);
function makeProperty(entity, color) {
var colorProperty = new Cesium.CallbackProperty(function (
time,
result
) {
if (pickedEntities.contains(entity)) {
return pickColor.clone(result);
}
return color.clone(result);
},
false);
entity.polygon.material = new Cesium.ColorMaterialProperty(
colorProperty
);
}
var red = viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-70.0,
30.0,
-60.0,
30.0,
-60.0,
40.0,
-70.0,
40.0,
]),
height: 0,
},
});
makeProperty(red, Cesium.Color.RED.withAlpha(0.5));
var blue = viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-75.0,
34.0,
-63.0,
34.0,
-63.0,
40.0,
-75.0,
40.0,
]),
height: 0,
},
});
makeProperty(blue, Cesium.Color.BLUE.withAlpha(0.5));
var green = viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-67.0,
36.0,
-55.0,
36.0,
-55.0,
30.0,
-67.0,
30.0,
]),
height: 0,
},
});
makeProperty(green, Cesium.Color.GREEN.withAlpha(0.5));
// Move the primitive that the mouse is over to the top.
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
// get an array of all primitives at the mouse position
var pickedObjects = scene.drillPick(movement.endPosition);
if (Cesium.defined(pickedObjects)) {
//Update the collection of picked entities.
pickedEntities.removeAll();
for (var i = 0; i < pickedObjects.length; ++i) {
var entity = pickedObjects[i].id;
pickedEntities.add(entity);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
});
Sandcastle.addToolbarButton("Pick position", function () {
var modelEntity = viewer.entities.add({
name: "milktruck",
position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
model: {
uri:
"../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
},
});
viewer.zoomTo(modelEntity);
var labelEntity = viewer.entities.add({
label: {
show: false,
showBackground: true,
font: "14px monospace",
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.TOP,
pixelOffset: new Cesium.Cartesian2(15, 0),
},
});
// Mouse over the globe to see the cartographic position
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
var foundPosition = false;
var scene = viewer.scene;
if (scene.mode !== Cesium.SceneMode.MORPHING) {
var pickedObject = scene.pick(movement.endPosition);
if (
scene.pickPositionSupported &&
Cesium.defined(pickedObject) &&
pickedObject.id === modelEntity
) {
var cartesian = viewer.scene.pickPosition(movement.endPosition);
if (Cesium.defined(cartesian)) {
var cartographic = Cesium.Cartographic.fromCartesian(
cartesian
);
var longitudeString = Cesium.Math.toDegrees(
cartographic.longitude
).toFixed(2);
var latitudeString = Cesium.Math.toDegrees(
cartographic.latitude
).toFixed(2);
var heightString = cartographic.height.toFixed(2);
labelEntity.position = cartesian;
labelEntity.label.show = true;
labelEntity.label.text =
"Lon: " +
(" " + longitudeString).slice(-7) +
"\u00B0" +
"\nLat: " +
(" " + latitudeString).slice(-7) +
"\u00B0" +
"\nAlt: " +
(" " + heightString).slice(-7) +
"m";
labelEntity.label.eyeOffset = new Cesium.Cartesian3(
0.0,
0.0,
-cartographic.height *
(scene.mode === Cesium.SceneMode.SCENE2D ? 1.5 : 1.0)
);
foundPosition = true;
}
}
}
if (!foundPosition) {
labelEntity.label.show = false;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
});
Sandcastle.reset = function () {
viewer.entities.removeAll();
handler = handler && handler.destroy();
};
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Plane.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="Draw a plane geometry." />
<meta name="cesium-sandcastle-labels" content="Geometries" />
<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 viewer = new Cesium.Viewer("cesiumContainer");
var bluePlane = viewer.entities.add({
name: "Blue plane",
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
plane: {
plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_X, 0.0),
dimensions: new Cesium.Cartesian2(400000.0, 300000.0),
material: Cesium.Color.BLUE,
},
});
var redPlane = viewer.entities.add({
name: "Red plane with black outline",
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
plane: {
plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),
dimensions: new Cesium.Cartesian2(400000.0, 300000.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
var outlineOnly = viewer.entities.add({
name: "Yellow plane outline",
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
plane: {
plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
dimensions: new Cesium.Cartesian2(400000.0, 300000.0),
fill: false,
outline: true,
outlineColor: Cesium.Color.YELLOW,
},
});
viewer.zoomTo(viewer.entities);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Points.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="Add points to the scene." />
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
<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 viewer = new Cesium.Viewer("cesiumContainer");
function addPoint() {
Sandcastle.declare(addPoint);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
point: {
pixelSize: 10,
color: Cesium.Color.YELLOW,
},
});
}
function setPointProperties() {
Sandcastle.declare(setPointProperties);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
point: {
show: true, // default
color: Cesium.Color.SKYBLUE, // default: WHITE
pixelSize: 10, // default: 1
outlineColor: Cesium.Color.YELLOW, // default: BLACK
outlineWidth: 3, // default: 0
},
});
}
function changePointProperties() {
Sandcastle.declare(changePointProperties);
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(
-75.59777,
40.03883,
300000.0
),
point: {
pixelSize: 2,
},
});
var point = entity.point;
point.pixelSize = 20.0;
point.color = Cesium.Color.YELLOW.withAlpha(0.33);
}
function addMultiplePoints() {
Sandcastle.declare(addMultiplePoints);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
point: {
color: Cesium.Color.RED,
pixelSize: 8,
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-80.5, 35.14),
point: {
color: Cesium.Color.BLUE,
pixelSize: 16,
},
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-80.12, 25.46),
point: {
color: Cesium.Color.LIME,
pixelSize: 32,
},
});
}
function scaleByDistance() {
Sandcastle.declare(scaleByDistance);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
point: {
// pixelSize will multiply by the scale factor, so in this
// example the size will range from 20px (near) to 5px (far).
pixelSize: 10,
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5),
},
});
}
function fadeByDistance() {
Sandcastle.declare(fadeByDistance);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
point: {
pixelSize: 20,
translucencyByDistance: new Cesium.NearFarScalar(
1.5e2,
1.0,
1.5e7,
0.2
),
},
});
}
Sandcastle.addToolbarMenu([
{
text: "Add point",
onselect: function () {
addPoint();
Sandcastle.highlight(addPoint);
},
},
{
text: "Set point properties at creation",
onselect: function () {
setPointProperties();
Sandcastle.highlight(setPointProperties);
},
},
{
text: "Change point properties",
onselect: function () {
changePointProperties();
Sandcastle.highlight(changePointProperties);
},
},
{
text: "Add multiple points",
onselect: function () {
addMultiplePoints();
Sandcastle.highlight(addMultiplePoints);
},
},
{
text: "Scale by viewer distance",
onselect: function () {
scaleByDistance();
Sandcastle.highlight(scaleByDistance);
},
},
{
text: "Fade by viewer distance",
onselect: function () {
fadeByDistance();
Sandcastle.highlight(fadeByDistance);
},
},
]);
Sandcastle.reset = function () {
viewer.entities.removeAll();
};
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Polygon.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="Draw a polygon or extruded polygon on the globe surface."
/>
<meta name="cesium-sandcastle-labels" content="Geometries" />
<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 viewer = new Cesium.Viewer("cesiumContainer");
var redPolygon = viewer.entities.add({
name: "Red polygon on surface",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-115.0,
37.0,
-115.0,
32.0,
-107.0,
33.0,
-102.0,
31.0,
-102.0,
35.0,
]),
material: Cesium.Color.RED,
},
});
var greenPolygon = viewer.entities.add({
name: "Green extruded polygon",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-108.0,
42.0,
-100.0,
42.0,
-104.0,
40.0,
]),
extrudedHeight: 500000.0,
material: Cesium.Color.GREEN,
closeTop: false,
closeBottom: false,
},
});
var orangePolygon = viewer.entities.add({
name: "Orange polygon with per-position heights and outline",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
-108.0,
25.0,
100000,
-100.0,
25.0,
100000,
-100.0,
30.0,
100000,
-108.0,
30.0,
300000,
]),
extrudedHeight: 0,
perPositionHeight: true,
material: Cesium.Color.ORANGE.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
var bluePolygon = viewer.entities.add({
name: "Blue polygon with holes",
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray([
-99.0,
30.0,
-85.0,
30.0,
-85.0,
40.0,
-99.0,
40.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-97.0,
31.0,
-97.0,
39.0,
-87.0,
39.0,
-87.0,
31.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-95.0,
33.0,
-89.0,
33.0,
-89.0,
37.0,
-95.0,
37.0,
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-93.0,
34.0,
-91.0,
34.0,
-91.0,
36.0,
-93.0,
36.0,
]),
},
],
},
],
},
],
},
material: Cesium.Color.BLUE.withAlpha(0.5),
height: 0,
outline: true, // height is required for outline to display
},
});
var cyanPolygon = viewer.entities.add({
name: "Cyan vertical polygon with per-position heights and outline",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
-90.0,
41.0,
0.0,
-85.0,
41.0,
500000.0,
-80.0,
41.0,
0.0,
]),
perPositionHeight: true,
material: Cesium.Color.CYAN.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
var purplePolygonUsingRhumbLines = viewer.entities.add({
name: "Purple polygon using rhumb lines with outline",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-120.0,
45.0,
-80.0,
45.0,
-80.0,
55.0,
-120.0,
55.0,
]),
extrudedHeight: 50000,
material: Cesium.Color.PURPLE,
outline: true,
outlineColor: Cesium.Color.MAGENTA,
arcType: Cesium.ArcType.RHUMB,
},
});
viewer.zoomTo(viewer.entities); //Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/Polyline Dash.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="Draw dashed polylines." />
<meta name="cesium-sandcastle-labels" content="Geometries" />
<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 viewer = new Cesium.Viewer("cesiumContainer");
var redLine = viewer.entities.add({
name: "Red dashed line",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
38,
250000,
-125,
38,
250000,
]),
width: 5,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.RED,
}),
},
});
var blueLine = viewer.entities.add({
name: "Wide blue dashed line with a gap color",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
40,
250000,
-125,
40,
250000,
]),
width: 30,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.BLUE,
gapColor: Cesium.Color.YELLOW,
}),
},
});
var orangeLine = viewer.entities.add({
name: "Orange dashed line with a short dash length",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
42,
250000,
-125,
42,
250000,
]),
width: 5,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.ORANGE,
dashLength: 8.0,
}),
},
});
var cyanLine = viewer.entities.add({
name: "Cyan dashed line with a dash pattern.",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
44,
250000,
-125,
44,
250000,
]),
width: 10,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.CYAN,
dashPattern: parseInt("110000001111", 2),
}),
},
});
var yellowLine = viewer.entities.add({
name: "Yellow dashed line with a dash pattern.",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-75,
46,
250000,
-125,
46,
250000,
]),
width: 10,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.YELLOW,
dashPattern: parseInt("1010101010101010", 2),
}),
},
});
viewer.zoomTo(viewer.entities);
//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