Skip to content

GitLab

Commit 58145ce3 authored by Rahman's avatar Rahman
Browse files

Update index.html

parent bd1026db
Pipeline #9772 passed with stage
in 8 seconds
Show whitespace changes
Inline Side-by-side
public/index.html
View file @ 58145ce3
...@@ -8,14 +8,13 @@ ...@@ -8,14 +8,13 @@
<!-- 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> <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
</head> </head>
<body> <body>
<!-- Starting an immersive WebXR session requires user interaction. <!-- Starting an immersive WebXR session requires user interaction.
We start this one with a simple button. --> We start this one with a simple button. -->
<button onclick="activateXR()">Start Hit to Place Demo</button> <button onclick="activateXR()">Tap to Place AR Demo</button>
<script> <script>
async function activateXR() { 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.
...@@ -60,24 +59,24 @@ const viewerSpace = await session.requestReferenceSpace('viewer'); ...@@ -60,24 +59,24 @@ const viewerSpace = await session.requestReferenceSpace('viewer');
const hitTestSource = await session.requestHitTestSource({ space: viewerSpace }); const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
const loader = new THREE.GLTFLoader(); const loader = new THREE.GLTFLoader();
let reticle; let reticle;
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) { loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/reticle/reticle.gltf", function(gltf) {
reticle = gltf.scene; reticle = gltf.scene;
reticle.visible = false; reticle.visible = false;
scene.add(reticle); scene.add(reticle);
}) });
let flower; // Load the pine cone model
loader.load("https://immersive-web.github.io/webxr-samples/media/gltf/sunflower/sunflower.gltf", function(gltf) { let pineCone;
flower = gltf.scene; loader.load("https://raw.githubusercontent.com/yasirrahman/webxr-demo/main/scene.gltf", function(gltf) {
pineCone = gltf.scene;
pineCone.scale.set(0.15, 0.15, 0.15);
}); });
session.addEventListener("select", (event) => { session.addEventListener("select", (event) => {
if (flower) { if (pineCone) {
const clone = flower.clone(); const clone = pineCone.clone();
clone.position.copy(reticle.position); clone.position.copy(reticle.position);
scene.add(clone); scene.add(clone);
} }
...@@ -114,17 +113,12 @@ const onXRFrame = (time, frame) => { ...@@ -114,17 +113,12 @@ const onXRFrame = (time, frame) => {
reticle.updateMatrixWorld(true); reticle.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);
} }
</script> </script>
</body> </body>
......
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