Importing Three.js as a Module

Channel:

SBCODE

Subscribers:

24,900

Published on August 9, 2020 10:04:22 AM ● Video Link: https://www.youtube.com/watch?v=z9qtGHTqLqQ

Duration: 6:32

15,721 views

393

Code : https://github.com/Sean-Bradley/Threejs-Boilerplate
Article : https://medium.com/@sean_bradley/using-es6-modules-in-three-js-7621f98d72d5
Three.js Book : https://www.amazon.com/dp/B09GYTKRCH
Course : https://sbcode.net/threejs/
Discount Coupons : https://sbcode.net/coupons

***** Note *****
This video used three r119. Since three r128 modules need to be built using bundlers or use an importmap. See boilerplate at https://github.com/Sean-Bradley/Threejs-Boilerplate for example of using importmap in the index.html
****************

In this video, I convert an older Threejs project to use the newer Threejs modules.

When updating older Threejs projects, you may get a warning in the browser such as,
"As part of the transition to ES6 Modules, the files in 'examples/js' were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124)."
There are several steps involved to convert to use modules, and I show you a very quick and simple way of handling this problem.

See the links above, there is a github project where you can download the code created in this video. The github project also has a branch named 'before-es6-modules' that shows the older style code used at the beginning of this video.

Relative Import References versus Module Specifiers
If you ever see the error "Relative references must start with either "/", "./", or "../".", then that may also be related to using Module Specifiers in the client, when it was expecting a Relative Import Reference instead. You can read more about Relative Imports versus Module Specifiers at https://medium.com/threejs/module-specifiers-versus-relative-import-references-fd747980ba6f

0:00 Importing Three.js as a Module
0:20 Show example before ES6 modules
0:50 Show deprecation warning
1:00 Recreate example using ES6 modules
1:35 Open new porject in VSCode
1:44 npm init
1:50 npm install three@latest
2:15 Create a basic Nodejs Express server
2:30 Create static paths to Three modules folders
3:30 Create public files for html and js
3:40 Show script tage with type=module
3:50 Copy old js code
4:00 Add import statements to new ES6 version
4:25 Update orbitcontrols reference to ES6 version
5:03 Create start script in package.json
5:27 npm install express
5:35 npm start
5:40 refresh browser and see working ES6 version of code.
6:10 Code is on GitHub