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

user_7164760 0
Viewed 5892

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)

aframe three.js
1 Answers

Once you’ve loaded a model in A-Frame or three.js, it doesn’t matter much what format it was before1. 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.

1 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.

user_13147620
Related