From b373f8ae1cd51d1cadf1c17b4904e6b234bf876f Mon Sep 17 00:00:00 2001
From: Alfakhori <muhammad.alfakhori@hft-stuttgart.de>
Date: Wed, 3 May 2023 09:29:16 +0000
Subject: [PATCH] Update public/index.html Deleted public/page2.html,
public/page3.html, public/page4.html, public/page5.html
---
public/index.html | 31 +++++++----
public/page2.html | 131 ----------------------------------------------
public/page3.html | 28 ----------
public/page4.html | 24 ---------
public/page5.html | 18 -------
5 files changed, 20 insertions(+), 212 deletions(-)
delete mode 100644 public/page2.html
delete mode 100644 public/page3.html
delete mode 100644 public/page4.html
delete mode 100644 public/page5.html
diff --git a/public/index.html b/public/index.html
index 34c2522..03fda31 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,18 +1,27 @@
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <title>Links to Five Pages</title>
+ <title>My Buttons Page</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <style>
+ /* Style for the buttons */
+ button {
+ background-color: blue;
+ color: white;
+ font-size: 24px;
+ padding: 12px 24px;
+ border: none;
+ border-radius: 4px;
+ margin: 20px;
+ cursor: pointer;
+ }
+ </style>
</head>
<body>
- <h1>Links to Five Pages</h1>
- <ul>
- <li><a href="page1.html">Page 1</a></li>
- <li><a href="page2.html">Page 2</a></li>
- <li><a href="page3.html">Page 3</a></li>
- <li><a href="page4.html">Page 4</a></li>
- <li><a href="page5.html">Page 5</a></li>
- <li><a href="webXR.html">webXR</a></li>
- </ul>
+ <h1>Welcome to My Page!</h1>
+ <p>Click on one of the buttons below to go to another page:</p>
+ <button onclick="location.href='page1.html'">Go to Page 1</button>
+ <button onclick="location.href='page2.html'">Go to Page 2</button>
</body>
</html>
diff --git a/public/page2.html b/public/page2.html
deleted file mode 100644
index deef9cb..0000000
--- a/public/page2.html
+++ /dev/null
@@ -1,131 +0,0 @@
-<!doctype html>
-<html>
-<head>
- <meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <title>Hit Tree 1.0</title>
-
- <!-- three.js -->
- <script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
-
- <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
-</head>
-<body>
-
-<!-- Starting an immersive WebXR session requires user interaction.
- We start this one with a simple button. -->
-<button onclick="activateXR()">Start Hello WebXR</button>
-<script>
-async function activateXR() {
- // Add a canvas element and initialize a WebGL context that is compatible with WebXR.
- const canvas = document.createElement("canvas");
- document.body.appendChild(canvas);
- const gl = canvas.getContext("webgl", {xrCompatible: true});
-
- const scene = new THREE.Scene();
-
- const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
- directionalLight.position.set(10, 15, 10);
- scene.add(directionalLight);
-
-// Set up the WebGLRenderer, which handles rendering to the session's base layer.
-const renderer = new THREE.WebGLRenderer({
- alpha: true,
- preserveDrawingBuffer: true,
- canvas: canvas,
- context: gl
-});
-renderer.autoClear = false;
-
-// The API directly updates the camera matrices.
-// Disable matrix auto updates so three.js doesn't attempt
-// to handle the matrices independently.
-const camera = new THREE.PerspectiveCamera();
-camera.matrixAutoUpdate = false;
-
-// Initialize a WebXR session using "immersive-ar".
-const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']});
-session.updateRenderState({
- baseLayer: new XRWebGLLayer(session, gl)
-});
-
-// A 'local' reference space has a native origin that is located
-// near the viewer's position at the time the session was created.
-const referenceSpace = await session.requestReferenceSpace('local');
-
-// Create another XRReferenceSpace that has the viewer as the origin.
-const viewerSpace = await session.requestReferenceSpace('viewer');
-// Perform hit testing using the viewer as origin.
-const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
-
-
-
-
-const loader = new THREE.GLTFLoader();
-let reticle;
-loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) {
- reticle = gltf.scene;
- reticle.visible = false;
- scene.add(reticle);
-})
-
-let flower;
-loader.load("/assets/tree/scene.gltf", function(gltf) {
- flower = gltf.scene;
-});
-
-session.addEventListener("select", (event) => {
- if (flower) {
- const clone = flower.clone();
- clone.position.copy(reticle.position);
- scene.add(clone);
- }
-});
-
-// Create a render loop that allows us to draw on the AR view.
-const onXRFrame = (time, frame) => {
- // Queue up the next draw request.
- session.requestAnimationFrame(onXRFrame);
-
- // Bind the graphics framebuffer to the baseLayer's framebuffer
- gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer)
-
- // Retrieve the pose of the device.
- // XRFrame.getViewerPose can return null while the session attempts to establish tracking.
- const pose = frame.getViewerPose(referenceSpace);
- if (pose) {
- // In mobile AR, we only have one view.
- const view = pose.views[0];
-
- const viewport = session.renderState.baseLayer.getViewport(view);
- renderer.setSize(viewport.width, viewport.height)
-
- // Use the view's transform matrix and projection matrix to configure the THREE.camera.
- camera.matrix.fromArray(view.transform.matrix)
- camera.projectionMatrix.fromArray(view.projectionMatrix);
- camera.updateMatrixWorld(true);
-
- const hitTestResults = frame.getHitTestResults(hitTestSource);
- if (hitTestResults.length > 0 && reticle) {
- const hitPose = hitTestResults[0].getPose(referenceSpace);
- reticle.visible = true;
- reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z)
- reticle.updateMatrixWorld(true);
- }
-
-
-
- // Render the scene with THREE.WebGLRenderer.
- renderer.render(scene, camera)
- }
-}
-session.requestAnimationFrame(onXRFrame);
-
-
-
-
-}
-</script>
-</body>
-</html>
diff --git a/public/page3.html b/public/page3.html
deleted file mode 100644
index ec2bbb1..0000000
--- a/public/page3.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!doctype html>
-<html>
- <head>
- <title>Code from AR Studio</title>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
- <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
- <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
- </head>
-
- <body style="margin: 0; overflow: hidden;">
- <a-scene
- embedded
- loading-screen="enabled: false;"
- arjs="sourceType: webcam; debugUIEnabled: false;"
- >
- <a-image
- src="assets/asset.jpeg"
- look-at="[gps-camera]"
- scale="1 1 1"
- gps-entity-place=""latitude: 48.77988545503521; longitude: 9.173586527979367;"
- ></a-image>
-
- <a-camera gps-camera rotation-reader></a-camera>
- </a-scene>
- </body>
-</html>
diff --git a/public/page4.html b/public/page4.html
deleted file mode 100644
index 4b6baf3..0000000
--- a/public/page4.html
+++ /dev/null
@@ -1,24 +0,0 @@
-
-<!DOCTYPE html>
-<html>
-<head>
-<title>Dev new location</title>
-<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
-<!-- Assumes AR.js build is in the 'AR.js' directory -->
-<script type='text/javascript' src='build/ar-threex-location-only.js'></script>
-<script type='text/javascript' src='build/aframe-ar.js'></script>
-</head>
-<body>
-<!--
-This is using a simulated location. If testing on a mobile device, remove the
-'simulateLatitude' and 'simulateLongitude' properties from 'gps-new-camera' and
-change the 'latitude' and 'longitude' properties to a location around 0.001
-degrees from your real location.
--->
-<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' renderer='antialias: true; alpha: true'>
- <a-camera gps-new-camera='gpsMinDistance: 5; simulateLatitude: 51.049; simulateLongitude: -0.723'></a-camera>
- <a-entity material='color: red' geometry='primitive: box' gps-new-entity-place="latitude: 48.77988545503521; longitude: 9.173586527979367" scale="10 10 10"></a-entity>
-</a-scene>
-
-</body>
-</html>
diff --git a/public/page5.html b/public/page5.html
deleted file mode 100644
index c29d345..0000000
--- a/public/page5.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>dev location</title>
- <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
- <script type='text/javascript' src='build/aframe-ar-nft.js'></script>
- </head>
- <body>
- <a-scene
- vr-mode-ui="enabled: false"
- arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'
- renderer='antialias: true; alpha: true'>
- <a-camera gps-camera rotation-reader></a-camera>
- <a-box gps-entity-place='latitude: 48.77988545503521; longitude: 9.173586527979367' color='red' scale='20 20 20'></a-box>
- </a-scene>
- </body>
-</html>
-
--
GitLab