qd-changjing/public/static/Build/Documentation/CumulusCloud.html

760 lines
60 KiB
HTML
Raw Normal View History

2022-07-05 16:56:29 +08:00
<!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">
<title>CumulusCloud - Cesium Documentation</title>
<!--[if lt IE 9]>
<script src="javascript/html5.js"></script>
<![endif]-->
<link href="styles/jsdoc-default.css" rel="stylesheet">
<link href="styles/prism.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1 class="page-title">
<a href="index.html"><img src="Images/CesiumLogo.png" class="cesiumLogo"></a>
CumulusCloud
<div class="titleCenterer"></div>
</h1>
<section>
<header>
</header>
<article>
<div class="container-overview">
<div class="nameContainer">
<h4 class="name" id="CumulusCloud">
<a href="#CumulusCloud" class="doc-link"></a>
new Cesium.CumulusCloud<span class="signature">()</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/CumulusCloud.js#L34">Scene/CumulusCloud.js 34</a>
</div>
</h4>
</div>
<div class="description">
A cumulus cloud billboard positioned in the 3D scene, that is created and rendered using a <a href="CloudCollection.html"><code>CloudCollection</code></a>.
A cloud is created and its initial properties are set by calling <a href="CloudCollection.html#add"><code>CloudCollection#add</code></a>.
and <a href="CloudCollection.html#remove"><code>CloudCollection#remove</code></a>.
<br /><br />
<div align='center'>
<img src='Images/CumulusCloud.png' width='400' height='300' /><br />
Example cumulus clouds
</div>
</div>
<h5>Performance:</h5>
<p class="description">Similar to <a href="Billboard.html"><code>Billboard</code></a>, reading a property, e.g., <a href="CumulusCloud.html#show"><code>CumulusCloud#show</code></a>,
takes constant time. Assigning to a property is constant time but results in
CPU to GPU traffic when <code>CloudCollection#update</code> is called. The per-cloud traffic is
the same regardless of how many properties were updated. If most clouds in a collection need to be
updated, it may be more efficient to clear the collection with <a href="CloudCollection.html#removeAll"><code>CloudCollection#removeAll</code></a>
and add new clouds instead of modifying each one.</p>
<dl class="details">
<h5>Demo:</h5>
<ul class="see-list">
<li><a href="https://sandcastle.cesium.com/index.html?src=Cloud%2520Parameters.html">Cesium Sandcastle Cloud Parameters Demo</a></li>
</ul>
<h5>See:</h5>
<ul class="see-list">
<li><a href="CloudCollection.html">CloudCollection</a></li>
<li><a href="CloudCollection.html#add">CloudCollection#add</a></li>
</ul>
</dl>
</div>
<h3 class="subsection-title">Members</h3>
<div class="nameContainer">
<h4 class="name" id="brightness">
<a href="#brightness" class="doc-link"></a>
brightness<span class="type-signature"> : Number</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/CumulusCloud.js#L329">Scene/CumulusCloud.js 329</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the brightness of the cloud. This can be used to give clouds
a darker, grayer appearance.
<br /><br />
<div align='center'>
<table border='0' cellpadding='5'><tr>
<td align='center'><code>cloud.brightness = 1.0;</code><br/><img src='Images/CumulusCloud.brightness1.png' width='250' height='158' /></td>
<td align='center'><code>cloud.brightness = 0.6;</code><br/><img src='Images/CumulusCloud.brightness0.6.png' width='250' height='158' /></td>
<td align='center'><code>cloud.brightness = 0.0;</code><br/><img src='Images/CumulusCloud.brightness0.png' width='250' height='158' /></td>
</tr></table>
</div>
</div>
<dl class="details">
<span class="details-header">Default Value:</span>
<code class="language-javascript">1.0</code>
</dl>
<div class="nameContainer">
<h4 class="name" id="color">
<a href="#color" class="doc-link"></a>
color<span class="type-signature"> : <a href="Color.html">Color</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/CumulusCloud.js#L233">Scene/CumulusCloud.js 233</a>
</div>
</h4>
</div>
<div class="description">
Sets the color of the cloud
</div>
<dl class="details">
<span class="details-header">Default Value:</span>
<code class="language-javascript">Color.WHITE</code>
</dl>
<div class="nameContainer">
<h4 class="name" id="maximumSize">
<a href="#maximumSize" class="doc-link"></a>
maximumSize<span class="type-signature"> : <a href="Cartesian3.html">Cartesian3</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/CumulusCloud.js#L211">Scene/CumulusCloud.js 211</a>
</div>
</h4>
</div>
<div class="description">
<p>Gets or sets the maximum size of the cumulus cloud rendered on the billboard.
This defines a maximum ellipsoid volume that the cloud can appear in.
Rather than guaranteeing a specific size, this specifies a boundary for the
cloud to appear in, and changing it can affect the shape of the cloud.</p>
<p>Changing the z-value of <code>maximumSize</code> has the most dramatic effect
on the cloud's appearance because it changes the depth of the cloud, and thus the
positions at which the cloud-shaping texture is sampled.</p>
<div align='center'>
<table border='0' cellpadding='5'>
<tr>
<td align='center'>
<code>cloud.maximumSize = new Cesium.Cartesian3(14, 9, 10);</code><br/>
<img src='Images/CumulusCloud.maximumSizex14y9z10.png' width='250' height='158' />
</td>
<td align='center'>
<code>cloud.maximumSize.x = 25;</code><br/>
<img src='Images/CumulusCloud.maximumSizex25.png' width='250' height='158' />
</td>
</tr>
<tr>
<td align='center'>
<code>cloud.maximumSize.y = 5;</code><br/>
<img src='Images/CumulusCloud.maximumSizey5.png' width='250' height='158' />
</td>
<td align='center'>
<code>cloud.maximumSize.z = 17;</code><br/>
<img src='Images/CumulusCloud.maximumSizez17.png' width='250' height='158' />
</td>
</tr>
</table>
</div>
<p>To modify the billboard's actual size, modify the cloud's <code>scale</code> property.</p>
</div>
<dl class="details">
<h5>See:</h5>
<ul class="see-list">
<li><a href="CumulusCloud.html#scale">CumulusCloud#scale</a></li>
</ul>
</dl>
<div class="nameContainer">
<h4 class="name" id="position">
<a href="#position" class="doc-link"></a>
position<span class="type-signature"> : <a href="Cartesian3.html">Cartesian3</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/CumulusCloud.js#L113">Scene/CumulusCloud.js 113</a>
</div>
</h4>
</div>
<div class="description">
Gets or sets the Cartesian position of this cumulus cloud.
</div>
<dl class="details">
</dl>
<div class="nameContainer">
<h4 class="name" id="scale">
<a href="#scale" class="doc-link"></a>
scale<span class="type-signature"> : <a href="Cartesian2.html">Cartesian2</a></span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/CumulusCloud.js#L155">Scene/CumulusCloud.js 155</a>
</div>
</h4>
</div>
<div class="description">
<p>Gets or sets the scale of the cumulus cloud billboard in meters.
The <code>scale</code> property will affect the size of the billboard,
but not the cloud's actual appearance.</p>
<div align='center'>
<table border='0' cellpadding='5'><tr>
<td align='center'>
<code>cloud.scale = new Cesium.Cartesian2(12, 8);</code><br/>
<img src='Images/CumulusCloud.scalex12y8.png' width='250' height='158' />
</td>
<td align='center'>
<code>cloud.scale = new Cesium.Cartesian2(24, 10);</code><br/>
<img src='Images/CumulusCloud.scalex24y10.png' width='250' height='158' />
</td>
</tr></table>
</div>
<p>To modify the cloud's appearance, modify its <code>maximumSize</code>
and <code>slice</code> properties.</p>
</div>
<dl class="details">
<h5>See:</h5>
<ul class="see-list">
<li><a href="CumulusCloud.html#maximumSize">CumulusCloud#maximumSize</a></li>
<li><a href="CumulusCloud.html#slice">CumulusCloud#slice</a></li>
</ul>
</dl>
<div class="nameContainer">
<h4 class="name" id="show">
<a href="#show" class="doc-link"></a>
show<span class="type-signature"> : Boolean</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/CumulusCloud.js#L92">Scene/CumulusCloud.js 92</a>
</div>
</h4>
</div>
<div class="description">
Determines if this cumulus cloud will be shown. Use this to hide or show a cloud, instead
of removing it and re-adding it to the collection.
</div>
<dl class="details">
<span class="details-header">Default Value:</span>
<code class="language-javascript">true</code>
</dl>
<div class="nameContainer">
<h4 class="name" id="slice">
<a href="#slice" class="doc-link"></a>
slice<span class="type-signature"> : Number</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/CumulusCloud.js#L297">Scene/CumulusCloud.js 297</a>
</div>
</h4>
</div>
<div class="description">
<p>Gets or sets the "slice" of the cloud that is rendered on the billboard, i.e.
the specific cross-section of the cloud chosen for the billboard's appearance.
Given a value between 0 and 1, the slice specifies how deeply into the cloud
to intersect based on its maximum size in the z-direction.</p>
<div align='center'>
<table border='0' cellpadding='5'><tr>
<td align='center'><code>cloud.slice = 0.32;</code><br/><img src='Images/CumulusCloud.slice0.32.png' width='250' height='158' /></td>
<td align='center'><code>cloud.slice = 0.5;</code><br/><img src='Images/CumulusCloud.slice0.5.png' width='250' height='158' /></td>
<td align='center'><code>cloud.slice = 0.6;</code><br/><img src='Images/CumulusCloud.slice0.6.png' width='250' height='158' /></td>
</tr></table>
</div>
<br />
<p>Due to the nature in which this slice is calculated,
values below <code>0.2</code> may result in cross-sections that are too small,
and the edge of the ellipsoid will be visible. Similarly, values above <code>0.7</code>
will cause the cloud to appear smaller. Values outside the range <code>[0.1, 0.9]</code>
should be avoided entirely because they do not produce desirable results.</p>
<div align='center'>
<table border='0' cellpadding='5'><tr>
<td align='center'><code>cloud.slice = 0.08;</code><br/><img src='Images/CumulusCloud.slice0.08.png' width='250' height='158' /></td>
<td align='center'><code>cloud.slice = 0.8;</code><br/><img src='Images/CumulusCloud.slice0.8.png' width='250' height='158' /></td>
</tr></table>
</div>
<p>If <code>slice</code> is set to a negative number, the cloud will not render a cross-section.
Instead, it will render the outside of the ellipsoid that is visible. For clouds with
small values of `maximumSize.z`, this can produce good-looking results, but for larger
clouds, this can result in a cloud that is undesirably warped to the ellipsoid volume.</p>
<div align='center'>
<table border='0' cellpadding='5'><tr>
<td align='center'>
<code>cloud.slice = -1.0;<br/>cloud.maximumSize.z = 18;</code><br/>
<img src='Images/CumulusCloud.slice-1z18.png' width='250' height='158' />
</td>
<td align='center'>
<code>cloud.slice = -1.0;<br/>cloud.maximumSize.z = 30;</code><br/>
<img src='Images/CumulusCloud.slice-1z30.png' width='250' height='158' /></td>
</tr></table>
</div>
</div>
<dl class="details">
<span class="details-header">Default Value:</span>
<code class="language-javascript">-1.0</code>
</dl>
</article>
</section>
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a>
</footer>
</div>
<div class="nav">
<div class="menu">
<input type="text" class="classFilter" id="ClassFilter" placeholder="Search">
<ul id="ClassList"><li data-name="Animation"><a href="Animation.html">Animation</a></li><li data-name="AnimationViewModel"><a href="AnimationViewModel.html">AnimationViewModel</a></li><li data-name="Appearance"><a href="Appearance.html">Appearance</a></li><li data-name="ArcGisMapServerImageryProvider"><a href="ArcGisMapServerImageryProvider.html">ArcGisMapServerImageryProvider</a></li><li data-name="ArcGISTiledElevationTerrainProvider"><a href="ArcGISTiledElevationTerrainProvider.html">ArcGISTiledElevationTerrainProvider</a></li><li data-name="ArcType"><a href="global.html#ArcType">ArcType</a></li><li data-name="AssociativeArray"><a href="AssociativeArray.html">AssociativeArray</a></li><li data-name="Axis"><a href="global.html#Axis">Axis</a></li><li data-name="AxisAlignedBoundingBox"><a href="AxisAlignedBoundingBox.html">AxisAlignedBoundingBox</a></li><li data-name="backFaceCulling"><a href="global.html#backFaceCulling">backFaceCulling</a></li><li data-name="barycentricCoordinates"><a href="global.html#barycentricCoordinates">barycentricCoordinates</a></li><li data-name="BaseLayerPicker"><a href="BaseLayerPicker.html">BaseLayerPicker</a></li><li data-name="BaseLayerPickerViewModel"><a href="BaseLayerPickerViewModel.html">BaseLayerPickerViewModel</a></li><li data-name="Billboard"><a href="Billboard.html">Billboard</a></li><li data-name="BillboardCollection"><a href="BillboardCollection.html">BillboardCollection</a></li><li data-name="BillboardGraphics"><a href="BillboardGraphics.html">BillboardGraphics</a></li><li data-name="BillboardVisualizer"><a href="BillboardVisualizer.html">BillboardVisualizer</a></li><li data-name="binarySearch"><a href="global.html#binarySearch">binarySearch</a></li><li data-name="binarySearchComparator"><a href="global.html#binarySearchComparator">binarySearchComparator</a></li><li data-name="BingMapsGeocoderService"><a href="BingMapsGeocoderService.html">BingMapsGeocoderService</a></li><li data-name="BingMapsImageryProvider"><a href="BingMapsImageryProvider.html">BingMapsImageryProvider</a></li><li data-name="BingMapsStyle"><a href="global.html#BingMapsStyle">BingMapsStyle</a></li><li data-name="BlendEquation"><a href="global.html#BlendEquation">BlendEquation</a></li><li data-name="BlendFunction"><a href="global.html#BlendFunction">BlendFunction</a></li><li data-name="BlendingState"><a href="BlendingState.html">BlendingState</a></li><li data-name="BlendOption"><a href="global.html#BlendOption">BlendOption</a></li><li data-name="BoundingRectangle"><a href="BoundingRectangle.html">BoundingRectangle</a></li><li data-name="BoundingSphere"><a href="BoundingSphere.html">BoundingSphere</a></li><li data-name="boundingSphere"><a href="global.html#boundingSphere">boundingSphere</a></li><li data-name="BoxEmitter"><a href="BoxEmitter.html">BoxEmitter</a></li><li data-name="BoxGeometry"><a href="BoxGeometry.html">BoxGeometry</a></li><li data-name="BoxGeometryUpdater"><a href="BoxGeometryUpdater.html">BoxGeometryUpdater</a></li><li data-name="BoxGraphics"><a href="BoxGraphics.html">BoxGraphics</a></li><li data-name="BoxOutlineGeometry"><a href="BoxOutlineGeometry.html">BoxOutlineGeometry</a></li><li data-name="buildModuleUrl"><a href="global.html#buildModuleUrl">buildModuleUrl</a></li><li data-name="CallbackProperty"><a href="CallbackProperty.html">CallbackProperty</a></li><li data-name="Camera"><a href="Camera.html">Camera</a></li><li data-name="CameraEventAggregator"><a href="CameraEventAggregator.html">CameraEventAggregator</a></li><li data-name="CameraEventType"><a href="global.html#CameraEventType">CameraEventType</a></li><li data-name="cancelAnimationFrame"><a href="global.html#cancelAnimationFrame">cancelAnimationFrame</a></li><li data-name="Cartesian2"><a href="Cartesian2.html">Cartesian2</a></li><li data-name="Cartesian3"><a href="Cartesian3.html">Cartesian3</a></li><li data-name="Cartesian4"><a href="Cartesian4.html">Cartesian4</a></li><li data-name="Cartographic"><a href="Cartographic.html">Cartographic</a></li><li data-name="CartographicGeocoderService"><a href="CartographicGeocoderServic
</div>
</div>
<script>
if (window.frameElement) {
document.body.className = 'embedded';
var ele = document.createElement('a');
ele.className = 'popout';
ele.target = '_blank';
ele.href = window.location.href;
ele.title = 'Pop out';
document.getElementById('main').appendChild(ele);
}
// Set targets on external links. Sandcastle and GitHub shouldn't be embedded in any iframe.
Array.prototype.forEach.call(document.getElementsByTagName('a'), function(a) {
if (/^https?:/i.test(a.getAttribute('href'))) {
a.target='_blank';
}
});
</script>
<script src="javascript/prism.js"></script>
<script src="javascript/cesiumDoc.js"></script>
</body>
</html>