Examples: use import maps + polyfill

[marcofugaro]

Related issue: #23175 (comment)

Description
Let's start using import maps in the examples!
In this PR I made all the examples/jsm files import from 'three' and added the import map + polyfill in the relative html file.

I also updated the import in the file like this:

- import * as THREE from '../build/three.module.js';
+ import * as THREE from 'three';

[marcofugaro]

To test, open any example in Firefox / Safari

https://raw.githack.com/mrdoob/three.js/6c7850ca2dd97d0bc503381ec44308c3eaeec8d5/examples/index.html

[looeee]

To test, open any example in Firefox / Safari

I just tested in latest Chrome on Windows, it seems to work fine.
In Firefox get the following error, however the examples still load correctly.

Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”.

[marcofugaro]

@looeee thanks for testing, that's expected behaviour since the polyfill can't disable native module loading.

However as you can see, the example loads just fine 🙂

[Mugen87]

TBH, this change is premature.

The support for import maps is not good enough that a wide usage in the repo is appropriate. I suggest to wait until all major browser support import maps with their latest version. And then use the polyfill to support older browsers.

[mrdoob]

@Mugen87

Judging by the https://threejs-journey.com/ course, seems like a a lot of people these days develop using bundlers and they are already doing import * as THREE from 'three'.

This change is also one step forward on the examples/js to examples/jsm transition. It would allow us to remove the hard coded import paths in the jsm files and would unify the npm/bundlers/web code import style. Then we'll be able to remove the examples/js folder altogether.

Waiting for Firefox and Safari until we do the transition will probably delay it until 2023 at least...

What are your main concerns about the change?

[Mugen87]

Waiting for Firefox and Safari until we do the transition will probably delay it until 2023 at least...

That's indeed a long time...

I'm just feeling a bit insecure to use an API which is not supported by two major browsers. On the other hand unifying the code import style is of course an important topic.

Okay, it's probably best then to merge and see how the changes behave in production 👍 .

Then we'll be able to remove the examples/js folder altogether.

That sounds of course good, too! However, we should reopen #20455 or at least inform users like @Bug-Reaper and @gigablox when we are going to make this change. It seems there is still an unknown number of devs relying on ES5/UMD workflows and I think it's important to announce the removal in some way (similar when we removed THREE.Geometry).

[mrdoob]

I'm just feeling a bit insecure to use an API which is not supported by two major browsers.

Definitely. I would also be worried if Firefox hadn't expressed interest.

That sounds of course good, too! However, we should reopen #20455 or at least inform users like @Bug-Reaper and @gigablox when we are going to make this change.

Agreed. I think we can continue generating the examples/js folder for a year or so.

[mrdoob]

Thanks!

[DefinitelyMaybe]

This change is also one step forward on the examples/js to examples/jsm transition.

woohoo! full steam ahead!

great stuff @marcofugaro