Skip to content

GitLab

Commit e6f1350f authored by Acosta Vega's avatar Acosta Vega
Browse files

Update index.html

parent c72b45dc
Pipeline #9717 passed with stage
in 6 seconds
Show whitespace changes
Inline Side-by-side
public/index.html
View file @ e6f1350f
<!doctype html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" <meta name="viewport" content="width=device-width, initial-scale=1.0">
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Pyramid Demo</title>
<!-- Include Three.js library -->
<title>Pyramid Demo</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<!-- three.js --> <body>
<!-- Button to start the AR demo -->
<!-- Starting an immersive WebXR session requires user interaction. <button onclick="activateXR()">Start Pyramid Demo</button>
We start this one with a simple button. --> <script>
<button>Start Pyramid Demo</button> async function activateXR() {
try {
async function activateXR() {
// Add a canvas element and initialize a WebGL context that is compatible with WebXR. // Add a canvas element and initialize a WebGL context that is compatible with WebXR.
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
document.body.appendChild(canvas); document.body.appendChild(canvas);
...@@ -32,7 +31,7 @@ async function activateXR() { ...@@ -32,7 +31,7 @@ async function activateXR() {
]; ];
// Create the pyramid and add it to the demo scene. // Create the pyramid and add it to the demo scene.
const pyramid = new THREE.Mesh(new THREE.ConeBufferGeometry(0.5, 1, 4), materials); const pyramid = new THREE.Mesh(new THREE.ConeGeometry(0.5, 1, 4), materials);
pyramid.position.set(0, 0, -1); pyramid.position.set(0, 0, -1);
scene.add(pyramid); scene.add(pyramid);
...@@ -67,7 +66,7 @@ async function activateXR() { ...@@ -67,7 +66,7 @@ async function activateXR() {
session.requestAnimationFrame(onXRFrame); session.requestAnimationFrame(onXRFrame);
// Bind the graphics framebuffer to the baseLayer's framebuffer // Bind the graphics framebuffer to the baseLayer's framebuffer
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer) gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
// Retrieve the pose of the device. // Retrieve the pose of the device.
// XRFrame.getViewerPose can return null while the session attempts to establish tracking. // XRFrame.getViewerPose can return null while the session attempts to establish tracking.
...@@ -77,20 +76,22 @@ async function activateXR() { ...@@ -77,20 +76,22 @@ async function activateXR() {
const view = pose.views[0]; const view = pose.views[0];
const viewport = session.renderState.baseLayer.getViewport(view); const viewport = session.renderState.baseLayer.getViewport(view);
renderer.setSize(viewport.width, viewport.height) renderer.setSize(viewport.width, viewport.height);
// Use the view's transform matrix and projection matrix to configure the THREE.camera. // Use the view's transform matrix and projection matrix to configure the THREE.camera.
camera.matrix.fromArray(view.transform.matrix) camera.matrix.fromArray(view.transform.matrix);
camera.projectionMatrix.fromArray(view.projectionMatrix); camera.projectionMatrix.fromArray(view.projectionMatrix);
camera.updateMatrixWorld(true); camera.updateMatrixWorld(true);
// Render the scene with THREE.WebGLRenderer. // Render the scene with THREE.WebGLRenderer.
renderer.render(scene, camera) renderer.render(scene, camera);
}
} }
};
session.requestAnimationFrame(onXRFrame); session.requestAnimationFrame(onXRFrame);
} catch (error) {
} console.error("Failed to start XR session:", error);
</script> }
}
</script>
</body> </body>
</html>
Markdown is supported
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