diff --git a/public/FirtsTrial.html b/public/FirtsTrial.html
new file mode 100644
index 0000000000000000000000000000000000000000..1b39996280a3418b1a99bf958df819d80bb7f6b3
--- /dev/null
+++ b/public/FirtsTrial.html
@@ -0,0 +1,62 @@
+<!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>Tap to Place Demo</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 Tap to Place Demo</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});
+
+ // 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;
+
+ // To be continued in upcoming steps.
+
+ const loader = new THREE.GLTFLoader();
+ let model;
+ loader.load("URL_TO_YOUR_GTLF_MODEL", function(gltf) {
+ model = gltf.scene;
+ });
+
+ const session = await navigator.xr.requestSession("immersive-ar", { requiredFeatures: ['hit-test'] });
+ session.updateRenderState({
+ baseLayer: new XRWebGLLayer(session, gl)
+ });
+
+ const referenceSpace = await session.requestReferenceSpace('local');
+ const viewerSpace = await session.requestReferenceSpace('viewer');
+ const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
+
+ const reticle = new THREE.Mesh(
+ new THREE.RingGeometry(0.1, 0.12, 32),
+ new THREE.MeshBasicMaterial({ color: 0x00ff00 })
+ );
+ reticle.visible = false;
+ scene.add(reticle);
+
+ const onXRFrame = (time, frame) => {
+ session.requestAnimationFrame(onXRFrame);
+
+ gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer)
+