I am trying to import three.js. I am following the documentation, however I am getting the error:
Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”
My import statements:
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.139.2/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
const scene = new THREE.Scene();
</script>
Am I importing it wrong? Where would I put the “./”, “../” or “/”?
I feel like you're overcomplicating things with the import maps, and you're introducing the risk of very poor browser support, as brought up by TheJim01.
Just copy the three.module.js file from https://unpkg.com/three@0.139.2/build/three.module.js to a local folder in your app like /libraries/three.module.js.
Then import it with
<script type="module">
import * as THREE from './libraries/three.module.js';
const scene = new THREE.Scene();
</script>