Andre/Bachelor-Thesis
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Andreas Wilms
2025-09-08 16:25:55 +02:00
commit cdcd870b6f
614 changed files with 343437 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

350
PCSurvey/potree/paired_comparison_template.html Normal file
View File

@@ -0,0 +1,350 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>a pc</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<iframe
id="Frame00"
style="position: absolute; width: 45%; height: 90%; left: 1%; top: 5%"
></iframe>
<iframe
id="Frame01"
style="position: absolute; width: 45%; height: 90%; left: 54%; top: 5%"
></iframe>
<section
style="position: absolute; width: 7%; height: 70%; left: 46.5%; top: 25%"
>
<p id="timer"></p>
<div>
<button id="end-trial" onclick="end()" style="width: 100%" disabled="true"
>Continue to Quality Rating</button
>
</div>
<br />
<div style="width: 100%">
<p id="infotext" style="text-align: left">Synchronize perspectives</p>
</div>
<div>
<input type="checkbox" id="sync" name="sync" checked="checked" />
<label for="sync">Sync</label>
</div>
<button id="left-right" onclick="lefttoright()">---></button>
<button id="right-left" onclick="righttoleft()"><---</button>
</section>
</body>
<script>
// Get the current trial's data
var NodeData = jsPsych.currentTrial().data;
var letter1 = NodeData.controlLetter1;
var letter2 = NodeData.controlLetter2;
var positions = NodeData.positions;
var cloudL = NodeData.cloudLeft;
var cloudR = NodeData.cloudRight;
var stimuli= NodeData.type;
var iframe01 = document.getElementById("Frame00");
var iframe02 = document.getElementById("Frame01");
iframe01.src = `potree/single_page_template_${stimuli}.html?cloud=${cloudL}&letter=${letter1}&x=${positions[0][0]}&y=${positions[0][1]}&z=${positions[0][2]}`;
iframe02.src = `potree/single_page_template_${stimuli}.html?cloud=${cloudR}&letter=${letter2}&x=${positions[1][0]}&y=${positions[1][1]}&z=${positions[1][2]}`;
</script>
<script>
var syncro;
var lastPosition = { x: null, y: null, z: null };
var lastYaw = null;
var lastPitch = null;
var CameraPerspektiven = [];
// Updating the cameras every 250ms
$(function () {
var IntervallMid = setInterval(updateCam, 250);
});
// Initial syncing of the cameras
var iframe = document.getElementById("Frame00");
iframe.onload = function () {
initial_syncing();
};
// Syncing the cameras when the checkbox is checked
var checkbox = document.getElementById("sync");
checkbox.addEventListener("change", function () {
if (this.checked) {
initial_syncing();
}
});
var lastPosition = { x: null, y: null, z: null };
var lastYaw = null;
var lastPitch = null;
var oldCameraLeft = { x: null, y: null, z: null, yaw: null, pitch: null };
var oldCameraRight = { x: null, y: null, z: null, yaw: null, pitch: null };
function updateCam() {
syncro = sync.checked;
var iframe00 = document.getElementById("Frame00");
var iframe01 = document.getElementById("Frame01");
try {
var scene00 = iframe00.contentWindow.viewer.scene.view;
var scene01 = iframe01.contentWindow.viewer.scene.view;
var position00 = scene00.position;
var position01 = scene01.position;
var yaw00 = scene00.yaw;
var yaw01 = scene01.yaw;
var pitch00 = scene00.pitch;
var pitch01 = scene01.pitch;
} catch (e) {
//scene not loaded
return;
}
if (syncro) {
document.getElementById("left-right").disabled = true;
document.getElementById("right-left").disabled = true;
var changeInfo = { x: null, y: null, z: null, yaw: null, pitch: null };
if (lastPosition != null && lastYaw != null && lastPitch != null) {
if (
position00.x != lastPosition.x ||
position00.y != lastPosition.y ||
position00.z != lastPosition.z ||
yaw00 != lastYaw ||
pitch00 != lastPitch
) {
changeInfo.x = position00.x;
changeInfo.y = position00.y;
changeInfo.z = position00.z;
changeInfo.yaw = yaw00;
changeInfo.pitch = pitch00;
}
if (
position01.x != lastPosition.x ||
position01.y != lastPosition.y ||
position01.z != lastPosition.z ||
yaw01 != lastYaw ||
pitch01 != lastPitch
) {
changeInfo.x = position01.x;
changeInfo.y = position01.y;
changeInfo.z = position01.z;
changeInfo.yaw = yaw01;
changeInfo.pitch = pitch01;
}
if (changeInfo.x != null) {
scene00.position.set(changeInfo.x, changeInfo.y, changeInfo.z);
scene00.yaw = changeInfo.yaw;
scene00.pitch = changeInfo.pitch;
scene01.position.set(changeInfo.x, changeInfo.y, changeInfo.z);
scene01.yaw = changeInfo.yaw;
scene01.pitch = changeInfo.pitch;
setLastPosition();
let cloudInfo = {
cloud: "B", // oder "R", abhängig von Ihrer Logik
x: changeInfo.x,
y: changeInfo.y,
z: changeInfo.z,
yaw: changeInfo.yaw,
pitch: changeInfo.pitch,
sync: true,
time: jsPsych.totalTime(),
};
// Umwandlung des Objekts in einen JSON-String
var cloudInfoJson = JSON.stringify(cloudInfo);
console.log(cloudInfoJson);
CameraPerspektiven.push(cloudInfo);
}
}
} else {
document.getElementById("left-right").disabled = false;
document.getElementById("right-left").disabled = false;
if (
position00.x != oldCameraLeft.x ||
position00.y != oldCameraLeft.y ||
position00.z != oldCameraLeft.z ||
yaw00 != oldCameraLeft.yaw ||
pitch00 != oldCameraLeft.pitch
) {
oldCameraLeft.x = position00.x;
oldCameraLeft.y = position00.y;
oldCameraLeft.z = position00.z;
oldCameraLeft.yaw = yaw00;
oldCameraLeft.pitch = pitch00;
var cloudInfo = {
cloud: "L",
x: position00.x,
y: position00.y,
z: position00.z,
yaw: yaw00,
pitch: pitch00,
sync: false,
time: jsPsych.totalTime(),
};
var cloudInfoJson = JSON.stringify(cloudInfo);
console.log(cloudInfoJson);
CameraPerspektiven.push(cloudInfo);
} else if (
position01.x != oldCameraRight.x ||
position01.y != oldCameraRight.y ||
position01.z != oldCameraRight.z ||
yaw01 != oldCameraRight.yaw ||
pitch01 != oldCameraRight.pitch
) {
oldCameraRight.x = position01.x;
oldCameraRight.y = position01.y;
oldCameraRight.z = position01.z;
oldCameraRight.yaw = yaw01;
oldCameraRight.pitch = pitch01;
var cloudInfo = {
cloud: "R",
x: position01.x,
y: position01.y,
z: position01.z,
yaw: yaw01,
pitch: pitch01,
sync: false,
time: jsPsych.totalTime(),
};
var cloudInfoJson = JSON.stringify(cloudInfo);
console.log(cloudInfoJson);
CameraPerspektiven.push(cloudInfo);
}
}
}
function setLastPosition() {
var iframe00 = document.getElementById("Frame00");
var iframe01 = document.getElementById("Frame01");
try {
var scene00 = iframe00.contentWindow.viewer.scene.view;
var scene01 = iframe01.contentWindow.viewer.scene.view;
} catch (e) {
//scene not loaded
return;
}
lastPosition.x = scene00.position.x;
lastPosition.y = scene00.position.y;
lastPosition.z = scene00.position.z;
lastYaw = scene00.yaw;
lastPitch = scene00.pitch;
oldCameraLeft.x = scene00.position.x;
oldCameraLeft.y = scene00.position.y;
oldCameraLeft.z = scene00.position.z;
oldCameraLeft.yaw = scene00.yaw;
oldCameraLeft.pitch = scene00.pitch;
oldCameraRight.x = scene01.position.x;
oldCameraRight.y = scene01.position.y;
oldCameraRight.z = scene01.position.z;
oldCameraRight.yaw = scene01.yaw;
oldCameraRight.pitch = scene01.pitch;
}
function initial_syncing() {
var iframe00 = document.getElementById("Frame00");
var iframe01 = document.getElementById("Frame01");
var scene00 = iframe00.contentWindow.viewer.scene.view;
var scene01 = iframe01.contentWindow.viewer.scene.view;
var position00 = scene00.position;
var position01 = scene01.position;
var yaw00 = scene00.yaw;
var yaw01 = scene01.yaw;
var pitch00 = scene00.pitch;
var pitch01 = scene01.pitch;
scene01.position.set(position00.x, position00.y, position00.z);
scene01.yaw = yaw00;
scene01.pitch = pitch00;
setLastPosition();
}
function lefttoright() {
var iframe00 = document.getElementById("Frame00");
var iframe01 = document.getElementById("Frame01");
var scene00 = iframe00.contentWindow.viewer.scene.view;
var scene01 = iframe01.contentWindow.viewer.scene.view;
var position00 = scene00.position;
var position01 = scene01.position;
var yaw00 = scene00.yaw;
var yaw01 = scene01.yaw;
var pitch00 = scene00.pitch;
var pitch01 = scene01.pitch;
scene01.position.set(position00.x, position00.y, position00.z);
scene01.yaw = yaw00;
scene01.pitch = pitch00;
}
function righttoleft() {
var iframe00 = document.getElementById("Frame00");
var iframe01 = document.getElementById("Frame01");
var scene00 = iframe00.contentWindow.viewer.scene.view;
var scene01 = iframe01.contentWindow.viewer.scene.view;
var position00 = scene00.position;
var position01 = scene01.position;
var yaw00 = scene00.yaw;
var yaw01 = scene01.yaw;
var pitch00 = scene00.pitch;
var pitch01 = scene01.pitch;
scene00.position.set(position01.x, position01.y, position01.z);
scene00.yaw = yaw01;
scene00.pitch = pitch01;
}
function end() {
jsPsych.data.get().addToLast({ perspectives: CameraPerspektiven });
clearInterval(Intervall);
clearInterval(IntervallMid);
clearInterval(IntervallBottom);
}
</script>
<script>
var timerElement = document.getElementById('timer');
var timeLeft = 15;
var countdown = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(countdown);
timerElement.textContent = "Time's up!";
document.getElementById("end-trial").disabled = false;
} else {
timerElement.textContent = timeLeft;
timeLeft--;
}
}, 1000);
</script>
</html>

177
PCSurvey/potree/sequentiell_template.html Normal file
View File

@@ -0,0 +1,177 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>a pc</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* Verhindert Scrollen auf der Seite */
}
#Frame00 {
position: absolute;
width: 100%;
height: 90%;
left: 1%;
top: 0%;
}
section {
position: absolute;
width: 30%;
height: 70%;
left: 46.5%;
top: 87%;
display: flex;
}
button {
position: absolute;
top: 91%;
display: block;
width: 40%;
padding: 10px;
background: #bc0ba8;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:disabled {
background: #ccc;
color: #666;
cursor: not-allowed;
}
button:not(:disabled):hover {
background: #5d0570;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<iframe id="Frame00"></iframe>
<button id="end-trial" onclick="end()" disabled="true"></button>
</div>
</body>
<script>
// Get the current trial's data
var NodeData = jsPsych.currentTrial().data;
var letter = NodeData.controlLetter1;
var positions_seq = NodeData.positions;
var cloud = NodeData.cloudOne;
var stimuli = NodeData.type;
var iframe01 = document.getElementById("Frame00");
if(stimuli == "trial"){
if (positions_seq.length == 1){
iframe01.src = `potree/single_page_template_${stimuli}.html?cloud=${cloud}&letter=${letter}&x=${positions_seq[0][0]}&y=${positions_seq[0][1]}&z=${positions_seq[0][2]}`;
}else if (positions_seq.length == 2){
iframe01.src = `potree/single_page_template_${stimuli}_2Elements.html?cloud=${cloud}&letter=${NodeData.controlLetter1}&x=${positions_seq[0][0]}&y=${positions_seq[0][1]}&z=${positions_seq[0][2]}&letter2=${NodeData.controlLetter2}&x2=${positions_seq[1][0]}&y2=${positions_seq[1][1]}&z2=${positions_seq[1][2]}`;
}else if (positions_seq.length == 3){
iframe01.src = `potree/single_page_template_${stimuli}_3Elements.html?cloud=${cloud}&letter=${NodeData.controlLetter1}&x=${positions_seq[0][0]}&y=${positions_seq[0][1]}&z=${positions_seq[0][2]}&letter2=${NodeData.controlLetter2}&x2=${positions_seq[1][0]}&y2=${positions_seq[1][1]}&z2=${positions_seq[1][2]}&letter3=${NodeData.controlLetter3}&x3=${positions_seq[2][0]}&y3=${positions_seq[2][1]}&z3=${positions_seq[2][2]}`;
}
}
if(positions_seq.length == 2 && stimuli != "trial"){
iframe01.src = `potree/single_page_template_${stimuli}.html?cloud=${cloud}&letter=${letter}&x=${positions_seq[0][0]}&y=${positions_seq[0][1]}&z=${positions_seq[0][2]}`;
}else if (positions_seq.length == 4){
iframe01.src = `potree/single_page_template_${stimuli}_2Elements.html?cloud=${cloud}&letter=${NodeData.controlLetter1}&x=${positions_seq[0][0]}&y=${positions_seq[0][1]}&z=${positions_seq[0][2]}&letter2=${NodeData.controlLetter2}&x2=${positions_seq[1][0]}&y2=${positions_seq[1][1]}&z2=${positions_seq[1][2]}`;
}else if (positions_seq.length == 6){
iframe01.src = `potree/single_page_template_${stimuli}_3Elements.html?cloud=${cloud}&letter=${NodeData.controlLetter1}&x=${positions_seq[0][0]}&y=${positions_seq[0][1]}&z=${positions_seq[0][2]}&letter2=${NodeData.controlLetter2}&x2=${positions_seq[1][0]}&y2=${positions_seq[1][1]}&z2=${positions_seq[1][2]}&letter3=${NodeData.controlLetter3}&x3=${positions_seq[2][0]}&y3=${positions_seq[2][1]}&z3=${positions_seq[2][2]}`;
}
</script>
<script>
var CameraPerspektiven = [];
// Updating the cameras every 250ms
$(function () {
var intervall = setInterval(updateCam, 250);
});
var oldCameraLeft = { x: null, y: null, z: null, yaw: null, pitch: null };
function updateCam() {
var iframe00 = document.getElementById("Frame00");
try {
var scene00 = iframe00.contentWindow.viewer.scene.view;
var position00 = scene00.position;
var yaw00 = scene00.yaw;
var pitch00 = scene00.pitch;
} catch (e) {
//scene not loaded
return;
}
if (
position00.x != oldCameraLeft.x ||
position00.y != oldCameraLeft.y ||
position00.z != oldCameraLeft.z ||
yaw00 != oldCameraLeft.yaw ||
pitch00 != oldCameraLeft.pitch
) {
oldCameraLeft.x = position00.x;
oldCameraLeft.y = position00.y;
oldCameraLeft.z = position00.z;
oldCameraLeft.yaw = yaw00;
oldCameraLeft.pitch = pitch00;
var cloudInfo = {
cloud: "F",
x: position00.x,
y: position00.y,
z: position00.z,
yaw: yaw00,
pitch: pitch00,
time: jsPsych.totalTime(),
};
var cloudInfoJson = JSON.stringify(cloudInfo);
console.log(cloudInfoJson);
CameraPerspektiven.push(cloudInfo);
}
}
function end() {
jsPsych.currentTrial().data.perspectives.push(CameraPerspektiven);
jsPsych.currentTrial().data.tab_switch = tabSwitchCount;
}
</script>
<script>
var timerElement = document.getElementById("end-trial");
var timeLeft = 10;
var countdown = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(countdown);
timerElement.textContent = "Evaluate";
document.getElementById("end-trial").disabled = false;
} else {
timerElement.textContent = timeLeft;
timeLeft--;
}
}, 1000);
</script>
<script>
var tabSwitchCount = 0;
document.addEventListener("visibilitychange", function () {
if (document.visibilityState === "hidden") {
tabSwitchCount++;
}
});
</script>
</html>

166
PCSurvey/potree/sequentiell_template2.html Normal file
View File

@@ -0,0 +1,166 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>a pc</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* Verhindert Scrollen auf der Seite */
}
#Frame01 {
position: absolute;
width: 100%;
height: 90%;
left: 1%;
top: 0%;
}
section {
position: absolute;
width: 30%;
height: 70%;
left: 46.5%;
top: 87%;
display: flex;
}
button {
position: absolute;
top: 91%;
display: block;
width: 40%;
padding: 10px;
background: #bc0ba8;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:disabled {
background: #ccc;
color: #666;
cursor: not-allowed;
}
button:not(:disabled):hover {
background: #5d0570;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<iframe id="Frame01"></iframe>
<button id="end-trial" onclick="end()" disabled="true"></button>
</div>
</body>
<script>
var timerElement = document.getElementById("end-trial");
var timeLeft = 10;
var countdown = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(countdown);
timerElement.textContent = "Evaluate";
document.getElementById("end-trial").disabled = false;
} else {
timerElement.textContent = timeLeft;
timeLeft--;
}
}, 1000);
</script>
<script>
// Get the current trial's data
var NodeData = jsPsych.currentTrial().data;
var letter = NodeData.controlLetter2;
var positions_seq = NodeData.positions;
var cloud = NodeData.cloudTwo;
var stimuli = NodeData.type;
var iframe01 = document.getElementById("Frame01");
if (positions_seq.length == 2) {
iframe01.src = `potree/single_page_template_${stimuli}.html?cloud=${cloud}&letter=${letter}&x=${positions_seq[1][0]}&y=${positions_seq[1][1]}&z=${positions_seq[1][2]}`;
} else if (positions_seq.length == 4) {
iframe01.src = `potree/single_page_template_${stimuli}_2Elements.html?cloud=${cloud}&letter=${NodeData.controlLetter3}&x=${positions_seq[2][0]}&y=${positions_seq[2][1]}&z=${positions_seq[2][2]}&letter2=${NodeData.controlLetter4}&x2=${positions_seq[3][0]}&y2=${positions_seq[3][1]}&z2=${positions_seq[3][2]}`;
} else if (positions_seq.length == 6){
iframe01.src = `potree/single_page_template_${stimuli}_3Elements.html?cloud=${cloud}&letter=${NodeData.controlLetter4}&x=${positions_seq[3][0]}&y=${positions_seq[3][1]}&z=${positions_seq[3][2]}&letter2=${NodeData.controlLetter5}&x2=${positions_seq[4][0]}&y2=${positions_seq[4][1]}&z2=${positions_seq[4][2]}&letter3=${NodeData.controlLetter6}&x3=${positions_seq[5][0]}&y3=${positions_seq[5][1]}&z3=${positions_seq[5][2]}`;
}
</script>
<script>
var CameraPerspektiven = [];
// Updating the cameras every 250ms
$(function () {
var intervall = setInterval(updateCam, 250);
});
var oldCameraLeft = { x: null, y: null, z: null, yaw: null, pitch: null };
function updateCam() {
var iframe00 = document.getElementById("Frame01");
try {
var scene00 = iframe00.contentWindow.viewer.scene.view;
var position00 = scene00.position;
var yaw00 = scene00.yaw;
var pitch00 = scene00.pitch;
} catch (e) {
//scene not loaded
return;
}
if (
position00.x != oldCameraLeft.x ||
position00.y != oldCameraLeft.y ||
position00.z != oldCameraLeft.z ||
yaw00 != oldCameraLeft.yaw ||
pitch00 != oldCameraLeft.pitch
) {
oldCameraLeft.x = position00.x;
oldCameraLeft.y = position00.y;
oldCameraLeft.z = position00.z;
oldCameraLeft.yaw = yaw00;
oldCameraLeft.pitch = pitch00;
var cloudInfo = {
cloud: "S",
x: position00.x,
y: position00.y,
z: position00.z,
yaw: yaw00,
pitch: pitch00,
time: jsPsych.totalTime(),
};
var cloudInfoJson = JSON.stringify(cloudInfo);
console.log(cloudInfoJson);
CameraPerspektiven.push(cloudInfo);
}
}
function end() {
jsPsych.currentTrial().data.perspectives.push(CameraPerspektiven);
jsPsych.currentTrial().data.tab_switch = tabSwitchCount;
}
</script>
<script>
var tabSwitchCount = 10;
document.addEventListener("visibilitychange", function () {
if (document.visibilityState === "hidden") {
tabSwitchCount++;
}
});
</script>
</html>

139
PCSurvey/potree/single_page_template_bremen.html Normal file
View File

@@ -0,0 +1,139 @@
<!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/perfect-scrollbar/css/perfect-scrollbar.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 type="text/javascript" src="../PCstatic/js/jspsych.js"></script>
<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
<script src="../libs/spectrum/spectrum.js"></script>
<script src="../libs/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
<script src="../libs/three.js/build/three.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 type="text/javascript" src="../build/potree/potree.js"></script>
<script src="../libs/plasio/js/laslaz.js"></script>
<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
<!-- INCLUDE SETTINGS HERE -->
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; ">
<div id="potree_render_area" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; "></div>
<!--<div id="potree_sidebar_container"></div> -->
</div>
<script>
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
//window.viewer = new Potree.Viewer(document.getElementById("potree_render_area_2"));
viewer.setEDLEnabled(true);
viewer.setFOV(90);
viewer.setPointBudget(1*1000*1000*1000);
viewer.loadSettingsFromURL();
viewer.useHQ = true;
var urlParams = new URLSearchParams(window.location.search);
var letter = urlParams.get('letter');
var cloud = urlParams.get('cloud');
const centerX = -22; // Mittelpunkt X
const centerY = 8; // Mittelpunkt
const radius = 70; // Radius des Kreises
const maxHeight = 40;
const minHeight = 0;
Potree.loadPointCloud(`pointclouds/${cloud}/cloud.js`, `${cloud}`, function(e){
viewer.scene.addPointCloud(e.pointcloud);
let material = e.pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
viewer.scene.view.position.set(centerX, centerY, 4);
viewer.scene.view.lookAt(-90, 50, 0);
viewer.setNavigationMode(Potree.FirstPersonControls);
viewer.setMoveSpeed(14);
});
const loader = new THREE.FontLoader();
//var controlLetter = test_data_N0102[0].data.controlLetter;
loader.load('https://threejs.org/examples/fonts/optimer_regular.typeface.json', function (font) {
var textGeometry = new THREE.TextGeometry(letter, {
font: font,
size: 0.9,
height: 0.2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
var textMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff});
var text = new THREE.Mesh(textGeometry, textMaterial);
text.rotation.x = Math.PI / 2;
var x = urlParams.get('x')
var y = urlParams.get('y')
var z = urlParams.get('z')
text.position.set(x, y, z);
viewer.scene.scene.add(text);
});
function restrictMovement() {
const position = viewer.scene.view.position;
const dx = position.x - centerX;
const dy = position.y - centerY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > radius) {
const angle = Math.atan2(dy, dx);
position.x = centerX + radius * Math.cos(angle);
position.y = centerY + radius * Math.sin(angle);
}
if (position.z > maxHeight) {
position.z = maxHeight;
}
if (position.z < minHeight) {
position.z = minHeight;
}
}
viewer.addEventListener('update', restrictMovement);
</script>
</html>

165
PCSurvey/potree/single_page_template_bremen_2Elements.html Normal file
View File

@@ -0,0 +1,165 @@
<!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/perfect-scrollbar/css/perfect-scrollbar.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 type="text/javascript" src="../PCstatic/js/jspsych.js"></script>
<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
<script src="../libs/spectrum/spectrum.js"></script>
<script src="../libs/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
<script src="../libs/three.js/build/three.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 type="text/javascript" src="../build/potree/potree.js"></script>
<script src="../libs/plasio/js/laslaz.js"></script>
<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
<!-- INCLUDE SETTINGS HERE -->
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; ">
<div id="potree_render_area" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; "></div>
<!--<div id="potree_sidebar_container"></div> -->
</div>
<script>
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
//window.viewer = new Potree.Viewer(document.getElementById("potree_render_area_2"));
viewer.setEDLEnabled(true);
viewer.setFOV(90);
viewer.setPointBudget(1*1000*1000*1000);
viewer.loadSettingsFromURL();
viewer.useHQ = true;
var urlParams = new URLSearchParams(window.location.search);
var letter = urlParams.get('letter');
var letter2 = urlParams.get('letter2');
var cloud = urlParams.get('cloud');
const centerX = -22; // Mittelpunkt X
const centerY = 8; // Mittelpunkt
const radius = 70; // Radius des Kreises
const maxHeight = 40;
const minHeight = 0;
Potree.loadPointCloud(`pointclouds/${cloud}/cloud.js`, `${cloud}`, function(e){
viewer.scene.addPointCloud(e.pointcloud);
let material = e.pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
viewer.scene.view.position.set(centerX, centerY, 4);
viewer.scene.view.lookAt(-90, 50, 0);
viewer.setNavigationMode(Potree.FirstPersonControls);
viewer.setMoveSpeed(14);
});
const loader = new THREE.FontLoader();
//var controlLetter = test_data_N0102[0].data.controlLetter;
loader.load('https://threejs.org/examples/fonts/optimer_regular.typeface.json', function (font) {
var textGeometry = new THREE.TextGeometry(letter, {
font: font,
size: 0.9,
height: 0.2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
})
var textGeometry2 = new THREE.TextGeometry(letter2, {
font: font,
size: 0.9,
height: 0.2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
})
;
var textMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff});
var text = new THREE.Mesh(textGeometry, textMaterial);
text.rotation.x = Math.PI / 2;
var x = urlParams.get('x')
var y = urlParams.get('y')
var z = urlParams.get('z')
text.position.set(x, y, z);
viewer.scene.scene.add(text);
var text2 = new THREE.Mesh(textGeometry2, textMaterial);
text2.rotation.x = Math.PI / 2;
var x2 = urlParams.get('x2')
var y2 = urlParams.get('y2')
var z2 = urlParams.get('z2')
text2.position.set(x2, y2, z2);
viewer.scene.scene.add(text2);
});
function restrictMovement() {
const position = viewer.scene.view.position;
const dx = position.x - centerX;
const dy = position.y - centerY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > radius) {
const angle = Math.atan2(dy, dx);
position.x = centerX + radius * Math.cos(angle);
position.y = centerY + radius * Math.sin(angle);
}
if (position.z > maxHeight) {
position.z = maxHeight;
}
if (position.z < minHeight) {
position.z = minHeight;
}
}
viewer.addEventListener('update', restrictMovement);
</script>
</html>

188
PCSurvey/potree/single_page_template_bremen_3Elements.html Normal file
View File

@@ -0,0 +1,188 @@
<!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/perfect-scrollbar/css/perfect-scrollbar.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 type="text/javascript" src="../PCstatic/js/jspsych.js"></script>
<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
<script src="../libs/spectrum/spectrum.js"></script>
<script src="../libs/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
<script src="../libs/three.js/build/three.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 type="text/javascript" src="../build/potree/potree.js"></script>
<script src="../libs/plasio/js/laslaz.js"></script>
<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
<!-- INCLUDE SETTINGS HERE -->
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; ">
<div id="potree_render_area" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; "></div>
<!--<div id="potree_sidebar_container"></div> -->
</div>
<script>
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
//window.viewer = new Potree.Viewer(document.getElementById("potree_render_area_2"));
viewer.setEDLEnabled(true);
viewer.setFOV(90);
viewer.setPointBudget(1*1000*1000*1000);
viewer.loadSettingsFromURL();
viewer.useHQ = true;
var urlParams = new URLSearchParams(window.location.search);
var letter = urlParams.get('letter');
var letter2 = urlParams.get('letter2');
var letter3 = urlParams.get('letter3');
var cloud = urlParams.get('cloud');
const centerX = -22; // Mittelpunkt X
const centerY = 8; // Mittelpunkt
const radius = 70; // Radius des Kreises
const maxHeight = 40;
const minHeight = 0;
Potree.loadPointCloud(`pointclouds/${cloud}/cloud.js`, `${cloud}`, function(e){
viewer.scene.addPointCloud(e.pointcloud);
let material = e.pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
viewer.scene.view.position.set(centerX, centerY, 4);
viewer.scene.view.lookAt(-90, 50, 0);
viewer.setNavigationMode(Potree.FirstPersonControls);
viewer.setMoveSpeed(14);
});
const loader = new THREE.FontLoader();
//var controlLetter = test_data_N0102[0].data.controlLetter;
loader.load('https://threejs.org/examples/fonts/optimer_regular.typeface.json', function (font) {
var textGeometry = new THREE.TextGeometry(letter, {
font: font,
size: 0.9,
height: 0.2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
})
var textGeometry2 = new THREE.TextGeometry(letter2, {
font: font,
size: 0.9,
height: 0.2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
})
;
var textGeometry3 = new THREE.TextGeometry(letter3, {
font: font,
size: 0.9,
height: 0.2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
})
var textMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff});
var text = new THREE.Mesh(textGeometry, textMaterial);
text.rotation.x = Math.PI / 2;
var x = urlParams.get('x')
var y = urlParams.get('y')
var z = urlParams.get('z')
text.position.set(x, y, z);
viewer.scene.scene.add(text);
var text2 = new THREE.Mesh(textGeometry2, textMaterial);
text2.rotation.x = Math.PI / 2;
var x2 = urlParams.get('x2')
var y2 = urlParams.get('y2')
var z2 = urlParams.get('z2')
text2.position.set(x2, y2, z2);
viewer.scene.scene.add(text2);
var text3 = new THREE.Mesh(textGeometry3, textMaterial);
text3.rotation.x = Math.PI / 2;
var x3 = urlParams.get('x3')
var y3 = urlParams.get('y3')
var z3 = urlParams.get('z3')
text3.position.set(x3, y3, z3);
viewer.scene.scene.add(text3);
});
function restrictMovement() {
const position = viewer.scene.view.position;
const dx = position.x - centerX;
const dy = position.y - centerY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > radius) {
const angle = Math.atan2(dy, dx);
position.x = centerX + radius * Math.cos(angle);
position.y = centerY + radius * Math.sin(angle);
}
if (position.z > maxHeight) {
position.z = maxHeight;
}
if (position.z < minHeight) {
position.z = minHeight;
}
}
viewer.addEventListener('update', restrictMovement);
</script>
</html>

134
PCSurvey/potree/single_page_template_randersacker.html Normal file
View File

@@ -0,0 +1,134 @@
<!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/perfect-scrollbar/css/perfect-scrollbar.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 type="text/javascript" src="../PCstatic/js/jspsych.js"></script>
<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
<script src="../libs/spectrum/spectrum.js"></script>
<script src="../libs/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
<script src="../libs/three.js/build/three.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 type="text/javascript" src="../build/potree/potree.js"></script>
<script src="../libs/plasio/js/laslaz.js"></script>
<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
<!-- INCLUDE SETTINGS HERE -->
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; ">
<div id="potree_render_area" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; "></div>
<!--<div id="potree_sidebar_container"></div> -->
</div>
<script>
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
//window.viewer = new Potree.Viewer(document.getElementById("potree_render_area_2"));
viewer.setEDLEnabled(true);
viewer.setFOV(90);
viewer.setPointBudget(1*1000*1000*1000);
viewer.loadSettingsFromURL();
viewer.useHQ = true;
var urlParams = new URLSearchParams(window.location.search);
var letter = urlParams.get('letter');
var cloud = urlParams.get('cloud');
const centerX = 3.5; // Mittelpunkt X
const centerY = -10.6; // Mittelpunkt
const radius = 35; // Radius des Kreises
const maxHeight = 15;
const minHeight = 0;
Potree.loadPointCloud(`pointclouds/${cloud}/cloud.js`, `${cloud}`, function(e){
viewer.scene.addPointCloud(e.pointcloud);
let material = e.pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
viewer.scene.view.position.set(centerX, centerY, 1);
viewer.scene.view.lookAt(0, -90, 0);
viewer.setNavigationMode(Potree.FirstPersonControls);
viewer.setMoveSpeed(7);
});
const loader = new THREE.FontLoader();
//var controlLetter = test_data_N0102[0].data.controlLetter;
loader.load('https://threejs.org/examples/fonts/optimer_regular.typeface.json', function (font) {
var textGeometry = new THREE.TextGeometry(letter, {
font: font,
size: 0.3,
height: 0.1,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
var textMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff}); // Blaue Farbe
var textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.rotation.x = Math.PI / 2;
var x = urlParams.get('x')
var y = urlParams.get('y')
var z = urlParams.get('z')
textMesh.position.set(x, y, z);
viewer.scene.scene.add(textMesh);
});
function restrictMovement() {
const position = viewer.scene.view.position;
const dx = position.x - centerX;
const dy = position.y - centerY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > radius) {
const angle = Math.atan2(dy, dx);
position.x = centerX + radius * Math.cos(angle);
position.y = centerY + radius * Math.sin(angle);
}
if (position.z > maxHeight) {
position.z = maxHeight;
}
if (position.z < minHeight) {
position.z = minHeight;
}
}
viewer.addEventListener('update', restrictMovement);
</script>
</html>

159
PCSurvey/potree/single_page_template_randersacker_2Elements.html Normal file
View File

@@ -0,0 +1,159 @@
<!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/perfect-scrollbar/css/perfect-scrollbar.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 type="text/javascript" src="../PCstatic/js/jspsych.js"></script>
<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
<script src="../libs/spectrum/spectrum.js"></script>
<script src="../libs/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
<script src="../libs/three.js/build/three.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 type="text/javascript" src="../build/potree/potree.js"></script>
<script src="../libs/plasio/js/laslaz.js"></script>
<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
<!-- INCLUDE SETTINGS HERE -->
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; ">
<div id="potree_render_area" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; "></div>
<!--<div id="potree_sidebar_container"></div> -->
</div>
<script>
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
//window.viewer = new Potree.Viewer(document.getElementById("potree_render_area_2"));
viewer.setEDLEnabled(true);
viewer.setFOV(90);
viewer.setPointBudget(1*1000*1000*1000);
viewer.loadSettingsFromURL();
viewer.useHQ = true;
var urlParams = new URLSearchParams(window.location.search);
var letter = urlParams.get('letter');
var letter2 = urlParams.get('letter2');
var cloud = urlParams.get('cloud');
const centerX = 3.5; // Mittelpunkt X
const centerY = -10.6; // Mittelpunkt
const radius = 35; // Radius des Kreises
const maxHeight = 15;
const minHeight = 0;
Potree.loadPointCloud(`pointclouds/${cloud}/cloud.js`, `${cloud}`, function(e){
viewer.scene.addPointCloud(e.pointcloud);
let material = e.pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
viewer.scene.view.position.set(centerX, centerY, 1);
viewer.scene.view.lookAt(0, -90, 0);
viewer.setNavigationMode(Potree.FirstPersonControls);
viewer.setMoveSpeed(7);
});
const loader = new THREE.FontLoader();
//var controlLetter = test_data_N0102[0].data.controlLetter;
loader.load('https://threejs.org/examples/fonts/optimer_regular.typeface.json', function (font) {
var textGeometry = new THREE.TextGeometry(letter, {
font: font,
size: 0.3,
height: 0.1,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
var textGeometry2 = new THREE.TextGeometry(letter2, {
font: font,
size: 0.3,
height: 0.1,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
var textMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff}); // Blaue Farbe
var textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.rotation.x = Math.PI / 2;
var x = urlParams.get('x')
var y = urlParams.get('y')
var z = urlParams.get('z')
textMesh.position.set(x, y, z);
viewer.scene.scene.add(textMesh);
var text2 = new THREE.Mesh(textGeometry2, textMaterial);
text2.rotation.x = Math.PI / 2;
var x2 = urlParams.get('x2')
var y2 = urlParams.get('y2')
var z2 = urlParams.get('z2')
text2.position.set(x2, y2, z2);
viewer.scene.scene.add(text2);
});
function restrictMovement() {
const position = viewer.scene.view.position;
const dx = position.x - centerX;
const dy = position.y - centerY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > radius) {
const angle = Math.atan2(dy, dx);
position.x = centerX + radius * Math.cos(angle);
position.y = centerY + radius * Math.sin(angle);
}
if (position.z > maxHeight) {
position.z = maxHeight;
}
if (position.z < minHeight) {
position.z = minHeight;
}
}
viewer.addEventListener('update', restrictMovement);
</script>
</html>

183
PCSurvey/potree/single_page_template_randersacker_3Elements.html Normal file
View File

@@ -0,0 +1,183 @@
<!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/perfect-scrollbar/css/perfect-scrollbar.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 type="text/javascript" src="../PCstatic/js/jspsych.js"></script>
<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
<script src="../libs/spectrum/spectrum.js"></script>
<script src="../libs/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
<script src="../libs/three.js/build/three.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 type="text/javascript" src="../build/potree/potree.js"></script>
<script src="../libs/plasio/js/laslaz.js"></script>
<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
<!-- INCLUDE SETTINGS HERE -->
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; ">
<div id="potree_render_area" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; "></div>
<!--<div id="potree_sidebar_container"></div> -->
</div>
<script>
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
//window.viewer = new Potree.Viewer(document.getElementById("potree_render_area_2"));
viewer.setEDLEnabled(true);
viewer.setFOV(90);
viewer.setPointBudget(1*1000*1000*1000);
viewer.loadSettingsFromURL();
viewer.useHQ = true;
var urlParams = new URLSearchParams(window.location.search);
var letter = urlParams.get('letter');
var letter2 = urlParams.get('letter2');
var letter3 = urlParams.get('letter3');
var cloud = urlParams.get('cloud');
const centerX = 3.5; // Mittelpunkt X
const centerY = -10.6; // Mittelpunkt
const radius = 35; // Radius des Kreises
const maxHeight = 15;
const minHeight = 0;
Potree.loadPointCloud(`pointclouds/${cloud}/cloud.js`, `${cloud}`, function(e){
viewer.scene.addPointCloud(e.pointcloud);
let material = e.pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
viewer.scene.view.position.set(centerX, centerY, 1);
viewer.scene.view.lookAt(0, -90, 0);
viewer.setNavigationMode(Potree.FirstPersonControls);
viewer.setMoveSpeed(7);
});
const loader = new THREE.FontLoader();
//var controlLetter = test_data_N0102[0].data.controlLetter;
loader.load('https://threejs.org/examples/fonts/optimer_regular.typeface.json', function (font) {
var textGeometry = new THREE.TextGeometry(letter, {
font: font,
size: 0.3,
height: 0.1,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
var textGeometry2 = new THREE.TextGeometry(letter2, {
font: font,
size: 0.3,
height: 0.1,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
var textGeometry3 = new THREE.TextGeometry(letter3, {
font: font,
size: 0.3,
height: 0.1,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
var textMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff}); // Blaue Farbe
var textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.rotation.x = Math.PI / 2;
var x = urlParams.get('x')
var y = urlParams.get('y')
var z = urlParams.get('z')
textMesh.position.set(x, y, z);
viewer.scene.scene.add(textMesh);
var text2 = new THREE.Mesh(textGeometry2, textMaterial);
text2.rotation.x = Math.PI / 2;
var x2 = urlParams.get('x2')
var y2 = urlParams.get('y2')
var z2 = urlParams.get('z2')
text2.position.set(x2, y2, z2);
viewer.scene.scene.add(text2);
var text3 = new THREE.Mesh(textGeometry3, textMaterial);
text3.rotation.x = Math.PI / 2;
var x3 = urlParams.get('x3')
var y3 = urlParams.get('y3')
var z3 = urlParams.get('z3')
text3.position.set(x3, y3, z3);
viewer.scene.scene.add(text3);
});
function restrictMovement() {
const position = viewer.scene.view.position;
const dx = position.x - centerX;
const dy = position.y - centerY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > radius) {
const angle = Math.atan2(dy, dx);
position.x = centerX + radius * Math.cos(angle);
position.y = centerY + radius * Math.sin(angle);
}
if (position.z > maxHeight) {
position.z = maxHeight;
}
if (position.z < minHeight) {
position.z = minHeight;
}
}
viewer.addEventListener('update', restrictMovement);
</script>
</html>

105
PCSurvey/potree/single_page_template_trial.html Normal file
View File

@@ -0,0 +1,105 @@
<!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/perfect-scrollbar/css/perfect-scrollbar.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 type="text/javascript" src="../PCstatic/js/jspsych.js"></script>
<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
<script src="../libs/spectrum/spectrum.js"></script>
<script src="../libs/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
<script src="../libs/three.js/build/three.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 type="text/javascript" src="../build/potree/potree.js"></script>
<script src="../libs/plasio/js/laslaz.js"></script>
<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
<!-- INCLUDE SETTINGS HERE -->
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; ">
<div id="potree_render_area" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; "></div>
<!--<div id="potree_sidebar_container"></div> -->
</div>
<script>
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
//window.viewer = new Potree.Viewer(document.getElementById("potree_render_area_2"));
viewer.setEDLEnabled(true);
viewer.setFOV(90);
viewer.setPointBudget(1*1000*1000*1000);
viewer.loadSettingsFromURL();
viewer.useHQ = true;
var urlParams = new URLSearchParams(window.location.search);
var letter = urlParams.get('letter');
var cloud = urlParams.get('cloud');
Potree.loadPointCloud(`pointclouds/${cloud}/cloud.js`, `${cloud}`, function(e){
viewer.scene.addPointCloud(e.pointcloud);
let material = e.pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
viewer.scene.view.position.set(0, 0, 5);
viewer.scene.view.lookAt(17, 10, 0);
viewer.setNavigationMode(Potree.FirstPersonControls);
viewer.setMoveSpeed(25);
});
const loader = new THREE.FontLoader();
//var controlLetter = test_data_N0102[0].data.controlLetter;
loader.load('https://threejs.org/examples/fonts/optimer_regular.typeface.json', function (font) {
var textGeometry = new THREE.TextGeometry(letter, {
font: font,
size: 6,
height: 2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
var textMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff}); // Blaue Farbe
var textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.rotation.x = Math.PI / 2;
textMesh.position.set(-63, 3, 8);
viewer.scene.scene.add(textMesh);
});
</script>
</html>

124
PCSurvey/potree/single_page_template_trial_2Elements.html Normal file
View File

@@ -0,0 +1,124 @@
<!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/perfect-scrollbar/css/perfect-scrollbar.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 type="text/javascript" src="../PCstatic/js/jspsych.js"></script>
<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
<script src="../libs/spectrum/spectrum.js"></script>
<script src="../libs/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
<script src="../libs/three.js/build/three.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 type="text/javascript" src="../build/potree/potree.js"></script>
<script src="../libs/plasio/js/laslaz.js"></script>
<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
<!-- INCLUDE SETTINGS HERE -->
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; ">
<div id="potree_render_area" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; "></div>
<!--<div id="potree_sidebar_container"></div> -->
</div>
<script>
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
//window.viewer = new Potree.Viewer(document.getElementById("potree_render_area_2"));
viewer.setEDLEnabled(true);
viewer.setFOV(90);
viewer.setPointBudget(1*1000*1000*1000);
viewer.loadSettingsFromURL();
viewer.useHQ = true;
var urlParams = new URLSearchParams(window.location.search);
var letter = urlParams.get('letter');
var letter2 = urlParams.get('letter2');
var cloud = urlParams.get('cloud');
Potree.loadPointCloud(`pointclouds/${cloud}/cloud.js`, `${cloud}`, function(e){
viewer.scene.addPointCloud(e.pointcloud);
let material = e.pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
viewer.scene.view.position.set(0, 0, 5);
viewer.scene.view.lookAt(17, 10, 0);
viewer.setNavigationMode(Potree.FirstPersonControls);
viewer.setMoveSpeed(25);
});
const loader = new THREE.FontLoader();
//var controlLetter = test_data_N0102[0].data.controlLetter;
loader.load('https://threejs.org/examples/fonts/optimer_regular.typeface.json', function (font) {
var textGeometry = new THREE.TextGeometry(letter, {
font: font,
size: 6,
height: 2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
var textGeometry2 = new THREE.TextGeometry(letter2, {
font: font,
size: 6,
height: 2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
var textMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff}); // Blaue Farbe
var textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.rotation.x = Math.PI / 2;
textMesh.position.set(-63, 3, 8);
viewer.scene.scene.add(textMesh);
var textMesh2 = new THREE.Mesh(textGeometry2, textMaterial);
textMesh2.rotation.x = Math.PI / 2;
textMesh2.position.set(2, -35, 9);
viewer.scene.scene.add(textMesh2);
});
</script>
</html>

144
PCSurvey/potree/single_page_template_trial_3Elements.html Normal file
View File

@@ -0,0 +1,144 @@
<!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/perfect-scrollbar/css/perfect-scrollbar.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 type="text/javascript" src="../PCstatic/js/jspsych.js"></script>
<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
<script src="../libs/spectrum/spectrum.js"></script>
<script src="../libs/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
<script src="../libs/three.js/build/three.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 type="text/javascript" src="../build/potree/potree.js"></script>
<script src="../libs/plasio/js/laslaz.js"></script>
<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
<!-- INCLUDE SETTINGS HERE -->
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; ">
<div id="potree_render_area" style="position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; "></div>
<!--<div id="potree_sidebar_container"></div> -->
</div>
<script>
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
//window.viewer = new Potree.Viewer(document.getElementById("potree_render_area_2"));
viewer.setEDLEnabled(true);
viewer.setFOV(90);
viewer.setPointBudget(1*1000*1000*1000);
viewer.loadSettingsFromURL();
viewer.useHQ = true;
var urlParams = new URLSearchParams(window.location.search);
var letter = urlParams.get('letter');
var letter2 = urlParams.get('letter2');
var letter3 = urlParams.get('letter3');
var cloud = urlParams.get('cloud');
Potree.loadPointCloud(`pointclouds/${cloud}/cloud.js`, `${cloud}`, function(e){
viewer.scene.addPointCloud(e.pointcloud);
let material = e.pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
viewer.scene.view.position.set(0, 0, 5);
viewer.scene.view.lookAt(17, 10, 0);
viewer.setNavigationMode(Potree.FirstPersonControls);
viewer.setMoveSpeed(25);
});
const loader = new THREE.FontLoader();
//var controlLetter = test_data_N0102[0].data.controlLetter;
loader.load('https://threejs.org/examples/fonts/optimer_regular.typeface.json', function (font) {
var textGeometry = new THREE.TextGeometry(letter, {
font: font,
size: 6,
height: 2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
var textGeometry2 = new THREE.TextGeometry(letter2, {
font: font,
size: 6,
height: 2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
var textGeometry3 = new THREE.TextGeometry(letter3, {
font: font,
size: 6,
height: 2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,
});
var textMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff}); // Blaue Farbe
var textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.rotation.x = Math.PI / 2;
textMesh.position.set(-63, 3, 8);
viewer.scene.scene.add(textMesh);
console.log(letter3+" sssui")
var textMesh2 = new THREE.Mesh(textGeometry2, textMaterial);
textMesh2.rotation.x = Math.PI / 2;
textMesh2.position.set(2, -35, 9);
viewer.scene.scene.add(textMesh2);
var textMesh3 = new THREE.Mesh(textGeometry3, textMaterial);
textMesh3.rotation.x = Math.PI / 2;
textMesh3.position.set(20, 51, 20);
viewer.scene.scene.add(textMesh3);
});
</script>
</html>