How to export GLTF scene from Blender to the Three.js environment.

Blender checklist.md

How to export GLTF scene from Blender to the Three.js environment.

Geometry

• Convert non-mesh geometry to mesh (curves, fonts, etc) Object > Convert > Mesh .
• Apply transforms.
• Reduce polygons as much as possible (decimate, remove invisible).
• Use simple primitives. Don't use subdiv workflow (Or optimize after).

Shaders

• Bake procedural shaders into textures.
• Animated shaders is not supported.
• Displacement should be also baked.
• Masks is not supported (roughness, metallic, etc) and also should be baked.
• When baking diffuse color disable metallic value (set 0). Uncheck indirect light.
• Take care of UVs.
• Don't rotate env maps. Three.js doesn't support this.

Animations

• Use quaternions for rotations N-menu > Item > Transform (Quaternion XYZW). It prevent artifacts when baking.
• Before exporting animations should be baked Object > Animtion > Bake Action.
• Apply rotations and scale.
• When baking check every parameter and ensure frame range.

Simulations

• Apply as shape keys.
• Post procesing modifiers will not work.

Export

• Format .glb
• Include camera and light in Include > Data if you need them.
• Apply modifiers Mesh > Apply modifiers
• Check Compression
• Animation tab with default parameters (rn there is no valid method of automatic export without hassle)

References

gltf viewer

Texture baking

GLTF compression Three.js

Gimbal lock animation baking

Clear parents animation baking

How to Export Cloth/Soft Body Simulations From Blender