refactor(#9): remove unnecessary code and add comments

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) {

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
-    }
-  })
-}

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,

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',

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 () {