useWaterPlane

Experimental Feature

It is an experimental feature. It is not guaranteed to reach stable status and the API may change before it does.

The water surface with reflections.

Usage

const waterPlane = useWaterPlane()

// Basic params.
const primitive = waterPlane({
  normalMapUrl: WaterImage,
  positions: positions.map(item => Cesium.Cartographic.fromDegrees(item[0], item[1])),
  height: 10,
})

const form = reactive({
  height: 10,
  reflectivity: 0.15,
  rippleSize: 100,
  waterColor: '#020E12',
  waterAlpha: 0.9,
  distortionScale: 10,
})
watchEffect(() => {
  primitive.height = form.height
  primitive.reflectivity = form.reflectivity
  primitive.rippleSize = form.rippleSize
  primitive.waterColor = defineColor(form.waterColor)
  primitive.waterAlpha = form.waterAlpha
  primitive.distortionScale = form.distortionScale
})

// Show and hide
function toggleShow() {
  primitive.show = !primitive.show
}

// Destroy
function destroy() {
  primitive.destroy()
}

demo

Type Declarations

Details

type OmitProperties =
  | "scene"
  | "rippleSize"
  | "waterColor"
  | "waterAlpha"
  | "reflectivity"
  | "distortionScale"
  | "flowDegrees"
  | "lightDirection"
  | "sunShiny"
export type UseWaterPlaneOptions = {
  scene?: Cesium.Scene
  rippleSize?: number
  waterColor?: Cesium.Color
  waterAlpha?: number
  reflectivity?: number
  distortionScale?: number
  flowDegrees?: number
  lightDirection?: Cesium.Cartesian3
  sunShiny?: number
} & Omit<WaterPrimitiveConstructorOptions, OmitProperties>
export declare function useWaterPlane(
  viewer?: Cesium.Viewer,
): (options: UseWaterPlaneOptions) => WaterPrimitive
export interface WaterPrimitiveConstructorOptions {
  scene: Cesium.Scene
  height: number
  flowDegrees: number
  positions: {
    latitude: number
    longitude: number
  }[]
  normalMapUrl: string
  rippleSize: number
  waterColor: Cesium.Color
  waterAlpha: number
  reflectivity: number
  lightDirection: Cesium.Cartesian3
  sunShiny: number
  distortionScale: number
}
declare class WaterPrimitive {
  private _scene
  private _height
  private _flowDegrees
  private _positions
  private _show
  private _reflectorWorldPosition
  private _originalReflectorWorldPosition
  private _normal
  private _waterPlane
  private _reflectMatrix
  private _reflectorViewMatrix
  private _reflectorProjectionMatrix
  private _initUniforms
  private _primitive
  private _virtualCamera?
  private _material?
  private _colorFramebuffer?
  private _colorTexture?
  private _depthStencilTexture?
  private _hdr?
  private __UniformState_prototype_updateFrustum
  private __PerspectiveFrustum_prototype_clone
  constructor(options: WaterPrimitiveConstructorOptions)
  get show(): boolean
  set show(val: boolean)
  get rippleSize(): any
  set rippleSize(val: any)
  get waterColor(): any
  set waterColor(val: any)
  get waterAlpha(): any
  set waterAlpha(val: any)
  get reflectivity(): any
  set reflectivity(val: any)
  get distortionScale(): any
  set distortionScale(val: any)
  get height(): number
  set height(val: number)
  _createReflectionWaterMaterial(): Cesium.Material
  _updateVirtualCamera(virtualCamera: Cesium.Camera): boolean
  preRender(renderInfo: any): void
  _createPrimitive(
    positions: Cesium.Cartesian3[],
    rotationAngle: number,
  ): Cesium.Primitive
  _getFixedFrameToEastNorthUpTransformFromWorldMatrix(): Cesium.Matrix4
  _createFramebuffer(
    context: Cesium.Scene["context"],
    width: number,
    height: number,
    hdrEnabled: boolean,
  ): void
  _destroyResource(): void
  destroy(): void
}

Source

source • demo