Three.js Boilerplate

A Three.js Boilerplate to aid in quick prototyping.

When updating older Three.js 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 in converting to use modules. This boilerplate was written to help you solve some issues that you may have when converting your Three.js projects to use modules.

To install and start the master (ES6) branch

git clone https://github.com/Sean-Bradley/Threejs-Boilerplate.git
cd Threejs-Boilerplate
npm install
npm start

Visit http://127.0.0.1:3000

To update threejs

npm install three@latest

Note : This boilerplate contains 3 branches

master : The minimal boilerplate using ES6 imports and script type module
before-es6-modules : The example, but using older style script imports
water : An example based on the official Three.js Ocean example

To see the before-es6-modules branch

git checkout before-es6-modules
npm install
npm start

To see the water branch

git checkout water
npm install
npm start

Video Tutorial About Importing Three.js as Module

Threejs Courses

To help support this Threejs boilerplate and my other open source licensed repositories, please take a look at my official Threejs courses,

Three.js and TypeScript

and

React Three Fiber

Note, discount Coupons for all my courses can be found at https://sbcode.net/coupons

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 Named Module Specifiers in the client, when it was expecting a Relative Import Reference instead. You can use an import map to help solve that problem. You can also read more about Relative Imports versus Module Specifiers at https://medium.com/threejs/module-specifiers-versus-relative-import-references-fd747980ba6f