Three.js: Conflicts when loading examples and three.module from unpkg

[fernandojsg]

I was testing the webxr-ballshooter example on glitch, and I just basically changed all the paths to fetch three and the examples modules from unpkg.

Basically going from:

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

import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
import { VRButton } from './jsm/webxr/VRButton.js';
import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';

to

import * as THREE from 'https://unpkg.com/three/build/three.module.js';

import { BoxLineGeometry } from 'https://unpkg.com/three/examples/jsm/geometries/BoxLineGeometry.js';
import { VRButton } from 'https://unpkg.com/three/examples/jsm/webxr/VRButton.js';
import { XRControllerModelFactory } from 'https://unpkg.com/three/examples/jsm/webxr/XRControllerModelFactory.js';

basically following the style I have seen on @mrdoob examples as https://glitch.com/edit/#!/webxr-vr-type2?path=index.html

Code: https://glitch.com/edit/#!/three-webxr-ballshooter-bug?path=index.html:19:0

The problem is that when doing the later, it fetches three.module.js just once from the main import on index.html.

But when converting the url to unpkg, it fetches it twice, one from the main three.module.js import and then a second one from the first example module loaded.

The result? totally random, as the id for all the objects are being initialized on each module loaded, so the main module could be generating 100 spheres with ids from 0 to 100, and then the, let's say, XRControllerModelFactory module could fetch a glTF and assign id to its objects/geometries/materials also from 0 to 100.
When the renderer tries to fetch the WebGL attributes from these objects... BOOM!

I'm not sure if there is a recommended way to go with it other than use a bundler, but this has been driving me nuts for way too long :D so any feedback will be more than welcome :)

[fernandojsg]

I'll answer myself here... it seems like if you use any url that is not the direct url to the package version you want to use you will get a redirection and it will detect it as different urls, don't know why, and it will just fetch twice these.
So:

• NOT WORKING:

  • https://unpkg.com/three@^0.113.2/build/three.module.js
  • https://unpkg.com/three/build/three.module.js

• WORKING:

  • https://unpkg.com/[email protected]/build/three.module.js

Example with fixed urls: https://three-webxr-ballshooter-fixed.glitch.me/