add Potree (version 1.8)
This commit is contained in:
Tim Wundenberg
180
PointCloudWeb.Web/public/Potree/examples/cesium_sorvilier.html
Normal file
180
PointCloudWeb.Web/public/Potree/examples/cesium_sorvilier.html
Normal file
@@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>Potree Viewer</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
|
||||
<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css">
|
||||
<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
|
||||
<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
|
||||
<script src="../libs/spectrum/spectrum.js"></script>
|
||||
<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
|
||||
<script src="../libs/other/BinaryHeap.js"></script>
|
||||
<script src="../libs/tween/tween.min.js"></script>
|
||||
<script src="../libs/d3/d3.js"></script>
|
||||
<script src="../libs/proj4/proj4.js"></script>
|
||||
<script src="../libs/openlayers3/ol.js"></script>
|
||||
<script src="../libs/i18next/i18next.js"></script>
|
||||
<script src="../libs/jstree/jstree.js"></script>
|
||||
<script src="../build/potree/potree.js"></script>
|
||||
<script src="../libs/plasio/js/laslaz.js"></script>
|
||||
<script src="../libs/Cesium/Cesium.js"></script>
|
||||
|
||||
<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
|
||||
<!-- INCLUDE SETTINGS HERE -->
|
||||
|
||||
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
|
||||
|
||||
<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');">
|
||||
<div id="cesiumContainer" style="position: absolute; width: 100%; height: 100%; background-color:green"></div>
|
||||
</div>
|
||||
<div id="potree_sidebar_container"> </div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="module">
|
||||
|
||||
import * as THREE from "../libs/three.js/build/three.module.js";
|
||||
window.cesiumViewer = new Cesium.Viewer('cesiumContainer', {
|
||||
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,
|
||||
});
|
||||
|
||||
let cp = new Cesium.Cartesian3(4303414.154026048, 552161.235598733, 4660771.704035539);
|
||||
cesiumViewer.camera.setView({
|
||||
destination : cp,
|
||||
orientation: {
|
||||
heading : 10,
|
||||
pitch : -Cesium.Math.PI_OVER_TWO * 0.5,
|
||||
roll : 0.0
|
||||
}
|
||||
});
|
||||
|
||||
window.potreeViewer = new Potree.Viewer(document.getElementById("potree_render_area"), {
|
||||
useDefaultRenderLoop: false
|
||||
});
|
||||
potreeViewer.setEDLEnabled(true);
|
||||
potreeViewer.setFOV(60);
|
||||
potreeViewer.setPointBudget(1_000_000);
|
||||
potreeViewer.setMinNodeSize(0);
|
||||
potreeViewer.loadSettingsFromURL();
|
||||
potreeViewer.setBackground(null);
|
||||
|
||||
potreeViewer.loadGUI(() => {
|
||||
potreeViewer.setLanguage('en');
|
||||
$("#menu_appearance").next().show();
|
||||
//viewer.toggleSidebar();
|
||||
});
|
||||
|
||||
Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "sigeom.sa", e => {
|
||||
potreeViewer.scene.addPointCloud(e.pointcloud);
|
||||
e.pointcloud.position.z = 0;
|
||||
let material = e.pointcloud.material;
|
||||
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
|
||||
|
||||
potreeViewer.scene.view.position.set(590093.649, 231823.465, 267.402);
|
||||
potreeViewer.scene.view.lookAt(new THREE.Vector3(589837.149, 231438.996, -0.707));
|
||||
|
||||
|
||||
let pointcloudProjection = e.pointcloud.projection;
|
||||
let mapProjection = proj4.defs("WGS84");
|
||||
|
||||
window.toMap = proj4(pointcloudProjection, mapProjection);
|
||||
window.toScene = proj4(mapProjection, pointcloudProjection);
|
||||
|
||||
{
|
||||
let bb = potreeViewer.getBoundingBox();
|
||||
|
||||
let minWGS84 = proj4(pointcloudProjection, mapProjection, bb.min.toArray());
|
||||
let maxWGS84 = proj4(pointcloudProjection, mapProjection, bb.max.toArray());
|
||||
}
|
||||
});
|
||||
|
||||
function loop(timestamp){
|
||||
requestAnimationFrame(loop);
|
||||
|
||||
potreeViewer.update(potreeViewer.clock.getDelta(), timestamp);
|
||||
|
||||
potreeViewer.render();
|
||||
|
||||
if(window.toMap !== undefined){
|
||||
|
||||
{
|
||||
let camera = potreeViewer.scene.getActiveCamera();
|
||||
|
||||
let pPos = new THREE.Vector3(0, 0, 0).applyMatrix4(camera.matrixWorld);
|
||||
let pRight = new THREE.Vector3(600, 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
cesiumViewer.render();
|
||||
}
|
||||
|
||||
requestAnimationFrame(loop);
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user