How can I fix three.js loading issues? - three.js

Question

enter image description here
enter image description here
I am having issues adding the three.js libraries. Can anyone help me?

Answer 1

According to your error message, you are missing to define an import map in your index.html. Do it like so:
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims#1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "./three/build/three.module.js"
}
}
</script>
You can then change the THREE import to:
import * as THREE from 'three';
The error is actually produced in your example files since OrbitControls and GLTFLoader use the bare import specifier three. So without an import map, the browser can't resolve the specifier.

Answer 2

I had the same problem and this worked for me. It uses CDNs, but at least it works (also for firebox):
<script async src="https://unpkg.com/es-module-shims#1.6.0/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://cdn.skypack.dev/three#0.144.0/build/three.module",
"three/": "https://cdn.skypack.dev/three#0.144.0/"
}
}
</script>
<script src="szene2.js" type="module"> </script>
In your javascript:
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';