Is it in theory possible to mix modules and global THREEJS definitions?
I have a JS library using THREEJS modules compiled with browserify but when I try to use it in a “regular” THREEJS app, it just makes weird things (meshes randomly show up, etc.).
I can go in more details later if needed -
Yes, if you could create your own class that includes both of these, and then combine property changes, then you should be able to produce a minute version of an engine that combines the two.
I’m not sure including just parts of three.js in an application that may be used alongside a full three.js app is a good approach. You would be better to just do import * as THREE from 'three' everywhere that you are using anything from the library - your bundler should then make sure that everything is using the same reference to the THREE global.
However, brainstorming a bit, you could do something like this - in AMI, create a file called Three.custom.js. I’m not sure the exact syntax without testing it, but this might work:
export { Vector2, Vector3, OtherComponents...} from 'three';
Then in AMI to import do:
import * as THREECUSTOM from './three.custom.js';
if ( !window.THREE ) {
// use THREECUSTOM
} else {
// use global THREE
}
…and make sure that you are importing three.js as a global variable before AMI.
Alternately,you could be using conditional imports here -if you are using babel to compile there’s a plugin that allows this, although I haven’t personally tested it.
Basically, you would set up your three.custom.jsas above, then in AMI do:
if( needWholeLibrary ) {
import * as THREE from 'three';
} else {
import * as THREE from './three.custom.js'
}