Module Import / Usage

Ok.

being told to split things up into 100kb chunks.

Where does one find this?

It’s all I found.
https://http2.github.io/http2-spec/


4.2 Frame Size
The size of a frame payload is limited by the maximum size that a receiver advertises in the SETTINGS_MAX_FRAME_SIZE setting. This setting can have any value between 214 (16,384) and 224-1 (16,777,215) octets, inclusive.

6.1 DATA
DATA frames (type=0x0) convey arbitrary, variable-length sequences of octets associated with a stream.


I have finished the description of how to use modules in the basic examples of the Collection of examples from discourse.threejs.org.
See below in the picture.
2020-01-04_20.57.54

Here is the pdf file as well. Module usage.pdf (303,6 KB)

1 Like

I can’t find the specific article I read about that right now. I think it was on mdn or v8 blog, my search is turning up nothing right now though. In any case, the 100kb is just a rough number, the point is that with HTTP/2 there’s very little advantage anymore to bundling everything up into a single huge file (aside from a slight increase in gzip performance).

Instead we should create more smaller files, serve the least JS up front to get the page loaded and active and then the rest later as the user needs it. Also, we can make changes to our JS without completely invalidating user cache - that is, when you change your app the user doesn’t need to download the whole three.js library again, just the part of the code that you changed contained in a separate small JS file.
At least that’s the best practice, it’s more complex of course and the benefits are not huge except for on slow mobile devices.

One thing I’ve noticed on the various posts of I’ve read about this is that there’s no mention of tree-shaking, I guess for that to work you still need to bundle into a single large file. That’s kind of a moot point since three.js doesn’t work with tree-shaking yet anyway.

2 Likes

The example in Missing line when passing edgeGeometry to wireframeGeometry2
( https://jsfiddle.net/pu8htsoe/2/ @Mugen87 ) imports several modules.

This is a nice example of the possibilities of using modules.
I put the example in the Collection of examples from discourse.threejs.org

See https://hofk.de/main/discourse.threejs/2020/FatLineEdges/FatLineEdges.html

The original imports are commented out and replaced by the modified modules.

Please note that: https://hofk.de/main/discourse.threejs/Module%20usage.pdf

G’day! Is there a tutorial for beginners* on how best to develop applications using three.js? Some of us three.js users are not that well invested in general JS programming, especially in the context of its rapid development over the last few years. I spent half a day yesterday trying to use an example with HDR env maps and I’ve given up after constant stream of errors. I too come from around r70 of Three and ES5 and my workflow was just to link necessary .js files to develop apps both locally and remotely.

If I install NPM and Three to develop locally via modules (which still gives me errors BTW), how do I then compile it for the final use on the web? How does that work with other libraries and JS code used in my project? Is it just one big-ass JS file? How would one share the development with other people, if necessary?

It would be great if there was some step-by-step example including all necessary installations and recommended development/deployment tools. Thanks :pray: :blush:

I have a threejs boilerplate here. It uses nodejs, es6 imports, and also in typescript.

1 Like

Hi @fallenartist. Unfortunately, there is no tutorial but I’ve created a repository some time ago that demonstrates a minimalistic setup with three.js and rollup.

In your npm project, add rollup and rollup-plugin-node-resolve to your dev dependencies and create a rollup config file to configure the build. The resulting build file can then be added to your index.html.

Since r137, there has been a modified procedure.

see