Skip to content

GitLab

Commit 61d4dc90 authored by Esguerra Montana's avatar Esguerra Montana
Browse files

Update index.html

parent 15c4933a
Pipeline #9346 passed with stage
in 7 seconds
Hide whitespace changes
Inline Side-by-side
public/index.html
View file @ 61d4dc90
...@@ -8,8 +8,6 @@ ...@@ -8,8 +8,6 @@
<!-- three.js --> <!-- three.js -->
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script> <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> </head>
<body> <body>
...@@ -23,12 +21,10 @@ async function activateXR() { ...@@ -23,12 +21,10 @@ async function activateXR() {
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(); // To be continued in upcoming steps.
}
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
directionalLight.position.set(10, 15, 10);
scene.add(directionalLight);
const scene = new THREE.Scene();
// The cube will have a different color on each side. // The cube will have a different color on each side.
const materials = [ const materials = [
...@@ -41,8 +37,8 @@ const materials = [ ...@@ -41,8 +37,8 @@ const materials = [
]; ];
// Create the cube and add it to the demo scene. // Create the cube and add it to the demo scene.
const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.5, 0.5, 0.5), materials); const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.2, 0.2, 0.2), materials);
cube.position.set(0, 0, -1); cube.position.set(1, 1, 1);
scene.add(cube); scene.add(cube);
// Set up the WebGLRenderer, which handles rendering to the session's base layer. // Set up the WebGLRenderer, which handles rendering to the session's base layer.
...@@ -61,7 +57,10 @@ const camera = new THREE.PerspectiveCamera(); ...@@ -61,7 +57,10 @@ const camera = new THREE.PerspectiveCamera();
camera.matrixAutoUpdate = false; camera.matrixAutoUpdate = false;
// Initialize a WebXR session using "immersive-ar". // Initialize a WebXR session using "immersive-ar".
const session = await navigator.xr.requestSession("immersive-ar", {requiredFeatures: ['hit-test']}); const session = await navigator.xr.requestSession("immersive-ar");
session.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
// A 'local' reference space has a native origin that is located // A 'local' reference space has a native origin that is located
// near the viewer's position at the time the session was created. // near the viewer's position at the time the session was created.
...@@ -96,7 +95,7 @@ const onXRFrame = (time, frame) => { ...@@ -96,7 +95,7 @@ const onXRFrame = (time, frame) => {
} }
session.requestAnimationFrame(onXRFrame); session.requestAnimationFrame(onXRFrame);
}
</script> </script>
</body> </body>
</html> </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