Browser-based module support

Questions
3

You can also now use import maps in your html. These describe where your browser can find any module specifiers that it finds in any of your imported scripts. You can host the linked scripts yourself or use cdn. No bundler required.

eg, pointing to self hosted scripts

<head>
    // some other html head tags
    <script type="importmap">
        {
          "imports": {
            "three": "./build/three.module.js",
            "three/examples/jsm/controls/OrbitControls":"./jsm/controls/OrbitControls.js",
            "three/examples/jsm/libs/stats.module":"./jsm/libs/stats.module.js"
          }
        }
    </script>
</head>

and in your main javascript module you reference modules using the named module specifers instead

import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import Stats from 'three/examples/jsm/libs/stats.module';

const scene = new THREE.Scene();
// etc, the rest of your code

JSFiddle : Threejs using import-maps

I have also created a Threejs boilerplate that demonstrates this technique using Three r130

GitHub : Threejs Boilerplate using import-maps

The r130 scripts in the GitHub boilerplate are served via nodejs (app.js) using static routes pointing to the node_modules threejs install.

see app.js

...
app.use('/build/', express.static(path.join(__dirname, 'node_modules/three/build')));
app.use('/jsm/', express.static(path.join(__dirname, 'node_modules/three/examples/jsm')));
...

To try it

git clone https://github.com/Sean-Bradley/Threejs-Boilerplate.git
cd Threejs-Boilerplate
npm install
npm start

Visit http://127.0.0.1:3000 in browser