Skip to content
GitLab
Commit 97632a94 authored by Percen's avatar Percen
Browse files

Update public/index.html

parent 0aca3554
Show whitespace changes
Inline Side-by-side
public/index.html
View file @ 97632a94
...@@ -11,21 +11,24 @@ ...@@ -11,21 +11,24 @@
</head> </head>
<body> <body>
<button onclick="activateXR()">Start city planning</button> <button id="startButton" onclick="activateXR()">Start city planning</button>
<script> <script>
let minimapRenderer, minimapCamera;
async function activateXR() { async function activateXR() {
document.getElementById("startButton").style.display = "none"; // Verstecke den Start-Button
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
document.body.appendChild(canvas); document.body.appendChild(canvas);
const gl = canvas.getContext("webgl", {xrCompatible: true}); const gl = canvas.getContext("webgl", {xrCompatible: true});
const scene = new THREE.Scene(); const scene = new THREE.Scene();
// Lichtquelle
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
directionalLight.position.set(10, 15, 10); directionalLight.position.set(10, 15, 10);
scene.add(directionalLight); scene.add(directionalLight);
// Haupt-Renderer
const renderer = new THREE.WebGLRenderer({ const renderer = new THREE.WebGLRenderer({
alpha: true, alpha: true,
preserveDrawingBuffer: true, preserveDrawingBuffer: true,
...@@ -41,22 +44,13 @@ async function activateXR() { ...@@ -41,22 +44,13 @@ async function activateXR() {
session.updateRenderState({ session.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl) baseLayer: new XRWebGLLayer(session, gl)
}); });
const referenceSpace = await session.requestReferenceSpace('local'); const referenceSpace = await session.requestReferenceSpace('local');
const viewerSpace = await session.requestReferenceSpace('viewer'); const viewerSpace = await session.requestReferenceSpace('viewer');
const hitTestSource = await session.requestHitTestSource({ space: viewerSpace }); const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
// Minimap-Renderer einrichten // Minimap setup (wird erst jetzt erstellt)
const minimapSize = 5; setupMinimap();
const minimapCamera = new THREE.OrthographicCamera(-minimapSize, minimapSize, minimapSize, -minimapSize, 0.1, 100);
minimapCamera.position.set(0, 10, 0); // Vogelperspektive
minimapCamera.lookAt(0, 0, 0);
const minimapRenderer = new THREE.WebGLRenderer({ alpha: true });
minimapRenderer.setSize(200, 200);
minimapRenderer.domElement.style.position = "absolute";
minimapRenderer.domElement.style.bottom = "10px";
minimapRenderer.domElement.style.right = "10px";
document.body.appendChild(minimapRenderer.domElement);
const loader = new THREE.GLTFLoader(); const loader = new THREE.GLTFLoader();
let reticle; let reticle;
...@@ -82,7 +76,8 @@ async function activateXR() { ...@@ -82,7 +76,8 @@ async function activateXR() {
// Renderloop // Renderloop
const onXRFrame = (time, frame) => { const onXRFrame = (time, frame) => {
session.requestAnimationFrame(onXRFrame); session.requestAnimationFrame(onXRFrame);
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer)
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
const pose = frame.getViewerPose(referenceSpace); const pose = frame.getViewerPose(referenceSpace);
if (pose) { if (pose) {
...@@ -103,16 +98,39 @@ async function activateXR() { ...@@ -103,16 +98,39 @@ async function activateXR() {
} }
// Minimap-Update // Minimap-Update
minimapCamera.position.x = camera.position.x; updateMinimap(camera, scene);
minimapCamera.position.z = camera.position.z;
minimapRenderer.render(scene, minimapCamera);
// Szene rendern
renderer.render(scene, camera); renderer.render(scene, camera);
} }
} };
session.requestAnimationFrame(onXRFrame); session.requestAnimationFrame(onXRFrame);
} }
function setupMinimap() {
const minimapSize = 5; // Sichtfeld der Minimap
minimapCamera = new THREE.OrthographicCamera(-minimapSize, minimapSize, minimapSize, -minimapSize, 0.1, 100);
minimapCamera.position.set(0, 10, 0); // Kamera in Vogelperspektive
minimapCamera.lookAt(0, 0, 0);
minimapRenderer = new THREE.WebGLRenderer({ alpha: true });
minimapRenderer.setSize(200, 200);
minimapRenderer.domElement.style.position = "absolute";
minimapRenderer.domElement.style.bottom = "10px";
minimapRenderer.domElement.style.right = "10px";
document.body.appendChild(minimapRenderer.domElement);
console.log("Minimap aktiviert");
}
function updateMinimap(mainCamera, scene) {
if (minimapCamera && minimapRenderer) {
// Synchronisiere die Position der Minimap-Kamera mit der Hauptkamera
minimapCamera.position.x = mainCamera.position.x;
minimapCamera.position.z = mainCamera.position.z;
minimapRenderer.render(scene, minimapCamera);
}
}
</script> </script>
</body> </body>
</html> </html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal