This is my simplest threeJS app page. But i am getting this error :
goo-webxr-ac.web.app/:1 Uncaught TypeError: Failed to resolve module
specifier “three”. Relative references must start with either “/”,
“./”, or “../”.
You can also check at this website via opening the console. goo-webxr-ac.web.app
MyCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebXR AR</title>
</head>
<body>
<button onclick="activateXR()">Start Web AR</button>
<script type="module">
import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';
import { GLTFLoader } from 'https://unpkg.com/[email protected]/examples/jsm/loaders/GLTFLoader.js';
console.log("Three.js and GLTFLoader imported successfully!");
async function activateXR() {
console.log("Activating XR...");
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
const gl = canvas.getContext("webgl", {xrCompatible: true});
if (!gl) {
console.error("WebGL is not supported!");
return;
} else {
console.log("WebGL initialized successfully!");
}
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({ alpha: true, preserveDrawingBuffer: true, canvas: canvas, context: gl });
renderer.autoClear = false;
console.log("Renderer created!");
const camera = new THREE.PerspectiveCamera();
camera.matrixAutoUpdate = false;
try {
const session = await navigator.xr.requestSession("immersive-ar", { requiredFeatures: ['hit-test'] });
console.log("XR Session started!");
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 });
console.log("Reference Spaces & Hit Test Source set up!");
const loader = new 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);
console.log("Reticle loaded successfully!");
});
session.addEventListener("select", () => {
if (reticle) {
console.log("Select event triggered!");
reticle.visible = true;
}
});
session.requestAnimationFrame((time, frame) => {
console.log("Rendering frame...");
renderer.render(scene, camera);
});
} catch (error) {
console.error("Error initializing XR session:", error);
}
}
</script>
</body>
</html>