CODEWITHSUNDEEP
three.jswebglgltf
cluelesscoder
cluelesscoder

Reputation: 45

Uncaught TypeError: Failed to resolve module specifier "three/examples/jsm/loaders/GLTFLoader.js"

I am having a really hard time understanding why my program is crashing due to this error:

Uncaught TypeError: Failed to resolve module specifier "three/examples/jsm/loaders/GLTFLoader.js". Relative references must start with either "/", "./", or "../".

I am trying to make my html file communicate with the serial.js file that I created. The html is simply in the project folder, but the serial.js file is being stored in a js folder that I have for the project (needed to import some object loader templates downloaded from the three.js website.)

This is what I've tried so far in my html code:

<html>
  <head>
   <title>Three.js Crash Course</title>
   <style>
   body
   { 
     margin: 0; 
   }
   canvas
   {
     width: 100%; height: 100%;
   } 
  </style>
</head>
<body>
 <script src = "js/three.js"></script>
 <script src = "js/OrbitControls.js"></script>
 <script type = "module" src = "./js/serial.js"></script>
</body>
</html>

I've also tried it with just "/js/serial"..ect and "../js/serial.js". Why is it not recognizing and running the file?

I've also included an image if it's helpful for understanding the way I've set up my file structure. file structure

Upvotes: 3

Views: 11556

Answers (2)

Kaleo Elias Goncalves da Silva
Kaleo Elias Goncalves da Silva

Reputation: 1

You need to inspect the GLTFLoader.js or any other file encountering the same error. Find the import statement for "three" and replace "three" with the complete file path first. If you encounter a new error related to permissions or similar, navigate to the corresponding folder from the path of GLTFLoader.js. If you need to navigate to a path that involves moving backward, you can use "../" to move back. For example, "../../../build/three.module.js".

exemple: import { BufferGeometry, FileLoader, Float32BufferAttribute, Group, LineBasicMaterial, LineSegments, Loader, Material, Mesh, MeshPhongMaterial, Points, PointsMaterial, Vector3, Color } from 'three'; replace to import { BufferGeometry, FileLoader, Float32BufferAttribute, Group, LineBasicMaterial, LineSegments, Loader, Material, Mesh, MeshPhongMaterial, Points, PointsMaterial, Vector3, Color } from '../../../build/three.module.js';

Upvotes: 0

Mugen87
Mugen87

Reputation: 31026

You are importing ES6 modules like global scripts which is not valid. I suggest you use the files from the examples/js or by using proper module syntax.

<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/[email protected]/build/three.module.js"
        }
    }
</script>

<script type="module">

    import * as THREE from 'three';

    import { OrbitControls } from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';

Upvotes: 3

Related Questions