Importing jsm modules using explicut urls no longer works for basic jsfiddle examples since r128

Questions
1

r127 and earlier jsm modules used relative url refences in the import statements.

// https://unpkg.com/three@0.127.0/examples/jsm/controls/OrbitControls.js
import {
	EventDispatcher,
	MOUSE,
	Quaternion,
	Spherical,
	TOUCH,
	Vector2,
	Vector3
} from '../../../build/three.module.js';

They now use module specifiers, which means you need a bundler since node module resolution doesn’t work in a browser by default.

// https://unpkg.com/three@0.128.0/examples/jsm/controls/OrbitControls.js
import {
	EventDispatcher,
	MOUSE,
	Quaternion,
	Spherical,
	TOUCH,
	Vector2,
	Vector3
} from 'three';

So a basic example of using jsm modules, such as orbitcontrols, in jsfiddle now causes the popular error Relative references must start with either "/", "./", or "../"

https://jsfiddle.net/seanwasere/ue9mdw3r/

This example works when using r127 and earlier. You can comment out the appropriate code in the jsfiddle to see.

So now that jsm modules in r128 are using module specifiers, how would you create a simple jsfiddle example linking to a specific jsm in three r128?

I haven’t seen a bundler used in a simple jsfiddle example before.

My example jsfiddle (link above) is a copy of the official threejs orbitcontrols example, but using explicit urls in the imports to reference r128. I.e.,

import * as THREE from 'https://unpkg.com/three@0.128.0/build/three.module.js'; import { OrbitControls } from 'https://unpkg.com/three@0.128.0/examples/jsm/controls/OrbitControls.js';

2

i think it’s supposed to be either https://unpkg.com/three@0.128.0/examples/jsm/controls/OrbitControls.js?module or you fetch it from skypack. with ?module or skypack they do the tooling for you. the real spec that would allow you to proceed is called import-maps without which you would not be able to participate in the npm eco system, and this is where these cdns are pulling it from.

1 Like
3

It works when adding ?module.
thanks

//https://unpkg.com/three@0.128.0/examples/jsm/controls/OrbitControls.js?module
import {
EventDispatcher,
MOUSE,
Quaternion,
Spherical,
TOUCH,
Vector2,
Vector3 } from
"https://unpkg.com/three@latest?module";
1 Like
4

That’s really helpful to know, thanks! I’d caution that unpkg calls the feature “very experimental” but it’s great that more CDNs are providing the option.

5

I’d caution that unpkg calls the feature “ very experimental ” but it’s great that more CDNs are providing the option.

Apparently this isn’t the case and ?module has been considered stable by the developer for awhile now. See the tweet here. It looks like the unpkg homepage still hasn’t been updated, though…

1 Like