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.

Solution 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.

Solution 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

Comments

[Bergi]

Please link the bug report, or be specific about what you had to fix and how.

[backspaces]

It was an invisible character, see github.com/mrdoob/three.js/issues/9939. It's fixed now and in a new release so npm install should work, or just download from the new release link.

[Bert]

I've also used import * as THREE from 'three', which compiles OK with Webpack. Cheers!

[backspaces]

Sweet! I ran across that too while trying to grok three & modules. I haven't tried just importing what I need tho. So if I import Mesh, does it also import its dependencies as well? I.e. module transitive closure?

[Merc]

Well I looked up the term transitive closure, but I don't really understand how you mean it in that context. Anway this is a good question whether it will import the dependencies. I tried to find it out by having a look at the code, but I am still not sure. I tend to think that it does not, at least there are no imports in the file. Maybe exporting all the modules instead of one big thing, just gives you easier access to the different parts of three: e.g. via new THREE.Mesh(). But I'd be interested in knowing the facts. So please tell me, when you've tested it.

[backspaces]

Thanks for the interest and the info! And sorry for the possibly incorrect (!) use of transitive closure :). All I mean is that the an import will drag in all the dependencies of that import and all their dependencies, and so on. The entire "graph" of dependencies. I looked at package.json and was happy to see they have no runtime dependencies, only build dependencies. And checking a source file at random, it had both import and export statements: github.com/mrdoob/three.js/blob/dev/src/core/DirectGeometry.‌​js

[backspaces]

Testing would require rebuilding the three modules using babel with only the system.js module transform. I could do it but I think we're getting pretty close to <script type="module" landing.

[CodeZombie]

I have added my 3D scene in the create-react-app which throws an error THREE is not defined no-undef.Please have a look github.com/priyakrishnadev/webglapp/blob/master/src/WebVR.js

[griffin2000]

Note you'll need to include the .module version (github.com/mrdoob/three.js/blob/dev/build/three.module.js) for this to work. This is what's installed by npm install, but the regular version in build will give errors if imported this way.