我成功地用JSPM导入了一个js 3d渲染库,如下所示：
import THREE from 'three.js/build/three';
我还想为Three.js导入轨道控件插件
import OrbitControls from 'three.js/examples/js/controls/OrbitControls';
但这会引发错误,因为插件没有引用库
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)
该插件为库添加了更多功能,如下所示：
THREE.OrbitControls = function ( object,domElement ) { ... }
导入插件的正确方法是什么？
解决方法
在此示例中,THREE在其自己的模块范围(ModuleEnvironment,读取
here)中初始化,而不是全局范围,并且它未被导出.问题是OrbitControls在其模块范围内寻找三个,然后在全球范围内寻找.因此找不到三个并且抛出错误.
你可以用它做什么：
>如果您正在为浏览器编写代码 – 您可以不将es6模块系统用于不支持它的库.只需通过脚本标记加载它们并将其用作全局变量(一如既往,在es6之前).
>您可以使用system.js.在这种情况下,您必须配置您的系统：
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' }
然后你可以导入这些模块,如：
import THREE from 'THREE'; import 'three.js/examples/js/controls/OrbitControls';