-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(#9): restructure index.html for cleaner project setup
- Loading branch information
Showing
6 changed files
with
172 additions
and
159 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| 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 | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +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; | ||
| } | ||
|
|
||
| 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 | ||
| } | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| 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 | ||
| }; | ||
|
|
||
| export const POTREE_SETTINGS = { | ||
| edl: true, | ||
| fov: 60, | ||
| pointBudget: 1_000_000 | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,23 @@ | ||
| /* Empty for now, add logic later */ | ||
| 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.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(); | ||
| } | ||
|
|
||
| requestAnimationFrame(loop); | ||
| } | ||
|
|
||
| init(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| 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; | ||
| } |