Three.js PWA Template

July 22, 2023

Three.js PWA Template
Three.js PWA Template

This is an ultra basic template / boilerplate for a three.js project that will meet the requirements to be installable as a progressive web app (PWA). It uses Webpack and the CopyWebpackPlugin to compile everything and to include all the necessary bits and pieces such as icons, manifest.json, and service-worker.js. It is also designed to copy all the required directories and files etc from the src directory only, and to be easily configurable from the webpack.config.js file.

Launch Demo

At the time of publishing (22/7/2023), this gets a perfect score for all categories in Chrome Lighthouse audit. 😎

To work with this template you will of course need an understanding of Github and Node etc. Then:

Github Repo

Please note: Generally it is much easier to meet Lighthouse requirements in a standard HTML webpage. For Three.js webpages I usually need to make adjustments that will inevitably lower the Lighthouse Audit score. For example, some HTML text content needs to be present in the initial view to meet the ‘Contentful Paint’ requirements. And, when using things like the Orbit Controls it is generally a good idea to set the meta – user-scalable to 0 etc, which will lower the score for accessibility.

If you liked this resources please consider showing your appreciation and offering your support. It will make my day!

Buy me a coffee