Menu
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.
891
asked Mar 12 '26 02:03
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';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
