glTF export with array of materials with different textures

I assigh array of materials to cube
let materials = [

new THREE.MeshBasicMaterial( { color: new THREE.Color( 'lightgrey' )} ),
new THREE.MeshBasicMaterial( { color: new THREE.Color( 'lightgrey' )} ),
new THREE.MeshBasicMaterial( { color: new THREE.Color( 'lightgrey' ) } ),
new THREE.MeshBasicMaterial( { color: new THREE.Color( 'lightgrey' ) } ),
new THREE.MeshBasicMaterial( { color: new THREE.Color( 'lightgrey' ) } ),
new THREE.MeshBasicMaterial( { color: new THREE.Color( 'lightgrey' ) } )

]

if ( currentTexture.img ){

		let texture;
		let picName = ((currentTexture.img).split('/')).pop();

		if ( picName !== 'crossed-out.png' ) {

			texture = new THREE.TextureLoader().load( currentTexture.img );

			materials[ faceIndex ] = new THREE.MeshBasicMaterial( { map: texture } );
			materials[ faceIndex ].userData = picName;
		}
		else {

			materials[ faceIndex ] = new THREE.MeshBasicMaterial( { color: new THREE.Color( 'lightgrey' ) } );
			materials[ faceIndex ].userData = {};

		}

and export it to gltf. But when I open it in https://gltf-viewer.donmccurdy.com/ or in https://sandbox.babylonjs.com/ I see only one texture on whole object, as I understand, which assighed to face with materialIndex = 0

maybe I have to include some options when I export gltf?

in my app

in viewers



You can try it in my app

source code on github

I’m afraid I can’t reproduce the issue with this fiddle: https://jsfiddle.net/kw3jfz9x/1/

Thank you for fiddle, I see that it can works. But in my app it doesn’t work. I made everything like in your fiddle, but it doesn’t work… :thinking:

Can you try to use BoxBufferGeometry instead of BoxGeometry? This issue could be related to how Geometry is converted to BufferGeometry by the exporter.

1 Like

Yes, that was the problem, thank you!

Um, it’s strange that this happens. I’ll investigate the issue in the next time…

@donmccurdy It seems GLTFExporter only honors group data for indexed geometries, see

It seems the export for non-indexed geometries is wrong since the geometry is fully exported for each group. Meaning in the following example you don’t export a single cube with six sides (each with different materials) but six cubes with six different materials.

https://jsfiddle.net/ksejfugq/

@Mugen87 Has this been resolved (the exporting of multiple objects, each with different materials)? I have a situation where I have an array of materials, and custom UVs with corresponding material index that indicate which material the face should correspond to. The exporter is generating multiple meshes each with unique materials for each unique mesh.

I’m not sure what it means for custom UVs to have material indices in them, is this rendering as you expect in THREE.WebGLRenderer and are you using custom THREE.ShaderMaterial programs or something? Keep in mind that glTF is an open format and doesn’t necessarily represent things the same way as three.js. For example, THREE.GLTFLoader will never create multi-material meshes when loading any glTF file.

1 Like

Yes. It is rendering as expected in the WebGLRenderer (before the export). I have an array of THREE.Material, and I update the materialIndex of the faces from geometry.faces, to give the corresponding material for that face, as well as the corresponding uvs for those faces. The UVs seem to save correctly, but the duplicate meshs for each material seem to give a result where I have multiple instances generated of the same mesh (each with one specific material).