Search code examples
3dthree.jsblendergltf

Import another Texture at runtime (three.js with .glb Format)

I am trying to change a texture of an .glb object at runtime. I am using three.js and it will not work.

As in this example it has to work... http://necromanthus.com/Test/html5/sims_room.html

So, I have this object: (glb export with embedded image) Shoe

Now I change the texture and something wild like this happens: Shoe after change

I have no Idea what I can do.

Here is the code of loading the .glb object:

var shoeFile = 'shoe.glb';
glbLoader.load('3d_models/' + shoeFile, function(geometry) {
  shoeObject = geometry.scene.children[0];
  scene.add(shoeObject);
}, onLoadProgress);

Here is the code for changing the texture:

var textureLoader = new THREE.TextureLoader();
var remap = textureLoader.load( "3d_models/shoe.png" );

function setAnotherTexture( texture ) {
   scene.children[5].material.map = eval( texture );
}

Is my code wrong or is there a trick to export another texture in blender?

Hope someone can help me with it. Thank you.

Solution

  • The glTF format uses a different texture convention than three.js, and texture.flipY must be set to false (its default is true). For textures included in a model, GLTFLoader does this automatically. When changing out the texture or adding a new texture at runtime, this must be done in your JS code:

    texture.flipY = false;
mesh.material.map = texture;