useWaterPlane

实验性功能

这是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。

拥有倒影的水面。

使用

const waterPlane = useWaterPlane()

// 基本参数
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
})

// 显示与隐藏
function toggleShow() {
  primitive.show = !primitive.show
}

// 释放
function destroy() {
  primitive.destroy()
}

demo

类型声明

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 • demo