147 lines
4.1 KiB
JavaScript
147 lines
4.1 KiB
JavaScript
function Cloud() {
|
|
const viewer = new Cesium.Viewer("cesiumContainer");
|
|
const scene = viewer.scene;
|
|
const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 50);
|
|
|
|
function getColor(colorName) {
|
|
return Cesium.Color[colorName.toUpperCase()];
|
|
}
|
|
// These noise parameters are set to default, but can be changed
|
|
// to produce different cloud results. However, the noise is precomputed,
|
|
// so this cannot be changed dynamically.
|
|
const clouds = scene.primitives.add(
|
|
new Cesium.CloudCollection({
|
|
noiseDetail: 16.0,
|
|
noiseOffset: Cesium.Cartesian3.ZERO,
|
|
})
|
|
);
|
|
|
|
const cloudParameters = {
|
|
scaleWithMaximumSize: true,
|
|
scaleX: 25,
|
|
scaleY: 12,
|
|
maximumSizeX: 25,
|
|
maximumSizeY: 12,
|
|
maximumSizeZ: 15,
|
|
renderSlice: true, // if false, renders the entire surface of the ellipsoid
|
|
slice: 0.36,
|
|
brightness: 1.0,
|
|
color: "White",
|
|
colors: ["White", "Red", "Green", "Blue", "Yellow", "Gray"],
|
|
};
|
|
|
|
const cloud = clouds.add({
|
|
position: position,
|
|
scale: new Cesium.Cartesian2(
|
|
cloudParameters.scaleX,
|
|
cloudParameters.scaleY
|
|
),
|
|
maximumSize: new Cesium.Cartesian3(
|
|
cloudParameters.maximumSizeX,
|
|
cloudParameters.maximumSizeY,
|
|
cloudParameters.maximumSizeZ
|
|
),
|
|
color: getColor(cloudParameters.color),
|
|
slice: cloudParameters.renderSlice ? cloudParameters.slice : -1.0,
|
|
brightness: cloudParameters.brightness,
|
|
});
|
|
|
|
Cesium.knockout.track(cloudParameters);
|
|
const toolbar = document.getElementById("toolbar");
|
|
Cesium.knockout.applyBindings(cloudParameters, toolbar);
|
|
|
|
Cesium.knockout
|
|
.getObservable(cloudParameters, "scaleWithMaximumSize")
|
|
.subscribe(function (newValue) {
|
|
if (Boolean(newValue)) {
|
|
cloudParameters.scaleX = cloudParameters.maximumSizeX;
|
|
cloudParameters.scaleY = cloudParameters.maximumSizeY;
|
|
}
|
|
});
|
|
|
|
Cesium.knockout
|
|
.getObservable(cloudParameters, "scaleX")
|
|
.subscribe(function (newValue) {
|
|
const value = Number(newValue);
|
|
cloud.scale = new Cesium.Cartesian2(value, cloud.scale.y);
|
|
});
|
|
|
|
Cesium.knockout
|
|
.getObservable(cloudParameters, "scaleY")
|
|
.subscribe(function (newValue) {
|
|
const value = Number(newValue);
|
|
cloud.scale = new Cesium.Cartesian2(cloud.scale.x, value);
|
|
});
|
|
|
|
Cesium.knockout
|
|
.getObservable(cloudParameters, "maximumSizeX")
|
|
.subscribe(function (newValue) {
|
|
const value = Number(newValue);
|
|
cloud.maximumSize = new Cesium.Cartesian3(
|
|
value,
|
|
cloud.maximumSize.y,
|
|
cloud.maximumSize.z
|
|
);
|
|
if (cloudParameters.scaleWithMaximumSize) {
|
|
cloud.scale = new Cesium.Cartesian2(value, cloud.scale.y);
|
|
}
|
|
});
|
|
|
|
Cesium.knockout
|
|
.getObservable(cloudParameters, "maximumSizeY")
|
|
.subscribe(function (newValue) {
|
|
const value = Number(newValue);
|
|
cloud.maximumSize = new Cesium.Cartesian3(
|
|
cloud.maximumSize.x,
|
|
value,
|
|
cloud.maximumSize.z
|
|
);
|
|
if (cloudParameters.scaleWithMaximumSize) {
|
|
cloud.scale = new Cesium.Cartesian2(cloud.scale.x, value);
|
|
}
|
|
});
|
|
|
|
Cesium.knockout
|
|
.getObservable(cloudParameters, "maximumSizeZ")
|
|
.subscribe(function (newValue) {
|
|
const value = Number(newValue);
|
|
cloud.maximumSize = new Cesium.Cartesian3(
|
|
cloud.maximumSize.x,
|
|
cloud.maximumSize.y,
|
|
value
|
|
);
|
|
});
|
|
|
|
Cesium.knockout
|
|
.getObservable(cloudParameters, "renderSlice")
|
|
.subscribe(function (newValue) {
|
|
if (Boolean(newValue)) {
|
|
cloud.slice = Number(cloudParameters.slice);
|
|
} else {
|
|
cloud.slice = -1.0;
|
|
}
|
|
});
|
|
|
|
Cesium.knockout
|
|
.getObservable(cloudParameters, "slice")
|
|
.subscribe(function (newValue) {
|
|
cloud.slice = Number(newValue);
|
|
});
|
|
|
|
Cesium.knockout
|
|
.getObservable(cloudParameters, "color")
|
|
.subscribe(function (newValue) {
|
|
cloud.color = getColor(newValue);
|
|
});
|
|
|
|
Cesium.knockout
|
|
.getObservable(cloudParameters, "brightness")
|
|
.subscribe(function (newValue) {
|
|
cloud.brightness = Number(newValue);
|
|
});
|
|
|
|
viewer.camera.lookAt(position, new Cesium.Cartesian3(30, 30, -10));
|
|
}
|
|
|
|
export default Cloud;
|