Hello, I’m making a gaming room/portfolio site (it is my first attempt at something proper in Three.js). I made the models and everything in Blender except for a few models that I got off the internet. Exported it using .glb and imported into Three.js with what i thought were proper steps. I used Vite.js for the logical part of the set up. Everything works good it just loads a long time (I realize it is a big file I’m just asking if there is any other way).
I tried to go off the Bruno Simon 3d room, but also used a lot of other tutorials and/or discussions.
Link to the source code: GitHub - Tilan80/Portfolio_TevzIvanjko
Link to the a live version of the site: Vite App
There are hundreds of ways to optimize a three.js website, from beginner to advanced.
Here’s a few:
use a decent mesh simplification utility to make those heavy models very light without visible distortion. The best I’ve ever used is ‘Quad Remesher’ by Exoside, it has a Blender addon too, and a trial period.
Use the following three.js render information to find out the various parameters at the render loop:
You’ll see a dramatic decrease in triangles after using the above utility.
Try to reduce the number of draw calls to as few as possible.
For example join geometries together, (like the parts of a chair to a single mesh or even multiple objects that don’t move),
reduce the unnecessarily high resolution of textures, combine multiple textures to a single atlas, and several other methods.
BTW, your website is rendering too dark, calibrating your monitor with any hardware calibrator will help to see the colors properly. It might be a wrong setting in gamma too, or just the lighting.
other than that there exists gltfjsx (which uses gltf-transform with a custom config). it’s probably the easiest way to get the most compression ootb. open your shell and type:
i tried gltfpack as well, but that gives me 47.6mb. this tool is very good for meshes but probably doesn’t touch textures, where usually most of the heft comes from. but gltf-transform already uses meshopt for simplify and re-ordering.
Basics:
-i file: input file to process, .obj/.gltf/.glb
-o file: output file path, .gltf/.glb
-c: produce compressed gltf/glb files (-cc for higher compression ratio)
Textures:
-tc: convert all textures to KTX2 with BasisU supercompression (using basisu/toktx executable)
-tu: use UASTC when encoding textures (much higher quality and much larger size)
-tq N: set texture encoding quality (default: 8; N should be between 1 and 10
-ts R: scale texture dimensions by the ratio R (default: 1; R should be between 0 and 1)
-tp: resize textures to nearest power of 2 to conform to WebGL1 restrictions
-tfy: flip textures along Y axis during BasisU supercompression
Texture classes:
-tu C: use UASTC when encoding textures of class C
-tq C N: set texture encoding quality for class C
... where C is a comma-separated list (no spaces) with valid values color,normal,attrib
Simplification:
-si R: simplify meshes to achieve the ratio R (default: 1; R should be between 0 and 1)
-sa: aggressively simplify to the target ratio disregarding quality
Vertices:
-vp N: use N-bit quantization for positions (default: 14; N should be between 1 and 16)
-vt N: use N-bit quantization for texture coordinates (default: 12; N should be between 1 and 16)
-vn N: use N-bit quantization for normals and tangents (default: 8; N should be between 1 and 16)
-vc N: use N-bit quantization for colors (default: 8; N should be between 1 and 16)
Animations:
-at N: use N-bit quantization for translations (default: 16; N should be between 1 and 24)
-ar N: use N-bit quantization for rotations (default: 12; N should be between 4 and 16)
-as N: use N-bit quantization for scale (default: 16; N should be between 1 and 24)
-af N: resample animations at N Hz (default: 30)
-ac: keep constant animation tracks even if they don't modify the node transform
Scene:
-kn: keep named nodes and meshes attached to named nodes so that named nodes can be transformed externally
-km: keep named materials and disable named material merging
-ke: keep extras data
-mm: merge instances of the same mesh together when possible
-mi: use EXT_mesh_gpu_instancing when serializing multiple mesh instances
Miscellaneous:
-cf: produce compressed gltf/glb files with fallback for loaders that don't support compression
-noq: disable quantization; produces much larger glTF files with no extensions
-v: verbose output (print version when used without other options)
-r file: output a JSON report to file
-h: display this help and exit
