Trying To Import glb File From Blender

Hello! I am a beginner to say the least. I am trying to import some objects i created in Blender. I am 99% sure my path locations are correct. I keep getting this error using my local host;

caught TypeError: Failed to resolve module specifier “three”. Relative references must start with either “/”, “./”, or “…/”.

Here is my index.html code;

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Three.js GLB Model</title>
        body {
            margin: 0;

        canvas {
            display: block;
    <script type="module">
        import * as THREE from './three.module.js';
        import { GLTFLoader } from './GLTFLoader.js';

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        const light = new THREE.AmbientLight(0xffffff, 0.5);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        directionalLight.position.set(1, 1, 1);

        camera.position.z = 5;

        function animate() {
            renderer.render(scene, camera);

        function loadModel(modelPath) {
            const loader = new GLTFLoader();

            loader.load(modelPath, (gltf) => {
                const model = gltf.scene;

                model.position.set(0, 0, 0);
                model.scale.set(1, 1, 1);
                model.rotation.set(0, 0, 0);


        loadModel('./Bolt Up Daily.glb');

Please see the installation guide, and the “Import from CDN” subsection:

You don’t need to use a CDN, but you will still need import maps.

1 Like