Lighter THREE.js version

[PierBover]

I want to use THREE.js for a small widget on a website, but 400 Kb is too much considering I don't need many of it's features.

Is there a lighter version with limited features available? If not it would be great if one was offered along the full THREE.js build.

I've seen there is a build.py but I don't see an easy way of removing components, and I'm afraid I wouldn't know which folders of src can be removed without damaging core functionality.

[mrdoob]

What things don't you need? Geometries maybe?

[PierBover]

Basically I want to render flat solid colored planes with no shadows, gradients, or textures.

[benaadams]

Edit the includes locally to remove the bits you don't want (or create your own): https://github.com/mrdoob/three.js/tree/master/utils/build/includes

You can also use build.js if you perfer node to python.

I currently use a 543KB full, 8KB minified, 3KB gzipped version this way.

[PierBover]

Hey thanks @benaadams I missed that folder completely!

[PierBover]

Hey @benaadams what minifying black magic are you using?

Using the --minify option gets me about 200KB from a 400KB file.

[benaadams]

It depends on what you exclude; for example none of the shader chunks will change via minification as they are fixed strings; also I minify it with uglify externally as part of build not sure what the build uses.

[PierBover]

I have removed the shaders, extras, and other renderers, but I only get about 1:2 ratio of compression, or about 200KB.

How did you go from 543KB to 8KB?

[benaadams]

What happens if you put the un minified version in: https://marijnhaverbeke.nl/uglifyjs ?

[PierBover]

I get pretty much the same ratio.

[benaadams]

I use this as my build json:

[
    "src/Three.js",
    "src/math/Color.js",
    "src/math/Quaternion.js",
    "src/math/Vector2.js",
    "src/math/Vector3.js",
    "src/math/Vector4.js",
    "src/math/Euler.js",
    "src/math/Line3.js",
    "src/math/Box2.js",
    "src/math/Box3.js",
    "src/math/Matrix3.js",
    "src/math/Matrix4.js",
    "src/math/Ray.js",
    "src/math/Sphere.js",
    "src/math/Frustum.js",
    "src/math/Plane.js",
    "src/math/Math.js",
    "src/math/Spline.js",
    "src/math/Triangle.js",
    "src/core/Clock.js",
    "src/core/EventDispatcher.js",
    "src/core/Raycaster.js",
    "src/core/Object3D.js",
    "src/core/Face3.js",
    "src/core/Face4.js",
    "src/core/BufferAttribute.js",
    "src/core/DynamicBufferAttribute.js",
    "src/core/InstancedBufferAttribute.js",
    "src/core/InterleavedBuffer.js",
    "src/core/InstancedInterleavedBuffer.js",
    "src/core/InterleavedBufferAttribute.js",
    "src/core/Geometry.js",
    "src/core/DirectGeometry.js",
    "src/core/BufferGeometry.js",
    "src/core/InstancedBufferGeometry.js",
    "src/cameras/Camera.js",
    "src/cameras/CubeCamera.js",
    "src/cameras/OrthographicCamera.js",
    "src/cameras/PerspectiveCamera.js",
    "src/lights/Light.js",
    "src/lights/AmbientLight.js",
    "src/lights/AreaLight.js",
    "src/lights/DirectionalLight.js",
    "src/lights/HemisphereLight.js",
    "src/lights/PointLight.js",
    "src/lights/SpotLight.js",
    "src/loaders/Cache.js",
    "src/loaders/Loader.js",
    "src/loaders/XHRLoader.js",
    "src/loaders/ImageLoader.js",
    "src/loaders/JSONLoader.js",
    "src/loaders/LoadingManager.js",
    "src/loaders/BufferGeometryLoader.js",
    "src/loaders/MaterialLoader.js",
    "src/loaders/ObjectLoader.js",
    "src/loaders/TextureLoader.js",
    "src/loaders/BinaryTextureLoader.js",
    "src/loaders/CompressedTextureLoader.js",
    "src/materials/Material.js",
    "src/materials/LineBasicMaterial.js",
    "src/materials/LineDashedMaterial.js",
    "src/materials/MeshBasicMaterial.js",
    "src/materials/MeshLambertMaterial.js",
    "src/materials/MeshPhongMaterial.js",
    "src/materials/MeshDepthMaterial.js",
    "src/materials/MeshNormalMaterial.js",
    "src/materials/MeshFaceMaterial.js",
    "src/materials/PointCloudMaterial.js",
    "src/materials/ShaderMaterial.js",
    "src/materials/RawShaderMaterial.js",
    "src/textures/Texture.js",
    "src/textures/CubeTexture.js",
    "src/textures/CompressedTexture.js",
    "src/textures/DataTexture.js",
    "src/objects/Group.js",
    "src/objects/Mesh.js",
    "src/objects/LOD.js",
    "src/objects/Sprite.js",
    "src/objects/SkinnedMesh.js",
    "src/objects/LensFlare.js",
    "src/scenes/Scene.js",
    "src/scenes/Fog.js",
    "src/scenes/FogExp2.js",
    "src/renderers/shaders/ShaderChunk.js",
    "src/renderers/shaders/UniformsUtils.js",
    "src/renderers/shaders/UniformsLib.js",
    "src/renderers/shaders/ShaderLib.js",
    "src/renderers/WebGLRenderer.js",
    "src/renderers/WebGLRenderTarget.js",
    "src/renderers/WebGLRenderTargetCube.js",
    "src/renderers/webgl/WebGLExtensions.js",
    "src/renderers/webgl/WebGLGeometries.js",
    "src/renderers/webgl/WebGLObjects.js",
    "src/renderers/webgl/WebGLProgram.js",
    "src/renderers/webgl/WebGLShader.js",
    "src/renderers/webgl/WebGLShadowMap.js",
    "src/renderers/webgl/WebGLState.js",
    "src/renderers/webgl/plugins/LensFlarePlugin.js",
    "src/renderers/webgl/plugins/SpritePlugin.js",
    "src/extras/ImageUtils.js",
    "src/extras/geometries/PlaneBufferGeometry.js",
    "src/extras/geometries/SphereBufferGeometry.js"

]

Though looking at it I can probably drop a few more things...

[PierBover]

What branch are you using?

I'm getting a lot of missing files such as src/core/DynamicBufferAttribute.js.

[benaadams]

I was using a v72 dev branch that's probably not current anymore... Lot of churn going on

[mrdoob]

I currently use a 543KB full, 8KB minified, 3KB gzipped version this way.

8KB? Maybe you mean 80KB?

[benaadams]

272KB I was fooled by saving the wrong output 😿

Gzipped now to 63KB

[PierBover]

Now it makes sense :)

Thanks for your help everyone.