What is the long term plan for the naming of the `/examples/jsm/` folder since the removal of `/examples/js/` and the convention of using the `addons` alias in importmaps

Discussion
1

In recent versions of Threejs, up to current version being r155 at time of writing this post, if I am using named module resolution, via webpack, parcel, vite, et.al., then my imports may look like this,

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

If I am not bundling, but using client side import maps, then the current accepted convention is to use the addons alias.

E.g.,

<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.155.0/build/three.module.js",
            "three/addons/": "https://unpkg.com/three@0.155.0/examples/jsm/",
        }
    }
</script>

<script type="module">
    import * as THREE from 'three';
    import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
    import Stats from 'three/addons/libs/stats.module.js';

	// ... etc

But, considering that addons is just an alias set at runtime in the client browser, and you don’t actually need to use it if you don’t really want to.

E.g., this will still work

<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
    {
        "imports": {
			"three": "https://unpkg.com/three@0.155.0/build/three.module.js"
        }
    }
</script>

<script type="module">
    import * as THREE from 'three';
    import {OrbitControls} from 'https://unpkg.com/three@0.155.0/examples/jsm/controls/OrbitControls.js';
    import Stats from 'https://unpkg.com/three@0.155.0/examples/jsm/libs/stats.module.js';

	// ... etc

And this will also still work,

<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
    {
        "imports": {
			"three": "https://unpkg.com/three@0.155.0/build/three.module.js",
            "three/": "https://unpkg.com/three@0.155.0/",
        }
    }
</script>

<script type="module">
    import * as THREE from 'three';
    import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
    import Stats from 'three/examples/jsm/libs/stats.module.js';

	// ... etc

And even using larry, curly, moe as aliases will also still work,

<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
    {
        "imports": {
	        "three": "https://unpkg.com/three@0.155.0/build/three.module.js",
            "larry": "https://unpkg.com/three@0.155.0/examples/jsm/controls/OrbitControls.js",
            "curly": "https://unpkg.com/three@0.155.0/examples/jsm/libs/stats.module.js", 
            "moe": "https://cdn.skypack.dev/dat.gui"
        }
    }
</script>

<script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'larry';
    import Stats from 'curly';
    import { GUI } from 'moe';

	// ... etc

Working Example: https://jsfiddle.net/seanwasere/tjbxaf3w/22/

Is there a plan to modify the structure of the /examples/jsm/ folder?

1 Like
2

The alias is not only at runtime in the browser, it’s also there in package.json for bundlers that support it:

I believe most bundlers support export maps today, so that should work too.

In my view – yes, eventually the folder will probably be renamed, but there is no particular rush to do that soon.

3

Ok, I guess I will watch this space then.

I tried using latest Vite Vanilla JavaScript, defaults and latest Threejs, but it doesn’t seem to recognise the addons alias when bundling and using named module specifiers.

image
image1871×840 99.5 KB

I also tried bundling with latest webpack, typescript, npm and node.
test