Swap Texture in model on click

Technical Support
1

I have three textures for my model. I want to change the complete texture for the whole model every time I click on the button, from texture A to B then to C, like changing clothes on it. How can I make that happen? I know there is a sample project for swapping texture but I am looking for a way to change whole model instead of one part of it.

2

So you have a single texture on your models material that you want to change?

3

yes, i have ones that already mapped with the shape, in square png

4

or maybe if possible to change or switch a part of mesh, like on and off? just like changing outfits by click. I am not sure how to make it work in a better method.

5

You can export it as separate models and change each piece with a Custom Component that uses:
ecs.GltfModel.set(world, eid, {url: ‘assets/hat1.glb’})

6

However, my model contains animations, is it not possible to export in separate models? how about changing texture of a whole, is that possible?

7

I tried another method, and I successfully changed the colour of the model with the following code.

const model = this.el.getObject3D(‘mesh’).getObjectByName(‘Hat’)

  if (outfit == 0) {

    console.log('outfit1')

    outfit = 1

    model.material.color = new THREE.Color('#ad50ff')

  } else if (outfit == 1) {

    console.log('outfit0')

    outfit = 0

    model.material.color = new THREE.Color('#FFF')

It worked like a charm but I still cannot change the texture with my pngs. The model turned black after I tried to load and change model.material.map. The project is share with support and is there any way to diagnose the problem?

8

You probably need to mark material.needsUpdate = true.

9

I tried to add this but it still didn’t work