Skip to content
No description, website, or topics provided.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
README.md
build.js
index.html
package.json
rollup.config.js

README.md

Tree shake Three.js

To see the results do the following steps:

npm install
node build.js

After that you should see an index.js file in the dist folder. To verify if the build file still works open index.html. If you see a spinning cube everything worked out fine :-)

Notes

This project is just a dummy to check if tree shaking Three.js works and if it makes sense. I'm not sure if this project setup leads to the best results. If you know any improvements, let me know. Create a PR or get in contact with me.

To take advantage of tree shaking you have to include a glsl loader for rollup. I copied the glsl from the original Three.js project. You can find it here: https://github.com/mrdoob/three.js/blob/dev/rollup.config.js#L1

Furthermore you have to use the following syntax when importing a Three.js file

  import {PerspectiveCamera} from 'three/src/cameras/PerspectiveCamera';
  import {Scene} from 'three/src/scenes/scene';
  import {Mesh} from 'three/src/objects/Mesh';
  import {BoxGeometry} from 'three/src/geometries/BoxGeometry';
  import {MeshBasicMaterial} from 'three/src/materials/MeshBasicMaterial';
  import {WebGLRenderer} from 'three/src/renderers/WebGLRenderer';

The following syntax will NOT work:

  import { Camera, Scene, Mesh, BoxGeometry, MeshNormalMaterial, WebGLRenderer } from 'three';

I added a link to this repo in the following thread: https://github.com/mrdoob/three.js/issues/9403

Also there is an interesting discussion on https://discourse.threejs.org/t/tree-shaking-three-js/1349

You can’t perform that action at this time.