diff --git a/src/cameraSync.js b/src/cameraSync.js index b7c2a9f..35fcd5e 100644 --- a/src/cameraSync.js +++ b/src/cameraSync.js @@ -1,6 +1,13 @@ +/** + * Syncs Potree's point cloud with Cesium's globe. + * + * @param potreeViewer - used for point cloud + * @param cesiumViewer - used for globe + */ export function syncCameras(potreeViewer, cesiumViewer) { const camera = potreeViewer.scene.getActiveCamera() + // Compute camera position, up vector, and target (pivot) in world coordinates const pPos = new THREE.Vector3(0, 0, 0).applyMatrix4(camera.matrixWorld) const pUp = new THREE.Vector3(0, 600, 0).applyMatrix4(camera.matrixWorld) const pTarget = potreeViewer.scene.view.getPivot() @@ -11,6 +18,7 @@ export function syncCameras(potreeViewer, cesiumViewer) { const cUpTarget = toCes(pUp) const cTarget = toCes(pTarget) + // Compute Cesium camera direction and up vectors const cDir = Cesium.Cartesian3.normalize( Cesium.Cartesian3.subtract(cTarget, cPos, new Cesium.Cartesian3()), new Cesium.Cartesian3() @@ -25,6 +33,7 @@ export function syncCameras(potreeViewer, cesiumViewer) { cesiumViewer.scene.globe.show = showGlobe cesiumViewer.scene.skyAtmosphere.show = showGlobe + // Sync Cesium camera position and orientation with Potree cesiumViewer.camera.setView({ destination: cPos, orientation: { @@ -33,6 +42,7 @@ export function syncCameras(potreeViewer, cesiumViewer) { } }) + // Match FOV const aspect = camera.aspect const fovy = Math.PI * (camera.fov / 180) if (aspect < 1) { diff --git a/src/cesiumViewer.js b/src/cesiumViewer.js index 3fdbbbd..af8336e 100644 --- a/src/cesiumViewer.js +++ b/src/cesiumViewer.js @@ -1,3 +1,9 @@ +/** + * Initializes the Cesium viewer used to visualize the globe. + * + * @param containerId - id of the container + * @returns Cesium viewer + */ export function createCesiumViewer(containerId) { const viewer = new Cesium.Viewer(containerId, { useDefaultRenderLoop: false, @@ -18,15 +24,3 @@ export function createCesiumViewer(containerId) { }) return viewer } - -export function setCesiumView(viewer, pos) { - const cp = new Cesium.Cartesian3(pos.x, pos.y, pos.z) - viewer.camera.setView({ - destination: cp, - orientation: { - heading: pos.heading, - pitch: pos.pitch, - roll: pos.roll - } - }) -} diff --git a/src/config.js b/src/config.js index b52bd33..fa55e71 100644 --- a/src/config.js +++ b/src/config.js @@ -1,14 +1,5 @@ export const POTREE_POINTCLOUD_URL = '/pointclouds/data_converted/metadata.json' -export const INITIAL_CESIUM_POS = { - x: 4303414.154026048, - y: 552161.235598733, - z: 4660771.704035539, - heading: 10, - pitch: -Cesium.Math.PI_OVER_FOUR, - roll: 0.0 -} - export const POTREE_SETTINGS = { edl: true, fov: 60, diff --git a/src/main.js b/src/main.js index 4417550..82f7e1e 100644 --- a/src/main.js +++ b/src/main.js @@ -1,15 +1,10 @@ -import { - POTREE_POINTCLOUD_URL, - INITIAL_CESIUM_POS, - POTREE_SETTINGS -} from './config.js' -import { createCesiumViewer, setCesiumView } from './cesiumViewer.js' +import { POTREE_POINTCLOUD_URL, POTREE_SETTINGS } from './config.js' +import { createCesiumViewer } from './cesiumViewer.js' import { createPotreeViewer } from './potreeViewer.js' import { syncCameras } from './cameraSync.js' async function init() { window.cesiumViewer = createCesiumViewer('cesiumContainer') - setCesiumView(window.cesiumViewer, INITIAL_CESIUM_POS) window.potreeViewer = await createPotreeViewer( 'potree_render_area', diff --git a/src/potreeViewer.js b/src/potreeViewer.js index 0b5d915..c6a20a3 100644 --- a/src/potreeViewer.js +++ b/src/potreeViewer.js @@ -1,3 +1,11 @@ +/** + * 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 settings - other settings + * @returns Potree viewer + */ export async function createPotreeViewer(containerId, pointcloudUrl, settings) { const viewer = new Potree.Viewer(document.getElementById(containerId), { useDefaultRenderLoop: false @@ -56,6 +64,11 @@ export async function createPotreeViewer(containerId, pointcloudUrl, settings) { return viewer } +/** + * Replacement for original scroll function which limits how far you can zoom out. + * + * @param e - the given event + */ function clampScrollRadius(e) { let resolvedRadius = this.scene.view.radius + this.radiusDelta let newRadius = resolvedRadius - e.delta * resolvedRadius * 0.1 @@ -67,6 +80,11 @@ function clampScrollRadius(e) { this.stopTweens() } +/** + * Adjust shader to use elevation relative to sealevel for EPSG:4978 coordinates. + * + * @param pc - the point cloud + */ function overrideShaderForGradient(pc) { const originalUpdateShaderSource = pc.material.updateShaderSource pc.material.updateShaderSource = function () {