GLTF .glb and Three.js
I was looking for rapid-development 3D tools and (re) discovered the highly underrated Microsoft Paint 3D. Yes, that’s right, Paint 3D, that app you already have with Windows 10 but never really bothered to use.
Quick primitive building and paintable textures with my Surface Pen? It’s a good start …but can I really use it for production stuff?
Well, it turns out Paint3D lets you save in .glb format and yes, you can load these GLTF models straight into a Three.js scene! Super convenient.
A quick trip to technohippy and three.js docs, and we have a proof of concept…
Gotchas
There were some considerations as to how you may want to go about designing your objects…
Paint 3D
Paint3D was super simple. You can just whip up some primitives, paint them and export your scene as .glb for use straight away with Three.js – it’s super quick.
The downside to it’s simplicity is no Animation functionality, nor any form of shader control.
Blender
Blender is the ‘Pro’ option, but as you might expect, way more complicated…
Blender 2.9.1 seemed to have some issues exporting .glb Binary format (?) but after a bit of mucking around I landed on the 2.9.2 Alpha and exporting as .gltf Embedded format, also I needed to do the following to my scene before exporting to GLTF…
Blender GLTF Scene config:
1. Configure World Properties > Use Nodes = true (grey)
2. For Each Object
a. Material Properties > Use Nodes = false (blue)
b. Material Properties > Shader = Principled BSDF
c. Material Properties > Base Color = Image Texture (select your texture)
3. Export as .gltf Embedded
Update: Here’s the demo for the animated .gltf version, made in Blender.