Appearance
Class: WaterPrimitive
生成一个包含倒影、水波的水面 Primitive
Table of contents
Constructors
Properties
Accessors
- scene
- positionMC
- asynchronous
- debugShowBoundingVolume
- reflectionImageData
- reflectionTextureWidth
- reflectionTextureHeight
Methods
- destroy
- updateDistortionScale
- updateLightDirection
- updateRf0
- updateShiny
- updateSigma
- updateTranslation
- updateWaterColor
- updateWaterSize
Constructors
constructor
• new WaterPrimitive(options): WaterPrimitive
生成一个包含倒影、水波的水面 Primitive options 是一个具有以下属性的对象：
| Name | Type | Default | Description |
|---|---|---|---|
| scene | Scene | ||
| positions | Array.<Array.<Number>> | 水面经纬度，格式为 [ [ longitude, latitude ], [ longitude, latitude ], ...]，单位为角度。 | |
| height | Number | 水面的高度，单位为米。 | |
| show | Boolean | true | optional 是否显示该水面。 |
| flowDegrees | Number | 0 | optional 顺时针角度改变水流方向，使用默认的法线贴图时，水流方向默认为西南方，正值为顺时针方向，例如 45 为西方，-135 为东方。具体方向取决于法线贴图。 |
| initUniforms | Object | {} | optional initUniforms 对象 |
| asynchronous | Boolean | true | optional 确定该 Primitive 是异步创建还是阻塞直到 ready 状态。 |
| debugShowBoundingVolume | Boolean | false | optional 仅用于调试。是否显示此水面 Primitive 的绘制命令的包围球。 |
| debugOutputReflectionTexture | Boolean | false | optional 仅用于调试。是否输出反射纹理的像素值。 |
options initUniforms 对象包含以下属性：
| Name | Type | Default | Description |
|---|---|---|---|
| normalMapUrl | String | optional 法线贴图的 URL，不同的法线贴图会有不同的流向、流速、波纹效果。 | |
| size | Number | 50.0 | optional 水面波纹的尺寸，值越大，波纹越密集。 |
| waterColor | String | '#001e0f' | optional 水的颜色 |
| rf0 | Number | 0.3 | optional 水的反射系数基数，数值越小，反射率越小，倒影越少，可用于浑浊的水面；数值越大，反射率越大，倒影越多，可用于清澈的水面。 |
| lightDirection | Cartesian3 | newCartesian3(0,0,1) | optional 光照方向，单位向量。原点为水面中心点，水面中心点由 options.positions 决定，X、Y、Z轴对应水面中心点的东、北、上方向。 |
| sunShiny | Number | 100.0 | optional 光照强度，数值越小，水面越亮。 |
| distortionScale | Number | 3.7 | optional 水面倒影的扭曲程度，数值越大，倒影越扭曲。 |
| sigma | Number | 7.0 | optional 水面倒影的模糊程度，数值越大，倒影越模糊。 |
| waterAlpha | Number | 0.9 | optional 水面的透明度，数值越小，水面越透明。 |
Parameters
| Name | Type |
|---|---|
options | WaterPrimitiveOptions |
Returns
Example
js
const height = 13.61;
const positions = [
[120.60065115783391, 30.004961428607423],
[120.60078615073238, 30.005928090960985],
[120.60054615017066, 30.005968890471863],
[120.60030200406126, 30.005993164672226],
[120.60007379651816, 30.006039826423557],
[120.59992936336847, 30.00594702587555],
[120.59983900854532, 30.00552740794912],
[120.59974257542459, 30.005052026091487],
[120.60002362058049, 30.004937565066534]
];
const water = new joDVF.WaterPrimitive({
scene: viewer.scene,
positions: positions,
height,
initUniforms: {
size: 1000
},
debugOutputReflectionTexture: true
});
viewer.scene.primitives.add(water);Defined in
src/extensions/WaterPrimitive/index.ts:318
Properties
show
• show: boolean
是否显示该水面
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:255
Accessors
scene
• get scene(): CustomScene
实例化时传进来的 Scene
Returns
CustomScene
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:949
positionMC
• get positionMC(): Cartesian3
获取水面在局部空间的中心点，由实例化时传进来的 positions 决定。
Returns
Cartesian3
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:959
asynchronous
• get asynchronous(): boolean
是否将在 Web Worker 上创建且分批处理几何实例。
Returns
boolean
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:969
debugShowBoundingVolume
• get debugShowBoundingVolume(): boolean
该属性仅用于调试，不能用于生产用途，也未经过优化。 为水面 Primitive 中的每个绘制命令绘制包围球。
Returns
boolean
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:979
• set debugShowBoundingVolume(value): void
Parameters
| Name | Type |
|---|---|
value | boolean |
Returns
void
Defined in
src/extensions/WaterPrimitive/index.ts:983
reflectionImageData
• get reflectionImageData(): ImageData
反射纹理的像素值，当 debugOutputReflectionTexture 为 true 时可用。
Returns
ImageData
Memberof
WaterPrimitive
Example
js
// 1. 输出反射纹理到另一个 canvas，仅用于调试
const water = new WaterPrimitive({
scene: viewer.scene,
positions: positions,
height: 15,
debugOutputReflectionTexture: true
});
viewer.scene.primitives.add(water);
const ctx = document.getElementById("canvas").getContext("2d");
viewer.scene.postRender.addEventListener(() => {
const imageData = water.reflectionImageData;
if (imageData instanceof ImageData) {
ctx.canvas.width = water.reflectionTextureWidth;
ctx.canvas.height = water.reflectionTextureHeight;
ctx.putImageData(imageData, 0, 0);
}
});Defined in
src/extensions/WaterPrimitive/index.ts:1017
reflectionTextureWidth
• get reflectionTextureWidth(): number
反射纹理的宽度，当 debugOutputReflectionTexture 为 true 时可用。
Returns
number
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:1027
reflectionTextureHeight
• get reflectionTextureHeight(): number
反射纹理的高度，当 debugOutputReflectionTexture 为 true 时可用。
Returns
number
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:1037
Methods
destroy
▸ destroy(): void
销毁此对象拥有的 WebGL 资源。销毁对象允许确定性地释放 WebGL 资源，而不是依靠垃圾回收器销毁此对象
Returns
void
Defined in
src/extensions/WaterPrimitive/index.ts:827
updateDistortionScale
▸ updateDistortionScale(scale): void
修改水面倒影的扭曲程度
Parameters
| Name | Type | Description |
|---|---|---|
scale | number | 倒影的扭曲程度 |
Returns
void
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:843
updateLightDirection
▸ updateLightDirection(direction): void
修改光照方向
Parameters
| Name | Type | Description |
|---|---|---|
direction | Cartesian3 | 修改光照方向 |
Returns
void
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:853
updateRf0
▸ updateRf0(rf0): void
修改水的反射系数基数。数值越小，反射率越小，倒影越少，可用于浑浊的水面；数值越大，反射率越大，倒影越多，可用于清澈的水面
Parameters
| Name | Type | Description |
|---|---|---|
rf0 | number | 反射系数基数 |
Returns
void
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:863
updateShiny
▸ updateShiny(shiny): void
修改光照亮度参数，数值越小，水面高亮越高
Parameters
| Name | Type | Description |
|---|---|---|
shiny | number | 光照亮度参数 |
Returns
void
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:873
updateSigma
▸ updateSigma(sigma): void
修改水面倒影的模糊程度，数值越大，越模糊
Parameters
| Name | Type | Description |
|---|---|---|
sigma | number | 倒影的模糊程度 |
Returns
void
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:883
updateTranslation
▸ updateTranslation(eastNorthUp): void
设置水面位置的偏移
Parameters
| Name | Type | Description |
|---|---|---|
eastNorthUp | Cartesian3 | 以水面中心为原点的东、北、上坐标系 |
Returns
void
Memberof
WaterPrimitive
Example
js
// 1. 把水面抬高 10 米。
const offset = new Cesium.Cartesian3(0.0, 0.0, 10.0);
water.updateTranslation(offset);
// 2. 把水面往东挪 100 米、往北挪 200 米、往上挪 300 米。
const offset = new Cesium.Cartesian3(100.0, 200.0, 300.0);
water.updateTranslation(offset);Defined in
src/extensions/WaterPrimitive/index.ts:904
updateWaterColor
▸ updateWaterColor(color?): void
修改水面的颜色
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
color | string | "#001e0f" | 水面的颜色 |
Returns
void
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:922
updateWaterSize
▸ updateWaterSize(size): void
修改水面波纹的尺寸
Parameters
| Name | Type | Description |
|---|---|---|
size | number | 水面波纹尺寸 |
Returns
void
Memberof
WaterPrimitive
Defined in
src/extensions/WaterPrimitive/index.ts:932