# Mix modules and global definitions

**URL:** <https://discourse.threejs.org/t/mix-modules-and-global-definitions/806>\
**Category:** Questions\
**Tags:** modules, es6, build-tools\
**Created:** [September 5, 2017, 10:32am UTC](https://discourse.threejs.org/t/mix-modules-and-global-definitions/806 "2017-09-05T10:32:42Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![NicolasRannou](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nicolasrannou/32/647_2.png) [@NicolasRannou](https://discourse.threejs.org/u/NicolasRannou)\
**Post date:** [September 5, 2017, 10:32am UTC](https://discourse.threejs.org/t/mix-modules-and-global-definitions/806/1 "2017-09-05T10:32:42Z")

</div>

Hi,

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 -

Related SO: [https://stackoverflow.com/questions/46051442/mix-modules-and-global-definitions-in-three-js](https://stackoverflow.com/questions/46051442/mix-modules-and-global-definitions-in-three-js)

---

<div class="post-metadata">

**Author:** ![NicolasRannou](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nicolasrannou/32/647_2.png) [@NicolasRannou](https://discourse.threejs.org/u/NicolasRannou)\
**Post date:** [September 5, 2017, 11:30am UTC](https://discourse.threejs.org/t/mix-modules-and-global-definitions/806/2 "2017-09-05T11:30:35Z")

</div>

It seems that the problem is that it doesn’t share the same Object3D base - any good workaround for that?

---

<div class="post-metadata">

**Author:** ![TheCodeCrafter](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thecodecrafter/32/50_2.png) [@TheCodeCrafter](https://discourse.threejs.org/u/TheCodeCrafter)\
**Post date:** [September 6, 2017, 8:16pm UTC](https://discourse.threejs.org/t/mix-modules-and-global-definitions/806/3 "2017-09-06T20:16:17Z")

</div>

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.

Hope I was helpful 😃

---

<div class="post-metadata">

**Author:** ![NicolasRannou](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nicolasrannou/32/647_2.png) [@NicolasRannou](https://discourse.threejs.org/u/NicolasRannou)\
**Post date:** [November 30, 2017, 12:14pm UTC](https://discourse.threejs.org/t/mix-modules-and-global-definitions/806/4 "2017-11-30T12:14:54Z")

</div>

Can you please elaborate on “combine property changes”?

Basically I want to share the relevant part of THREEJS between:

```auto
const globalThree = window.THREE;  
const three = require('three'); // or import
// AMI uses threejs internally
const ami = require('ami.js'); //or import

```

---

<div class="post-metadata">

**Author:** ![Harold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harold/32/32136_2.png) [@Harold](https://discourse.threejs.org/u/Harold)\
**Post date:** [November 30, 2017, 5:29pm UTC](https://discourse.threejs.org/t/mix-modules-and-global-definitions/806/5 "2017-11-30T17:29:06Z")

</div>

How does ami include three? If it just uses `window.THREE`, then you should be able to overwrite that before loading ami.

---

<div class="post-metadata">

**Author:** ![NicolasRannou](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nicolasrannou/32/647_2.png) [@NicolasRannou](https://discourse.threejs.org/u/NicolasRannou)\
**Post date:** [December 1, 2017, 1:37pm UTC](https://discourse.threejs.org/t/mix-modules-and-global-definitions/806/6 "2017-12-01T13:37:02Z")

</div>

Right now it is a bad approach:  
1- use the npm package to use things such as “Vectors” and “Matrices” ([https://github.com/FNNDSC/ami/blob/dev/src/core/core.utils.js#L4](https://github.com/FNNDSC/ami/blob/dev/src/core/core.utils.js#L4))  
2- use global THREEJS for Object3D etc. (whatever generates IDs) ([https://github.com/FNNDSC/ami/blob/dev/src/helpers/helpers.slice.js#L15](https://github.com/FNNDSC/ami/blob/dev/src/helpers/helpers.slice.js#L15))

Really looking forward to clean this mess 🙂

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [December 1, 2017, 3:43pm UTC](https://discourse.threejs.org/t/mix-modules-and-global-definitions/806/7 "2017-12-01T15:43:16Z")

</div>

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:

```auto
export { Vector2, Vector3, OtherComponents...} from 'three';

```

Then in AMI to import do:

```auto
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.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [December 1, 2017, 3:49pm UTC](https://discourse.threejs.org/t/mix-modules-and-global-definitions/806/8 "2017-12-01T15:49:52Z")

</div>

Alternately,you could be using conditional imports here -if you are using babel to compile there’s a plugin that [allows this](https://babeljs.io/docs/plugins/syntax-dynamic-import/), although I haven’t personally tested it.

Basically, you would set up your `three.custom.js`as above, then in AMI do:

```auto
if( needWholeLibrary ) {
 
   import * as THREE from 'three';

} else {

   import * as THREE from './three.custom.js'

}

```