es6 Import of three.js

Question

My workflow for es6 uses babel and babel-plugin-transform-es2015-modules-system.js to only transform module import/export for use with system.js. I simply use a "green" browser for all es6 features except import/export of modules .. which are a whatwg standard thus not "es6".

This works with legacy (non-es6) libraries well, I can "import" all the npm packages I need. Somehow babel, with only the babel modules transform, and system.js magically work.

Except for three.js. I tried it with all three releases: three.js, three.min.js & three.modules.js. The first two fail silently, resulting in a "undefined" module. The third fails, wanting traceur .. I guess for a system.js-like transform?

So what do I need to do to use three.js in my es6 world?

I guess I could just use a <script> tag and a global for three. Or possibly use rollup/webpack to eliminate the modules?

But I bet there's a reasonable solution. After all, three.js uses es6 modules internally.

Answer 1

There was a bug in the release (only one day old!). I fixed it but still had problems. I did however find that this does work:

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

.. but the more obvious versions,

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

do not appear to work.

Let me know if you grok this better than this, which is pretty random.

Answer 2

I just had the same problem, but realized that THREE does not export THREE but instead all the different modules. Check the section in the three.js file with the exports:

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;

... etc

So you can import just the modules you actually need, or as said above: Import all of them via

 import * as THREE from 'three.js'

Cheers