diff --git a/src/config.js b/src/config.js index 09c17aa..761f8fd 100644 --- 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 index e11565e..87aaafe 100644 --- 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 index 3d80cf0..1e94159 100644 --- 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