es6导入three.js

Question

我的es6工作流使用babel和es6只转换模块导入/导出，以便与system.js一起使用。除了模块的导入/导出之外，我只对所有es6功能使用“绿色”浏览器。这是一个标准，因此不是"es6“。

这与遗留库(非ES6)很好地工作，我可以“导入”我需要的所有npm包。不知何故，babel，只有babel模块转换，和system.js神奇地工作。

除了three.js。我尝试了这三个版本: three.js、three.min.js和three.modules.js。前两个模块默默地失败，导致一个“未定义”模块。第三个失败了，想要追踪..。我猜是像system.js那样的转换吗？

那么，我需要做什么才能在我的three.js世界中使用es6呢？

我想我只需要一个<script>标签和一个全局的三个。或者可能使用汇总/webpack来消除模块？

但我打赌一定有一个合理的解决办法。毕竟，three.js在内部使用es6模块。

Answer 1

版本中有一个bug (只有一天的时间！)我修好了，但还是有问题。然而，我确实发现这样做是有效的：

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

。。但更明显的版本，

import THREE from 'etc/three.js'
or
import 'etc/three.js'

看上去不起作用。

如果你觉得这个比这更好的话，那就告诉我，这是随机的。

Answer 2

我只是遇到了同样的问题，但意识到三不出口三个，而是所有不同的模块。使用导出检查three.js文件中的部分：

exports.WebGLRenderTargetCube = WebGLRenderTargetCube;
exports.WebGLRenderTarget = WebGLRenderTarget;
exports.WebGLRenderer = WebGLRenderer;
exports.ShaderLib = ShaderLib;
exports.UniformsLib = UniformsLib;
exports.UniformsUtils = UniformsUtils;
exports.ShaderChunk = ShaderChunk;
exports.FogExp2 = FogExp2;
exports.Fog = Fog;
exports.Scene = Scene;
exports.LensFlare = LensFlare;
exports.Sprite = Sprite;
exports.LOD = LOD;
exports.SkinnedMesh = SkinnedMesh;
exports.Skeleton = Skeleton;
exports.Bone = Bone;
exports.Mesh = Mesh;
exports.LineSegments = LineSegments;
exports.Line = Line;
exports.Points = Points;
exports.Group = Group;

..。等

因此，您可以只导入实际需要的模块，或者如前所述:通过

 import * as THREE from 'three.js'

干杯