Textures map incorrectly to gltf object

[pbxr250]

I created a 3d model in blender with different textures, then I imported this model to Three.js. The model with embedded texture is showing correctly, but when I explicitly assing this texture to material, it starts showing incorrectly. It is working as expected in Unity, but not working in three.js.

    var loader3 = new GLTFLoader();
loader3.load( './mymodels/Compartment.gltf', function ( gltf ) {
	let mesh = gltf.scene.children[2];
	mesh.scale.set( 4, 4, 4 );
	mesh.position.set( 0, 40, 0 );
	mesh.rotateY(- Math.PI / 2);	
	scene.add( mesh );
});


var loader4 = new GLTFLoader();
loader4.load( './mymodels/Compartment.gltf', function ( gltf ) {
	let texture = new THREE.TextureLoader().load( './mymodels/cm3.png' );
	texture.encoding = THREE.sRGBEncoding;
	let material = new THREE.MeshStandardMaterial( { map: texture} );
	let mesh = gltf.scene.children[2];
	mesh.material = material;
	mesh.scale.set( 4, 4, 4 );
	mesh.position.set( 20, 40, 0 );
	mesh.rotateY(- Math.PI / 2);	
	scene.add( mesh );
});

Compartment.gltf (55.5 KB)

[donmccurdy]

You’ll need to set texture.flipY=false.

See: https://threejs.org/docs/#examples/en/loaders/GLTFLoader

[pbxr250]

I have tried it but strangely it hasn’t worked. But it is working now!!! Maybe I’ve tried texture.flipY=true instead.
Thanks a lot!!!

var loader3 = new GLTFLoader();
loader3.load( ‘./mymodels/Compartment.gltf’, function ( gltf ) {
let mesh = gltf.scene.children[2];
mesh.scale.set( 4, 4, 4 );
mesh.position.set( 0, 40, 0 );
mesh.rotateY(- Math.PI / 2);
scene.add( mesh );
});

var loader4 = new GLTFLoader();
loader4.load( './mymodels/Compartment.gltf', function ( gltf ) {
	let texture = new THREE.TextureLoader().load( './mymodels/cm3.png' );
	texture.encoding = THREE.sRGBEncoding;
	texture.flipY=false
	let material = new THREE.MeshStandardMaterial( { map: texture} );
	let mesh = gltf.scene.children[2];
	mesh.material = material;
	mesh.scale.set( 4, 4, 4 );
	mesh.position.set( 20, 40, 0 );
	mesh.rotateY(- Math.PI / 2);	
	scene.add( mesh );
});