style(#9): clean up and format code

TDT4290-group-4 · Sep 20, 2025 · bd4c0cc · bd4c0cc
1 parent 305ec8b
commit bd4c0cc
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 152 deletions.
diff --git a/src/cameraSync.js b/src/cameraSync.js
@@ -1,58 +1,44 @@
 export function syncCameras(potreeViewer, cesiumViewer) {
-    let camera = potreeViewer.scene.getActiveCamera()
-
-    let pPos = new THREE.Vector3(0, 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
+  const camera = potreeViewer.scene.getActiveCamera()
+
+  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()
+
+  const toCes = (pos) => {
+    const xy = [pos.x, pos.y]
+    const height = pos.z
+    const deg = toMap.forward(xy)
+    return Cesium.Cartesian3.fromDegrees(...deg, height)
+  }
+
+  const cPos = toCes(pPos)
+  const cUpTarget = toCes(pUp)
+  const cTarget = toCes(pTarget)
+
+  const cDir = Cesium.Cartesian3.normalize(
+    Cesium.Cartesian3.subtract(cTarget, cPos, new Cesium.Cartesian3()),
+    new Cesium.Cartesian3()
+  )
+  const cUp = Cesium.Cartesian3.normalize(
+    Cesium.Cartesian3.subtract(cUpTarget, cPos, new Cesium.Cartesian3()),
+    new Cesium.Cartesian3()
+  )
+
+  cesiumViewer.camera.setView({
+    destination: cPos,
+    orientation: {
+      direction: cDir,
+      up: cUp
     }
-}
+  })
+
+  const aspect = camera.aspect
+  const fovy = Math.PI * (camera.fov / 180)
+  if (aspect < 1) {
+    cesiumViewer.camera.frustum.fov = fovy
+  } else {
+    const fovx = Math.atan(Math.tan(0.5 * fovy) * aspect) * 2
+    cesiumViewer.camera.frustum.fov = fovx
+  }
+}
diff --git a/src/cesiumViewer.js b/src/cesiumViewer.js
@@ -1,32 +1,32 @@
 export function createCesiumViewer(containerId) {
-    const viewer = new Cesium.Viewer(containerId, {
-        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
-      })
-    return viewer;
+  const viewer = new Cesium.Viewer(containerId, {
+    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
+  })
+  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
-        }
-    });
-}
+  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
@@ -1,16 +1,17 @@
-export const POTREE_POINTCLOUD_URL = "../pointclouds/data_converted/metadata.json";
+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_TWO * 0.5,
-    roll: 0.0
-};
+  x: 4303414.154026048,
+  y: 552161.235598733,
+  z: 4660771.704035539,
+  heading: 10,
+  pitch: -Cesium.Math.PI_PVER_FOUR,
+  roll: 0.0
+}
 
 export const POTREE_SETTINGS = {
-    edl: true,
-    fov: 60,
-    pointBudget: 1_000_000
-};
+  edl: true,
+  fov: 60,
+  pointBudget: 1_000_000
+}
diff --git a/src/main.js b/src/main.js
@@ -1,23 +1,31 @@
-import { POTREE_POINTCLOUD_URL, INITIAL_CESIUM_POS, POTREE_SETTINGS } from './config.js';
-import { createCesiumViewer, setCesiumView } from './cesiumViewer.js';
-import { createPotreeViewer } from './potreeViewer.js';
-import { syncCameras } from './cameraSync.js';
+import {
+  POTREE_POINTCLOUD_URL,
+  INITIAL_CESIUM_POS,
+  POTREE_SETTINGS
+} from './config.js'
+import { createCesiumViewer, setCesiumView } 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.cesiumViewer = createCesiumViewer('cesiumContainer')
+  setCesiumView(window.cesiumViewer, INITIAL_CESIUM_POS)
 
-    window.potreeViewer = await createPotreeViewer('potree_render_area', POTREE_POINTCLOUD_URL, POTREE_SETTINGS);
+  window.potreeViewer = await createPotreeViewer(
+    'potree_render_area',
+    POTREE_POINTCLOUD_URL,
+    POTREE_SETTINGS
+  )
 
-    function loop(timestamp) {
-        requestAnimationFrame(loop);
-        potreeViewer.update(potreeViewer.clock.getDelta(), timestamp);
-        potreeViewer.render();
-        if(window.toMap) syncCameras(potreeViewer, cesiumViewer);
-        cesiumViewer.render();
-    }
+  function loop(timestamp) {
+    requestAnimationFrame(loop)
+    potreeViewer.update(potreeViewer.clock.getDelta(), timestamp)
+    potreeViewer.render()
+    if (window.toMap) syncCameras(potreeViewer, cesiumViewer)
+    cesiumViewer.render()
+  }
 
-    requestAnimationFrame(loop);
+  requestAnimationFrame(loop)
 }
 
-init();
+init()
diff --git a/src/potreeViewer.js b/src/potreeViewer.js
@@ -1,41 +1,45 @@
 export async function createPotreeViewer(containerId, pointcloudUrl, settings) {
-    const viewer = new Potree.Viewer(document.getElementById(containerId), {
-        useDefaultRenderLoop: false
-    });
-
-    if(settings.edl) viewer.setEDLEnabled(true);
-    if(settings.fov) viewer.setFOV(settings.fov);
-    if(settings.pointBudget) viewer.setPointBudget(settings.pointBudget);
-
-    viewer.loadSettingsFromURL();
-    viewer.setBackground(null);
-    viewer.setDescription('Molloy Explorer')
-
-    viewer.loadGUI(() => {
-      viewer.setLanguage('en')
-      $('#menu_appearance').next().show()
-      $('#menu_tools').next().show()
-      $('#menu_scene').next().show()
-      $('#menu_filters').next().show()
-      viewer.toggleSidebar()
-    })
-
-    const e = await Potree.loadPointCloud(pointcloudUrl);
-    const pc = e.pointcloud;
-    viewer.scene.addPointCloud(pc);
-
-    pc.material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
-    pc.material.shape = Potree.PointShape.CIRCLE
-    pc.material.activeAttributeName = "elevation";
-    pc.material.gradient = Potree.Gradients["RAINBOW"];
-
-    e.pointcloud.projection = "+proj=utm +zone=32 +ellps=GRS80 +datum=ETRS89 +units=m +no_defs";
-    const pointcloudProjection = e.pointcloud.projection;
-    const mapProjection = proj4.defs("WGS84");
-    window.toMap = proj4(pointcloudProjection, mapProjection);
-    window.toScene = proj4(mapProjection, pointcloudProjection);
-
-    viewer.scene.view.setView([401603.85, 8860821.54, 1000000], [401603.85, 8860821.54, -2650.47]);
-
-    return viewer;
-}
+  const viewer = new Potree.Viewer(document.getElementById(containerId), {
+    useDefaultRenderLoop: false
+  })
+
+  if (settings.edl) viewer.setEDLEnabled(true)
+  if (settings.fov) viewer.setFOV(settings.fov)
+  if (settings.pointBudget) viewer.setPointBudget(settings.pointBudget)
+
+  viewer.loadSettingsFromURL()
+  viewer.setBackground(null)
+  viewer.setDescription('Molloy Explorer')
+
+  viewer.loadGUI(() => {
+    viewer.setLanguage('en')
+    $('#menu_appearance').next().show()
+    $('#menu_tools').next().show()
+    $('#menu_scene').next().show()
+    $('#menu_filters').next().show()
+    viewer.toggleSidebar()
+  })
+
+  const e = await Potree.loadPointCloud(pointcloudUrl)
+  const pc = e.pointcloud
+  viewer.scene.addPointCloud(pc)
+
+  pc.material.pointSizeType = Potree.PointSizeType.ADAPTIVE
+  pc.material.shape = Potree.PointShape.CIRCLE
+  pc.material.activeAttributeName = 'elevation'
+  pc.material.gradient = Potree.Gradients['RAINBOW']
+
+  e.pointcloud.projection =
+    '+proj=utm +zone=32 +ellps=GRS80 +datum=ETRS89 +units=m +no_defs'
+  const pointcloudProjection = e.pointcloud.projection
+  const mapProjection = proj4.defs('WGS84')
+  window.toMap = proj4(pointcloudProjection, mapProjection)
+  window.toScene = proj4(mapProjection, pointcloudProjection)
+
+  viewer.scene.view.setView(
+    [401603.85, 8860821.54, 1000000],
+    [401603.85, 8860821.54, -2650.47]
+  )
+
+  return viewer
+}