glTF Blender Exporter: Textures are not loaded after export

Using blender version 2.79
Addon lt 2.0 (https://github.com/KhronosGroup/glTF-Blender-IO)
When trying to export the model is exported colorless, without textures, tell me what I’m doing wrong, already tried everything. Thanks.

Screenshot

Can you please check if your exported glTF file loads correctly with the following viewers?

https://gltf-viewer.donmccurdy.com/
https://sandbox.babylonjs.com/

Loaded, textures are not added as I have

it’s fortune telling, but maybe your exported model doesn’t have uv coordinates?

uv I did

Please tell me what format is better to use to create interactive maps

I just tried Blender 2.80 today. I got the same problem with both built-in GLTF exporter and the latest glTF-Blender-IO. Multi actions are still not supported, although seems https://github.com/KhronosGroup/glTF-Blender-Exporter/pull/166 has been merged to glTF-Blender-Exporter.
I think it’s better to use Blender 2.79 and https://github.com/Kupoman/blendergltf at this moment.

Multiple actions are supported in glTF-Blender-IO, I’ve checked this quite recently… they do need to be either active actions, pushed down as NLA tracks, or stashed actions.

It is pretty much impossible for us to diagnose the texture issues without knowing what sort of Blender material has been used. I’d suggest Principled BSDF if you’re using Blender 2.80. In any case, if the model doesn’t work in multiple glTF viewers then you’ll have much better luck filing a bug on the exporter(s) than in the threejs forum.

2 Likes

I replied to your GitHub thread, but for the materials you’ve used in that model there is no format at all that can bring them into three.js. You’ll need to avoid complex Cycles node graphs and use Diffuse BSDF or Principled BSDF nodes instead. There does also seem to be a bug somewhere, which should be fixed soon.

/cc https://github.com/KhronosGroup/glTF-Blender-Exporter/issues/346

Yes, it i write about error on github

Tried your option, everything is exported, colors are transferred to objects, but without textures

They can not be transferred because of the original settings when exporting? I left the original settings when exporting
the same problem with textures, only here the colors are added

Screenshot%20(1)

Thanks donmccurdy.
I confirm that it exports multiple actions. But hitboxes/hurtboxes parented to bones don’t move with animations.

I tried to import the GLTF file with working bone parents (generated by https://github.com/Kupoman/blendergltf), and I got this error and boxes were not imported. So I guess this feature is not supported in io_scene_gltf2. The textures were imported with GLTF and I can see them rendered in 3D view. But when I click the material tab, Blender just crashed…

Traceback (most recent call last):
File “/Blender/2.80/scripts/addons/io_scene_gltf2/init.py”, line 467, in execute
return self.import_gltf2(context)
File “/Blender/2.80/scripts/addons/io_scene_gltf2/init.py”, line 485, in import_gltf2
BlenderGlTF.create(self.gltf_importer)
File “/Blender/2.80/scripts/addons/io_scene_gltf2/blender/imp/gltf2_blender_gltf.py”, line 35, in create
BlenderScene.create(gltf, scene_idx)
File “/Blender/2.80/scripts/addons/io_scene_gltf2/blender/imp/gltf2_blender_scene.py”, line 72, in create
BlenderNode.create(gltf, node_idx, None) # None => No parent
File “/Blender/2.80/scripts/addons/io_scene_gltf2/blender/imp/gltf2_blender_node.py”, line 128, in create
BlenderNode.create(gltf, child_idx, node_idx)
File “/Blender/2.80/scripts/addons/io_scene_gltf2/blender/imp/gltf2_blender_node.py”, line 105, in create
BlenderNode.create(gltf, child_idx, node_idx)
File “/Blender/2.80/scripts/addons/io_scene_gltf2/blender/imp/gltf2_blender_node.py”, line 105, in create
BlenderNode.create(gltf, child_idx, node_idx)
File “/Blender/2.80/scripts/addons/io_scene_gltf2/blender/imp/gltf2_blender_node.py”, line 105, in create
BlenderNode.create(gltf, child_idx, node_idx)
[Previous line repeated 3 more times]
File “/Blender/2.80/scripts/addons/io_scene_gltf2/blender/imp/gltf2_blender_node.py”, line 99, in create
BlenderSkin.create_armature(gltf, pynode.skin_id, parent)
File “/Blender/2.80/scripts/addons/io_scene_gltf2/blender/imp/gltf2_blender_skin.py”, line 45, in create_armature
obj.parent = bpy.data.objects[gltf.data.nodes[parent].blender_object]
KeyError: ‘bpy_prop_collection[key]: key “” not found’

location: :-1

About the losing textures problem, it seems because of the update of Blender. I can’t even find them by opening 2.79 .blend file with Blender 2.80.

Since fbx importer was broken in Blender 2.8, I can’t redo the workflow https://www.donmccurdy.com/2017/11/06/creating-animated-gltf-characters-with-mixamo-and-blender/ to find out.

Hmm yeah the Blender 2.8 changes are good overall but the addons seem to be still catching up to everything. :confused:

I think meshes parented to bones not working is a known issue, for anything else it would be great if you could file bugs with example .blend files!

hi donmccurdy

can you please tell me what am i doing wrong. neither i get texture but i loose shape of the mesh when exporting as gltf to three.js. jet1.glb (7.4 KB)

Sorry I get shape in three.js online editor, but no texture. and in three.js i loose shape and comes as a plane(I sculpted plane to make a terrainv1.glb (2.2 MB) )

The v1 model shows textures on https://gltf-viewer.donmccurdy.com/. If you don’t see the texture in your own demo, you will have to share your demo. Perhaps you don’t have good lighting on the model?

Thank you Don,
Let me share the demo code.

three.js webgl - FBX loader
<body>
	<div id="info">
		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader<br />
		
	</div>

	<script type="module">

		import * as THREE from './js/three.module.js';
		import Stats from './js/stats.module.js';
		import { OrbitControls } from './js/OrbitControls.js';
		import { FBXLoader } from './js/FBXLoader.js';
		import { GLTFLoader } from './js/GLTFLoader.js';
		var container, stats, controls;
		var camera, scene, renderer, light;
		var clock = new THREE.Clock();
		var mixer;
		init();
		animate();
		function init() 
		{
			container = document.createElement( 'div' );
			document.body.appendChild( container );
			camera = new THREE.PerspectiveCamera( 120, window.innerWidth / window.innerHeight, 1, 10000 );
			camera.position.set( 100, 200, 300 );
			scene = new THREE.Scene();
			scene.background = new THREE.Color( 0xa0a0a0 );
			//scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
			light = new THREE.HemisphereLight( 0xffffff, 0xffffff );
			light.position.set( 0, 200, 0 );
			scene.add( light );
			light = new THREE.DirectionalLight( 0xffffff );
			light.position.set( 0, 200, 100 );
			light.castShadow = true;
			light.shadow.camera.top = 180;
			light.shadow.camera.bottom = - 100;
			light.shadow.camera.left = - 120;
			light.shadow.camera.right = 120;
			scene.add( light );
			// scene.add( new CameraHelper( light.shadow.camera ) );
			// ground
			var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
			mesh.rotation.x = - Math.PI / 2;
			mesh.receiveShadow = true;
			scene.add( mesh );
			var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
			grid.material.opacity = 0.2;
			grid.material.transparent = true;
			scene.add( grid );
			// model
			var loader = new GLTFLoader();
			loader.load(
				"./assets/jet1.glb",
				( gltf ) => {
					// called when the resource is loaded
					console.log(gltf);
					scene.add( gltf.scene );
				//	var mesh=gltf.scene.children[1];
				//	mesh.material=new THREE.MeshLambertMaterial();
				//	scene.add(mesh);
				//	mesh.position.z=-10;
				},
				( xhr ) => {
					// called while loading is progressing
					console.log( `${( xhr.loaded / xhr.total * 100 )}% loaded` );
				},
				( error ) => {
					// called when loading has errors
					console.error( 'An error happened', error );
				},
			)

			renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.shadowMap.enabled = true;
			container.appendChild( renderer.domElement );

			controls = new OrbitControls( camera, renderer.domElement );
			controls.target.set( 0, 100, 0 );
			controls.update();

			window.addEventListener( 'resize', onWindowResize, false );

			// stats
			stats = new Stats();
			container.appendChild( stats.dom );

		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

		}

		//

		function animate() {

			requestAnimationFrame( animate );

			var delta = clock.getDelta();

			if ( mixer ) mixer.update( delta );

			renderer.render( scene, camera );

			stats.update();

		}

	</script>

</body>

Hi Don,
one more thing to be noted. This is what happens in my above code.

  1. Texture gets loaded but the object changes to a simple plane which was actually a sculpted object.
  2. In three.js online editor, i get the shape but looses out texture.
  3. But when i simply make a cube with texture, shape and texture come fine in online editor but comes as something else in my three,js project

I wish to make a game in three.js and would like to convert it as android game. Do you have any suggestions on how to go about it. Do you recommend gltf or ObjLoader and MTLLoader?

Once again grateful to you for attending my issue

Thanks