fix(composables): useWaterPlane now have correct height

Author: s3xysteak

src/core/composables/useWaterPlane/demo.vue

@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import * as Cesium from 'cesium'
 import { reactive, watchEffect } from 'vue'
-import { defineColor, toCartesian3, useViewer } from '~/index'
+import { defineColor, toCartesian3, toCoordinates, useViewer } from '~/index'
 import { useWaterPlane } from '.'
 import glb from './golden_eagle.glb?url'
 import WaterImage from './waterNormals.jpg'
 
 const viewer = useViewer()
 
-viewer.flyTo(viewer.entities.add({
-  position: toCartesian3(119.95, 31.8, 100),
+const entityList = Array.from({ length: 5 }, (_, k) => 100 + 20 * (k + 1) - 60).map(v => viewer.entities.add({
+  position: toCartesian3(119.95 + v / 20000, 31.8, v),
   model: {
     uri: glb,
     scale: 100,
   },
 }))
+viewer.flyTo(entityList[2])
 
 const positions = [
   [
@@ -44,7 +45,7 @@ const waterPlane = useWaterPlane()
 const primitive = waterPlane({
   normalMapUrl: WaterImage,
   positions: positions.map(item => Cesium.Cartographic.fromDegrees(item[0], item[1])),
-  height: 10,
+  height: -1000,
 })
 
 const form = reactive({
@@ -67,6 +68,23 @@ watchEffect(() => {
 function toggleShow() {
   primitive.show = !primitive.show
 }
+
+const middleEntityPosition = toCoordinates(entityList[2].position!.getValue(viewer.clock.currentTime)!)
+viewer.entities.add({
+  position: new Cesium.CallbackPositionProperty(
+    () => toCartesian3(
+      middleEntityPosition.longitude,
+      middleEntityPosition.latitude,
+      form.height,
+    ),
+    false,
+  ),
+  point: {
+    pixelSize: 4,
+    color: defineColor('#f00'),
+    disableDepthTestDistance: Infinity,
+  },
+})
 </script>
 
 <template>

src/core/composables/useWaterPlane/index.ts

@@ -118,32 +118,18 @@ class WaterPrimitive {
     const positions = options.positions
     this._show = true
 
-    this._positions = []
-
-    const [
-      cosLatitudeSum,
-      cosLatitudeSinLongitudeSum,
-      sinLatitudeSum,
-    ] = positions
-      .reduce((acc, position) => {
-        const { latitude, longitude } = position
-
-        this._positions.push(Cesium.Cartesian3.fromRadians(position.longitude, position.latitude, this._height))
-
-        return [
-          acc[0] + Math.cos(latitude) * Math.cos(longitude),
-          acc[1] + Math.cos(latitude) * Math.sin(longitude),
-          acc[2] + Math.sin(latitude),
-        ]
-      }, [0, 0, 0])
-      .map(item => item /= positions.length)
-
-    const averageLongitude = Math.atan2(cosLatitudeSinLongitudeSum, cosLatitudeSum)
-    const distanceToSurface = Math.sqrt(cosLatitudeSum * cosLatitudeSum + cosLatitudeSinLongitudeSum * cosLatitudeSinLongitudeSum)
-    const averageLatitude = Math.atan2(sinLatitudeSum, distanceToSurface)
-
-    this._reflectorWorldPosition = Cesium.Cartesian3.fromRadians(averageLongitude, averageLatitude, this._height)
-    this._originalReflectorWorldPosition = this._reflectorWorldPosition.clone()
+    this._positions = positions.map(position =>
+      Cesium.Cartesian3.fromRadians(position.longitude, position.latitude, this._height),
+    )
+
+    const sumCartesian = this._positions.reduce((sum, cartesian) => {
+      return Cesium.Cartesian3.add(sum, cartesian, new Cesium.Cartesian3())
+    }, new Cesium.Cartesian3())
+
+    const averageCartesian = Cesium.Cartesian3.divideByScalar(sumCartesian, positions.length, new Cesium.Cartesian3())
+    this._reflectorWorldPosition = averageCartesian.clone()
+    this._originalReflectorWorldPosition = averageCartesian.clone()
+
     this._normal = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(this._reflectorWorldPosition)
     this._waterPlane = Cesium.Plane.fromPointNormal(this._reflectorWorldPosition, this._normal)