How to import additional plugins for an already imported library using JSPM?

Question

I have successfully imported js 3d rendering with JSPM as follows:

import THREE from 'three.js/build/three'; 

I would also like to import the orbit management plugin for Three.js

 import OrbitControls from 'three.js/examples/js/controls/OrbitControls'; 

but this causes an error because the plugin does not have a link to the library

 Uncaught ReferenceError: THREE is not definedOrbitControls.js:24 (anonymous function)system.src.js:2187 doEvalsystem.src.js:2153 __evalsystem.src.js:212 asystem.src.js:1019 global.e.metadata.format.e.metadata.executesystem.src.js:540 csystem.src.js:403 ssystem.src.js:715 executees6-module-loader.src.js:1879 oes6-module-loader.src.js:1927 pes6-module-loader.src.js:1701 jes6-module-loader.src.js:1749 kes6-module-loader.src.js:1575 (anonymous function)es6-module-loader.src.js:1177 Oes6-module-loader.src.js:1136 Kes6-module-loader.src.js:927 y.whenes6-module-loader.src.js:818 v.runes6-module-loader.src.js:97 a._draines6-module-loader.src.js:62 draines6-module-loader.src.js:267 b es6-module-loader.src.js:139 Potentially unhandled rejection [2] Error loading "github:mrdoob/ three.js@master /examples/js/controls/OrbitControls" at http://localhost:8080/jspm_packages/github/mrdoob/ three.js@master /examples/js/controls/OrbitControls.js Error loading "github:mrdoob/ three.js@master /examples/js/controls/OrbitControls" from "app/main" at http://localhost:8080/app/main.js Error evaluating http://localhost:8080/jspm_packages/github/mrdoob/ three.js@master /examples/js/controls/OrbitControls.js Uncaught ReferenceError: THREE is not defined (WARNING: non-Error used) 

The plugin adds more functionality to the library:

 THREE.OrbitControls = function ( object, domElement ) { ... } 

What is the correct way to import a plugin?

Answer 1

In this example, THREE initialized in its module scope ( ModuleEnvironment , read here ), not the global scope and it is not exported. The problem is that OrbitControls looking for THREE in the area of ​​its module, and then in the global area. Therefore, THREE not found and an error occurs.

What you can do about it:

• If you write code for browsers, you may simply not use the es6 module system for libraries that do not support it. Just load them through script tags and use as global variables (as always, until es6).

• You can use system.js . In this case, you should configure System something like:

   System.map['TREE'] = 'three.js/build/three'; System.meta['three.js/build/three'] = { format: 'global', exports: 'jQuery' }; System.meta['three.js/examples/js/controls/OrbitControls'] = { deps: 'TREE' } 

  Then you can import these modules, for example:

   import THREE from 'THREE'; import 'three.js/examples/js/controls/OrbitControls'; 

Answer 2

as for the current NPM intalled three.js (0.81.2):

package file: three.js

 import * as THREE from 'three'; // build/three.js from node_module/three window.THREE = THREE; require('three/examples/js/controls/OrbitControls.js'); export default THREE; 

then in your index.js

 import THREE from './three';