Pls suggest boilerplate of three.js projects structured according to ES6 JavaScript Modules and using bundler

Questions
, ,
1

I’m in the process of learning web app development that is based on the concept of ES6 JavaScropt Modules and that uses module bundler, although I’m still a bit confused about the different ways modules are used, not to mention various bundlers, e.g. webpack, parcel, rollup, vite, etc.

So, can you kindly suggest boilerplate of three.js project that has implemented the use of modules and bundler?

Thanks.

2

A minimal starter project with rollup is:

3

Hi @Mugen87 Thanks for sharing this starter project. I have been using it for my three js projects.

Could you let me know the following?

  1. Is there any way to not to include entire Three JS Library in rollup builds?
  2. Is it possible to use CDN links in final builds instead of including entire Three js in builds?

Thanks,

4

Roll-up should normally tree shake parts that you do not rely on out, unfortunately three itself still has a long way to go to support that process, so it will contain lots of unused clutter despite roll-up.

Instead of relying on shaky CDNs with off-times you could lazy load the module that contains the canvas. You get all green lighthouse and immediate TTL. Otherwise I believe that threeJs docs explain how to use CDNs.

1 Like