docs(Installation): import OrbitControls from Skypack CDN is not working

[g1eny0ung]

Describe the bug

Try using the OrbitControls from Skypack CDN according to the installation section but not working now.

Seems after #23255 merged, it also needs to use import maps before importing modules in examples.

And also I found the Skypack CDN will still try to export the default even though a js module has no default export.

After I tried, I solved these two problems with the following code:

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.skypack.dev/three"
    }
  }
</script>

<script type="module">

  // Find the latest version by visiting https://cdn.skypack.dev/three.

  import { OrbitControls } from 'https://unpkg.com/three/examples/jsm/controls/OrbitControls.js';

  const controls = new OrbitControls( camera, renderer.domElement );

</script>

I think the related docs can be updated to this, what do you think? But in my solution, I'm using two different CDNs. In case Skypack is currently unavailable, I wonder if we can switch all to unpkg (https://unpkg.com/three/build/three.module.js)?

To Reproduce

Steps to reproduce the behavior:

1. Create a new pen from https://codepen.io
2. Paste below code

Code

<script type="module">

  // Find the latest version by visiting https://cdn.skypack.dev/three.

  import { OrbitControls } from 'https://cdn.skypack.dev/three/examples/jsm/controls/OrbitControls.js';

  const controls = new OrbitControls( camera, renderer.domElement );

</script>

Expected behavior

Successful import.

[marcofugaro]

This is a bug with skypack-cdn: skypackjs/skypack-cdn#263

[g1eny0ung]

This is a bug with skypack-cdn: skypackjs/skypack-cdn#263

Got it!

[mrdoob]

Should we just change the links to use https://unpkg.com/ instead?

[Mugen87]

Probably the best approach to avoid more confusion.

[mattrossman]

Is the intention to wait for skypack-cdn to be fixed, or update the docs with a new recommended pattern? Perhaps this issue can be re-opened until the docs include working instructions for CDN usage. I haven't had success using Three from any CDN with the current documentation.

I've seen a couple patterns for CDN usage floating around, including the one shown above as well as setting up a three-addons alias for the examples directory #23368 (comment). It sounds like that pattern is still under discussion though. Some official guidance in the docs would help clear things up.

Additionally, if import maps are indeed a requirement for CDN usage, it would be helpful to make the polyfill instructions more explicit in the docs.

[Mugen87]

I think it makes sense to add a note to the Installation guide about Import maps.