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 '/[email protected]/build/three.module.js';
import { GLTFLoader } from '/[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(".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>
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/[email protected]/build/three.module.js';
import { GLTFLoader } from 'https://unpkg/[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>
- This question is similar to: GLTF Loader Trial Returning TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – jabaa Commented Feb 24 at 12:44
2 Answers
Reset to default 0if you open source code of GLTFLoader.js which you are trying to import you will see:
import {
...
} from 'three';
import { toTrianglesDrawMode } from '../utils/BufferGeometryUtils.js';
class GLTFLoader extends Loader {
...
so you need to spesify name 'three' inside <script type="importmap"> like this:
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr/npm/[email protected]/examples/jsm/"
}
}
</script>
you can also see example here: three docs -> installation -> Option 2: Import from a CDN
and then you can do:
import * as THREE from 'three'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
in your module code
Your error says that the path to three module can only start with "/", "./", or "../", and in your code you import three from https://unpkg/[email protected]/build/three.module.js which starts with https://. To bypass this issue you have to download three to your local PC and then import it with:
import * as THREE from 'three', which is written in the docs and you have to rewrite your <script type="module"> to a seperate file like main.js.