How to export correctly from Blender to Three.js?

Use the standard BSDF without any complex node setups.
Depending on whether your optimizing for download time vs quality… you then export gltf, converting textures to webp for speed… and draco for compression… or export without compressions, and do the compression in a secondary pipeline. Best bet early in dev might be to just use larger assets and not worry about it, and count on the fact that you’ll probably be able to get ~10 reduction on them when it comes time to optimize.

The defaults in GLTF exporter are quite good for most cases - just keep in mind only the base material properties are supported, Blender node system is rarely compatible with exporters (there are also some fancy props supported, to find out specifically which, you can search “gltf” in three.js examples.)

1. In 99% of cases, you want to export as .glb (binary containing the textures, either this or GLTF with separate textures if your model will have swappable textures. Don’t use GLTF with embedded textures as it will encode the textures as base64 and increase the total size by ~30%.)
2. Use 1024x1024 or 2048x2048. Higher only when really justified - not due to GPU or any of that stuff, but downloading big image files takes a long time - it’s better to split a bit image into tiles or use progressive loading from SD to HD texture size.
3. If possible, run all models through gltf-transform. It reduces the size significantly.

Follow donrmccurdy on twitter (and changelog of three ofc)

To add one thing — there’s a lot of detail in the Blender glTF addon documentation explaining what it supports. Some Blender features, like UV transforms, require particular care if you’re using them. In general, if you set things up in Blender correctly for export to glTF, then three.js should display the file correctly as well.