importing THREE jsm modules

Community Help
1

For its add-ons THREE recommends using ES6 module versions:

https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules

observable supports this via import and the require debugger suggests using

import(‘https://unpkg.com/three@0.112.1/examples/jsm/loaders/ColladaLoader.js?module’)

but includes the warning that browser support is slim. So observable relies on the browser to load such modules. Is that correct ? I looked at the require debugger code and it seems to just try to use the import function. But it is unclear if that is a native import function or something build into observable. Tom’s post here Best practices for non AMD/UMD package says that it is purely native, and that import() is being implemented in browsers but not on a standards track ?

https://caniuse.com/#feat=es6-module shows that browser support seems now acceptable as most common browsers except for IE support it for a few versions. Do I read this chart correctly ? It is unclear if that chart actually is specifically about import().

Observable currently suggests using the older version of the THREE add-ons which attach to the global THREE object. These versions are also still available and would probably work with all browsers. If THREE discontinues these global versions, is there a way to use the ES6 modules with older browsers ? Perhaps using babel and/or bundlers, inside Observable ? This may be a stupid question.

Here is a notebook to experiment with:

1 Like
2

Dynamic import is on a standards track. See browser support here: https://caniuse.com/#feat=es6-module-dynamic-import

3

Ah, ok. That is probably the better link to provide with the require debugger. So import() seems pretty safe to use according to this web site ?

4

Mostly. IE doesn’t support it and Edge didn’t until very recently.

1 Like
5

So the ‘slim support’ cited in the require debugger may be overly cautious.

The second part of the question then does not apply since just using dynamic imports seems to become the preferred solution.

Perhaps this means it is time to update the section three.js in the stubborn module notebook.

2 Likes