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">
<head>
    <meta charset="UTF-8">
    <title>Three.js GLB Model</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <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);
        document.body.appendChild(renderer.domElement);

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

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

        camera.position.z = 5;

        function animate() {
            requestAnimationFrame(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);

                scene.add(model);
            });
        }

        loadModel('./Bolt Up Daily.glb');
        animate();
    </script>
</body>
</html>

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

https://threejs.org/docs/#manual/en/introduction/Installation

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

1 Like