feat(#40): load multiple point clouds simultaneously

TDT4290-group-4 · Oct 25, 2025 · e6a5081 · e6a5081
1 parent 9284341
commit e6a5081
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 17 deletions.
diff --git a/src/config.js b/src/config.js
@@ -1,4 +1,20 @@
-export const POTREE_POINTCLOUD_URL = '/pointclouds/data_converted/metadata.json'
+export const POTREE_POINTCLOUD_URLS = [
+  '/pointclouds/cell_1/metadata.json',
+  '/pointclouds/cell_2/metadata.json',
+  '/pointclouds/cell_3/metadata.json',
+  '/pointclouds/cell_4/metadata.json',
+  '/pointclouds/cell_5/metadata.json',
+  '/pointclouds/cell_6/metadata.json',
+  '/pointclouds/cell_7/metadata.json',
+  '/pointclouds/cell_8/metadata.json',
+  '/pointclouds/cell_9/metadata.json',
+  '/pointclouds/cell_10/metadata.json',
+  '/pointclouds/cell_11/metadata.json',
+  '/pointclouds/cell_12/metadata.json',
+  '/pointclouds/cell_13/metadata.json',
+  '/pointclouds/cell_14/metadata.json',
+  '/pointclouds/cell_15/metadata.json'
+]
 
 export const POTREE_SETTINGS = {
   edl: true,

diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,4 @@
-import { POTREE_POINTCLOUD_URL, POTREE_SETTINGS } from './config.js'
+import { POTREE_POINTCLOUD_URLS, POTREE_SETTINGS } from './config.js'
 import { createCesiumViewer, loadCountryBorders } from './cesiumViewer.js'
 import { createPotreeViewer } from './potreeViewer.js'
 import { syncCameras } from './cameraSync.js'
@@ -18,7 +18,7 @@ async function init() {
 
   window.potreeViewer = await createPotreeViewer(
     'potree_render_area',
-    POTREE_POINTCLOUD_URL,
+    POTREE_POINTCLOUD_URLS,
     POTREE_SETTINGS
   )
 

diff --git a/src/potreeViewer.js b/src/potreeViewer.js
@@ -10,11 +10,15 @@ import { ecef } from './config.js'
  * Initializes the Potree viewer used to visualize the point cloud.
  *
  * @param containerId - id of the container
- * @param pointcloudUrl - url path to the point cloud
+ * @param pointcloudUrls - url paths to the point clouds
  * @param settings - other settings
  * @returns Potree viewer
  */
-export async function createPotreeViewer(containerId, pointcloudUrl, settings) {
+export async function createPotreeViewer(
+  containerId,
+  pointcloudUrls,
+  settings
+) {
   const viewer = new Potree.Viewer(document.getElementById(containerId), {
     useDefaultRenderLoop: false
   })
@@ -66,9 +70,22 @@ export async function createPotreeViewer(containerId, pointcloudUrl, settings) {
     initAnnotationsPanel(viewer)
   })
 
-  const e = await Potree.loadPointCloud(pointcloudUrl)
-  const pc = e.pointcloud
-  viewer.scene.addPointCloud(pc)
+  for (const url of pointcloudUrls) {
+    const e = await Potree.loadPointCloud(url)
+    const pc = e.pointcloud
+    viewer.scene.addPointCloud(pc)
+
+    pc.material.pointSizeType = Potree.PointSizeType.ADAPTIVE
+    pc.material.shape = Potree.PointShape.CIRCLE
+    overrideShaderForGradient(pc)
+
+    //The default activeAttributeName is set to elevation and the color gradient to VIRIDIS for good visualization
+    pc.material.elevationRange = [-10000, 0]
+    pc.material.activeAttributeName = 'elevation'
+    pc.material.gradient = Potree.Gradients['VIRIDIS']
+
+    e.pointcloud.projection = ecef
+  }
 
   // Change name of default background from 'None' to 'Globe"'
   $('#background_options_none')
@@ -78,15 +95,6 @@ export async function createPotreeViewer(containerId, pointcloudUrl, settings) {
 
   viewer.setBackground('globe')
 
-  pc.material.pointSizeType = Potree.PointSizeType.ADAPTIVE
-  pc.material.shape = Potree.PointShape.CIRCLE
-  overrideShaderForGradient(pc)
-
-  //The default activeAttributeName is set to elevation and the color gradient to VIRIDIS for good visualization
-  pc.material.elevationRange = [-10000, 0]
-  pc.material.activeAttributeName = 'elevation'
-  pc.material.gradient = Potree.Gradients['VIRIDIS']
-
   // Initialize camera position and target point (manually chosen)
   viewer.scene.view.setView(
     [3961574.044, 1494736.334, 8348318.575], // Initial camera position