Orbit Controls Import Not Working

Questions
1

I am using the import map, but I cannot extract the orbit controls from it.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css">
    <script type="importmap">
        {
            "imports": {
              "three": "https://unpkg.com/three@0.141.0/build/three.module.js"
            }
          }
        </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script type="module">
    import * as three from "three"
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
  </script>
</html>

image
image1243Ă—67 5.57 KB

2

change your import map to

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.skypack.dev/three@0.142.0/build/three.module",
      "three/": "https://cdn.skypack.dev/three@0.142.0/"
    }
  }
</script>

Example : Threejs Boilerplate - JSFiddle - Code Playground

3 Likes
3

On a side note, how does script importing work?

If I have a bunch a script tags importing to my HTML, does it all compile as one continuous JS file? Is all of three’s code added to to my code (if I had more in my module script tag) to create one large file that runs?

Why is script type = module needed?

4

No it doesn’t. You can use webpack, parcel, vite and many other bundlers to bundle your scripts into one file. If you use a bundler, it’s not necessary to use import maps.

1 Like
5

Interesting. I see "<a class='gotoLine' href='#63:23'>63:23</a> TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”." in the console of that fiddle.

6

I don’t see the error. Example works for me just fine.
But depending on which browser and version you are using, its probably the polyfill reporting that error because that’s just how it works. It depends on your browser and version.

7

TIL Firefox >= 102 supports this natively - hidden behind the dom.importMaps.enabled flag :hushed:

1 Like