feat(#9): add cesium globe

TDT4290-group-4 · Sep 20, 2025 · 5f45df7 · 5f45df7
1 parent 7ee1333
commit 5f45df7
Showing 1 changed file with 152 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -23,6 +23,11 @@
       type="text/css"
       href="/libs/jstree/themes/mixed/style.css"
     />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="/libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css"
+    />
   </head>
 
   <body>
@@ -39,6 +44,7 @@
     <script src="/build/potree/potree.js"></script>
     <script src="/libs/plasio/js/laslaz.js"></script>
     <script src="/libs/three.js/build/three.js"></script>
+    <script src="/libs/Cesium/Cesium.js"></script>
 
     <div
       class="potree_container"
@@ -49,29 +55,74 @@
         style="
           background-image: url('/build/potree/resources/images/background.jpg');
         "
-      ></div>
+      >
+        <div
+          id="cesiumContainer"
+          style="
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: green;
+          "
+        ></div>
+      </div>
       <div id="potree_sidebar_container"></div>
     </div>
 
     <script type="module">
-      window.viewer = new Potree.Viewer(
-        document.getElementById('potree_render_area')
+      window.cesiumViewer = new Cesium.Viewer('cesiumContainer', {
+        useDefaultRenderLoop: false,
+        animation: false,
+        baseLayerPicker: false,
+        fullscreenButton: false,
+        geocoder: false,
+        homeButton: false,
+        infoBox: false,
+        sceneModePicker: false,
+        selectionIndicator: false,
+        timeline: false,
+        navigationHelpButton: false,
+        imageryProvider: Cesium.createOpenStreetMapImageryProvider({
+          url: 'https://a.tile.openstreetmap.org/'
+        }),
+        terrainShadows: Cesium.ShadowMode.DISABLED
+      })
+
+      let cp = new Cesium.Cartesian3(
+        4303414.154026048,
+        552161.235598733,
+        4660771.704035539
       )
+      cesiumViewer.camera.setView({
+        destination: cp,
+        orientation: {
+          heading: 10,
+          pitch: -Cesium.Math.PI_OVER_TWO * 0.5,
+          roll: 0.0
+        }
+      })
 
-      viewer.setEDLEnabled(true)
-      viewer.setFOV(60)
-      viewer.setPointBudget(5_000_000)
-      viewer.loadSettingsFromURL()
+      window.potreeViewer = new Potree.Viewer(
+        document.getElementById('potree_render_area'),
+        {
+          useDefaultRenderLoop: false
+        }
+      )
 
-      viewer.setDescription('Molloy Explorer')
+      potreeViewer.setEDLEnabled(true)
+      potreeViewer.setFOV(60)
+      potreeViewer.setPointBudget(1_000_000)
+      potreeViewer.loadSettingsFromURL()
+      potreeViewer.setBackground(null)
+      potreeViewer.setDescription('Molloy Explorer')
 
-      viewer.loadGUI(() => {
-        viewer.setLanguage('en')
+      potreeViewer.loadGUI(() => {
+        potreeViewer.setLanguage('en')
         $('#menu_appearance').next().show()
         $('#menu_tools').next().show()
         $('#menu_scene').next().show()
         $('#menu_filters').next().show()
-        viewer.toggleSidebar()
+        potreeViewer.toggleSidebar()
       })
 
       let url = './pointclouds/data_converted/metadata.json'
@@ -84,9 +135,97 @@
         material.activeAttributeName = 'elevation'
         material.gradient = Potree.Gradients['RAINBOW']
 
-        viewer.scene.addPointCloud(pointcloud)
-        viewer.fitToScreen()
+        potreeViewer.scene.addPointCloud(pointcloud)
+
+        potreeViewer.scene.view.setView(
+          [401603.85, 8860821.54, 10000],
+          [401603.85, 8860821.54, -2650.47]
+        )
+
+        e.pointcloud.projection =
+          '+proj=utm +zone=32 +ellps=GRS80 +datum=ETRS89 +units=m +no_defs'
+        let pointcloudProjection = e.pointcloud.projection
+        let mapProjection = proj4.defs('WGS84')
+
+        window.toMap = proj4(pointcloudProjection, mapProjection)
+        window.toScene = proj4(mapProjection, pointcloudProjection)
       })
+
+      function loop(timestamp) {
+        requestAnimationFrame(loop)
+
+        potreeViewer.update(potreeViewer.clock.getDelta(), timestamp)
+
+        potreeViewer.render()
+
+        if (window.toMap !== undefined) {
+          {
+            let camera = potreeViewer.scene.getActiveCamera()
+
+            let pPos = new THREE.Vector3(0, 0, 0).applyMatrix4(
+              camera.matrixWorld
+            )
+            let pRight = new THREE.Vector3(600, 0, 0).applyMatrix4(
+              camera.matrixWorld
+            )
+            let pUp = new THREE.Vector3(0, 600, 0).applyMatrix4(
+              camera.matrixWorld
+            )
+            let pTarget = potreeViewer.scene.view.getPivot()
+
+            let toCes = (pos) => {
+              let xy = [pos.x, pos.y]
+              let height = pos.z
+              let deg = toMap.forward(xy)
+              let cPos = Cesium.Cartesian3.fromDegrees(...deg, height)
+
+              return cPos
+            }
+
+            let cPos = toCes(pPos)
+            let cUpTarget = toCes(pUp)
+            let cTarget = toCes(pTarget)
+
+            let cDir = Cesium.Cartesian3.subtract(
+              cTarget,
+              cPos,
+              new Cesium.Cartesian3()
+            )
+            let cUp = Cesium.Cartesian3.subtract(
+              cUpTarget,
+              cPos,
+              new Cesium.Cartesian3()
+            )
+
+            cDir = Cesium.Cartesian3.normalize(cDir, new Cesium.Cartesian3())
+            cUp = Cesium.Cartesian3.normalize(cUp, new Cesium.Cartesian3())
+
+            cesiumViewer.camera.setView({
+              destination: cPos,
+              orientation: {
+                direction: cDir,
+                up: cUp
+              }
+            })
+
+            let aspect = potreeViewer.scene.getActiveCamera().aspect
+            if (aspect < 1) {
+              let fovy =
+                Math.PI * (potreeViewer.scene.getActiveCamera().fov / 180)
+              cesiumViewer.camera.frustum.fov = fovy
+            } else {
+              let fovy =
+                Math.PI * (potreeViewer.scene.getActiveCamera().fov / 180)
+              let fovx = Math.atan(Math.tan(0.5 * fovy) * aspect) * 2
+              cesiumViewer.camera.frustum.fov = fovx
+            }
+          }
+
+          cesiumViewer.render()
+        }
+      }
+
+      requestAnimationFrame(loop)
     </script>
   </body>
 </html>