fix(#9): hide globe when directly above pivot

Fixes globe syncing issues when directly above pivot.

index.html

@@ -24,9 +24,9 @@
       href="/libs/jstree/themes/mixed/style.css"
     />
     <link
-    rel="stylesheet"
-    type="text/css"
-    href="/libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css"
+      rel="stylesheet"
+      type="text/css"
+      href="/libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css"
     />
     <link rel="stylesheet" type="text/css" href="src/style.css" />
   </head>

src/ElevationControl/elevationControl.js

@@ -82,7 +82,6 @@ function moveElevationContainer() {
 
 //initiate and orchestrate all funcitons to render the Evelation control section of the sidebar propperly
 window.initElevationControls = function initElevationControls(viewer) {
-
   //Creates the section
   createElevationPanel(viewer)
 

src/cameraSync.js

@@ -5,10 +5,8 @@ export function syncCameras(potreeViewer, cesiumViewer) {
   const pUp = new THREE.Vector3(0, 600, 0).applyMatrix4(camera.matrixWorld)
   const pTarget = potreeViewer.scene.view.getPivot()
 
-  const toCes = (v) =>
-    new Cesium.Cartesian3(v.x, v.y, v.z)
-
-
+  const toCes = (v) => new Cesium.Cartesian3(v.x, v.y, v.z)
+
   const cPos = toCes(pPos)
   const cUpTarget = toCes(pUp)
   const cTarget = toCes(pTarget)
@@ -22,8 +20,8 @@ export function syncCameras(potreeViewer, cesiumViewer) {
     new Cesium.Cartesian3()
   )
 
-  // Hide globe when the camera is below the surface or blocked by the curvature of the Earth
-  const showGlobe = shouldShowGlobe(cPos, cTarget)
+  // Hide globe when the camera is below the surface, blocked by the curvature of the Earth or directly above the pivot
+  const showGlobe = shouldShowGlobe(cPos, cTarget, cDir)
   cesiumViewer.scene.globe.show = showGlobe
   cesiumViewer.scene.skyAtmosphere.show = showGlobe
 
@@ -48,17 +46,16 @@ export function syncCameras(potreeViewer, cesiumViewer) {
 /**
  * Determines whether the globe should be visible based on the camera position.
  *
- * Returns false if the camera is below the globe surface or if the pivot
- * point would be blocked by the curvature of the Earth. This is handled
- * in a unified way by projecting the pivot to the globe surface and
- * comparing the camera and pivot positions along the axis from the Earth's
- * center through the pivot.
+ * Returns false if the camera is below the globe surface, if the pivot
+ * point would be blocked by the curvature of the Earth or if the camera
+ * is looking almost straight down at the pivot.
  *
- * @param cameraPos - The camera position in Cesium Cartesian3 coordinates
- * @param pivot - The pivot point in the point cloud (Cartesian3)
+ * @param cameraPos - The camera position in Cesium.Cartesian3 coordinates
+ * @param pivot - The pivot point in Cesium.Cartesian3 coordinates
+ * @param direction - The camera direction as a Cesium.Cartesian3 unit vector
  * @returns true if the globe should be visible, false if it should be hidden
  */
-function shouldShowGlobe(cameraPos, pivot) {
+function shouldShowGlobe(cameraPos, pivot, direction) {
   const ellipsoid = Cesium.Ellipsoid.WGS84
   const earthCenter = Cesium.Cartesian3.ZERO
 
@@ -83,7 +80,12 @@ function shouldShowGlobe(cameraPos, pivot) {
   const camProj = Cesium.Cartesian3.dot(cameraPos, axis)
   const pivotProj = Cesium.Cartesian3.dot(pivotSurface, axis)
 
-  // If camera is "above" pivot on this axis, the globe should be visible
-  // If camera is "below" pivot on this axis, the globe should be not be visible
-  return camProj >= pivotProj
+  // Compute the dot product between camera direction and local vertical
+  // Used to detect if the camera is looking almost straight down
+  const targetNormal = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(pivot)
+  const dotProduct = Math.abs(Cesium.Cartesian3.dot(direction, targetNormal))
+
+  // If camera is "above" pivot on the axis, and not looking nearly straight down, the globe should be visible
+  // Otherwise, the globe should not be visible
+  return camProj >= pivotProj && dotProduct < 0.99
 }

src/potreeViewer.js

@@ -47,8 +47,8 @@ export async function createPotreeViewer(containerId, pointcloudUrl, settings) {
 
   e.pointcloud.projection = '+proj=geocent +datum=WGS84 +units=m +no_defs'
   viewer.scene.view.setView(
-    [1993552.900, 87954.487, 7134018.721],
-    [1184471.630, 63828.490, 6243615.520]
+    [1993552.9, 87954.487, 7134018.721],
+    [1184471.63, 63828.49, 6243615.52]
   )
 
   return viewer