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.

Usage

Development server

npm start

You can view the development server at localhost:8080.

Production build

npm run build

The deploy ends up in your dist folder.

Author

• Brian Gershon