https://github.com/briangershon/threejs-minimal
A minimal web project needed to run three.js experiments.
https://github.com/briangershon/threejs-minimal
starter-template threejs
Last synced: about 2 months ago
JSON representation
A minimal web project needed to run three.js experiments.
- Host: GitHub
- URL: https://github.com/briangershon/threejs-minimal
- Owner: briangershon
- License: mit
- Created: 2020-10-25T17:40:19.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-10-26T03:00:17.000Z (over 4 years ago)
- Last Synced: 2025-01-12T09:45:03.160Z (4 months ago)
- Topics: starter-template, threejs
- Language: JavaScript
- Homepage:
- Size: 54.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/yushijinhun/three-minifier) and [backstory](https://github.com/mrdoob/three.js/issues/16059) 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
```bash
npm start
```
You can view the development server at `localhost:8080`.
### Production build
```bash
npm run build
```
The deploy ends up in your `dist` folder.
## Author
- [Brian Gershon](https://www.briangershon.com)