threejs-minimal

A minimal web project needed to run Three.js experiments.

Features:

examples of using Three.js geometry (box and text), camera, lights, materials, orbit controls and animations.
uses Webpack 5, though intentionally relies on as many Webpack defaults as possible for smallest configuration file.

Tree-shaking

Tree-shaking doesn't work well with Three.js without extra work.

After playing with the various workarounds, I decided to just bring in the whole library and not bother trying to tree-shake.

Workarounds I tried:

There's a Webpack 4 plugin called three-minifier plugin and backstory for why the plugin is needed. Decided to avoid this extra complexity.
Then tried optimizing directly with imports like this: import { Scene } from 'three/src/scenes/Scene';. This worked from a tree-shaking perspective, but...
... after getting the Three.js Hello World app running, the size of the import was getting close to the whole library anyhow, and doing thee manual imports wasn't a great developer experience.

npm start

You can view the development server at localhost:8080.

npm run build

The deploy ends up in your dist folder.