Don't know how to create GLTF file suitable for three.js in blender

Questions
, , , , ,
1

Hello, Im new to three.js and i’ve been trying to export a gltf file to three js from blender I have used this tutorial and realised that it may be outdated since the gltf extension they’re using is archived and it doesn’t appear in the group menu in the uv node editor. How do I export a 3d gltf file suitable for three.js in 2.81 version of blender. There seems to be no tutorial on this and I only know maya and i’m unfamiliar with blender

2

In Blender 2.8+ you can export gltf2 files out of the box. Basicly the extension used in earlier blender versions is now implemented in the 2.8 blender.
Basicly you just need to go to File -> Export -> glTF. From there you can choose if you want a gltf without embedded files, meaning that textures etc are seperate files. Or export embedded gltf which includes all other files (textures etc) inside one gltf file. Or you can export a compressed gltf called glb.
The gltf embedded is probably the straight forward variant.

You import it as follows:

// Instantiate a loader
var loader = new THREE.GLTFLoader();

// Load a glTF resource
loader.load(
	// resource URL
	'PATH/TO/GLTF/duck.gltf',
	// Callback called when the resource is loaded
	function ( gltf ) {

            // Here you're adding it to the scene. Note that the gltf.scene is the actual model (Or the scene exported from blender
		scene.add( gltf.scene );

	},
	// called while loading is progressing
	function ( xhr ) {

		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

	},
	// called when loading has errors
	function ( error ) {

		console.log( 'An error happened' );

	}
);
3 Likes
3

The Blender docs are now the best guide to follow: https://docs.blender.org/manual/en/2.82/addons/import_export/scene_gltf2.html. Notably, you’ll want to use Blender’s own Principled BSDF material and not the custom addon materials mentioned in that older guide.

5 Likes
4

You’re a lifesaver thank you so so much!