All geek questions in one place

Es6 Import of three.js

My workflow for es6 uses babel and babel-plugin-transform-es2015-modules-system.js only for import / export module conversion for use with system.js. I just use the green browser for all es6 functions except import / export modules .. which are whatwg standard, so not es6.

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

Except for three. I tried this with all three releases: three.js, three.min.js and three.modules.js. The first two fail silently, which leads to the "undefined" module. The third one fails, wanting to track .. I assume for a system.js-like conversion?

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

I think I could use the <script> and global for three. Or maybe use rollup / webpack to eliminate modules?

But I'm sure there is a reasonable solution. After all, three.js uses es6 internal modules.

+6
source share
2 answers

An error occurred in the release (only one day!). I fixed it, but still had problems. However, I found that this works:

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

.. but more obvious versions,

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

don't seem to work.

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

+12
source

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

 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.

Thus, you can import only the modules you need or, as mentioned above: Import all of them through

  import * as THREE from 'three.js'

Greetings

+3
source

Source: https://habr.com/ru/post/1011696/

More articles:


All Articles