How to export correctly from Blender to Three.js?

Questions
,
1

I’m creating an asset in Blender and I searched for information on how to correctly create textures for export to use in Three.js. Most of the content I found was from 2019.
Can you help me with some hints about this?

  • Are there any specific configurations I need to do?
  • Should I use specific textures?
  • Is there content I can follow to stay updated on changes that influence the relationship between Blender and Three.js?
1 Like
2

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.

1 Like
3

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) :relieved::ok_hand:

4 Likes
4

@manthrax and @mjurczyk
Thank you so much for your answer!! I made some tests and everything works fine.

Have a nice weekend!! :pray:

1 Like
5

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.

2 Likes
6

Thank you, @donmccurdy !
I’ll study the docs!! :pray: :pray: