How do I change the texture of a GLTF model dynamically?

Question

In my scene I have loaded a .gltf model and it is rendered just fine.. It has a .png texture that is rendered on the surface of the 3d model. Is it possible to swap the texture programmatically? I'm using aframe (a-asset-item and a-entity to load the gltf asset)

found my solution here as well: stackoverflow.com/questions/18324936/… — reppair

Don McCurdy Don McCurdy · Accepted Answer · 2017-11-27T15:46:55

Once you’ve loaded a model in A-Frame or three.js, it doesn’t matter much what format it was before¹. For A-Frame, you can use JS to modify the model after it loads.

var tex = new THREE.TextureLoader().load('diffuse.png');
tex.flipY = false; // for glTF models.

el.addEventListener('model-loaded', function (e {
  e.detail.model.traverse(function(node) {
    if (node.isMesh) node.material.map = tex;
  });
});

See docs on THREE.MeshStandardMaterial to learn what properties there are to edit, although this could vary depending on the model you’re loading.

¹ One exception is the tex.flipY=false setting above — you'll (probably) only need that for glTF, where the UVs have a different orientation than the three.js default.

How do I change the texture of a GLTF model dynamically?

1 Answers