How to always place the Potree cloud exactly in the center of the screen?

Questions
1

Question by Potree
Cloned the repository GitHub - potree/potree: WebGL point cloud viewer for large datasets
Download the point cloud from here:

https://potree.org/pointclouds/dechen_cave/metadata.json
https://potree.org/pointclouds/dechen_cave/hierarchy.bin
https://potree.org/pointclouds/dechen_cave/octree.bin

Put the cloud file in a folder locally. Because there was a CORS error over the network

It would seem that everything should work perfectly. But no.
The cloud is not in the center, but at the bottom of the screen.
And this problem is always present for ALL point clouds!

As a temporary solution, you have to raise the cloud using hardcode:

           pointcloud.position.z = 9;

But this is a bad option as it won’t work for other clouds.

But this is a bad option as it won’t work for other clouds.
Please help me figure out why this is happening. And how to always place the cloud exactly in the center of the screen?

Here is the code:

    <!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"
    	/>
    </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/other/stats.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>
    	<div id="potree_sidebar_container"></div>
    	</div>
    	<script type="module">
    	import * as THREE from "../libs/three.js/build/three.module.js";
    	// import * as Potree from "../src/Potree.js";
    	window.viewer = new Potree.Viewer(
    		document.getElementById("potree_render_area")
    	);
    	viewer.setEDLEnabled(true);
    	viewer.setFOV(60);
    	viewer.setPointBudget(5_000_000);
    	viewer.loadSettingsFromURL();
    	viewer.setDescription(
    		`Point cloud courtesy of PG&E and <a href="https://opentopography.org/">Open Topography</a>.`
    	);
    	viewer.loadGUI().then(() => {
    		viewer.setLanguage("en");
    		viewer.toggleSidebar();
    	});
    	Potree.loadPointCloud(
    		"../meta/cave/metadata.json",
    		"metadata.json",
    		(e) => {
    		let scene = viewer.scene;
    		let pointcloud = e.pointcloud;
    		scene.addPointCloud(pointcloud);
    		viewer.fitToScreen();
    		//pointcloud.position.z = 9;
    		}
    	);
    	</script>
    </body>
    </html>

Potree image
Potree image1792×1498 83.2 KB

2

/cc