How to keep transparency and still change color(material)

Hi there,

I try to build a 3D Model Viewer, where you can change the color of different parts of the model.
So far so good.

Is there a way to keep the transparency of the given material and still change the base color?

  // part-i set default colores from DB
    childID: `part-${String(i+1).padStart(3, '0')}`, // padding the number
    mtl: new THREE.MeshPhongMaterial({ color: parseInt(COLOR_ARRAY[i]), shininess: 10, transparent: true })  

With transparency and no change of color (default)

NO transparency after adding new colors to part-001…

Is MeshPhongMaterial the right thing to change color or is there a better way to change the color without replacing the material?

P.S. transparent: true ?

EDIT: OK! So some time after work and a nice start into the weekend i realised, that iam creating new materials and replacing the old on, so no way to keep transparency this way. I just need to use a set method in my changecolor function.


I hope this will do the trick. Sad that i need to wait until monday to test it…

I have s small problem with my code:

function setMaterial(parent, type, mtl, new_color) {
  parent.traverse(o => {
    if (o.isMesh && o.nameID != null) {
      if (o.nameID == type) {
        //o.material = mtl; Not using it, because of color (dont want new material)

When i use o.material.color.set(new_color) it changes all the colors of the objects and not the one i selected ? What iam doing wrong?

Maybe your objects have one material. 5 objects and 1 material. And when you change materail, its change all objects. Need 5 objects and 5 separated materials.

1 Like

I didn’t thought about that. Thanks. Will try it.

Yep ! Thank you ! That was it ! Some of my Models use the same material for different parts. I just fixed that and now every object has his own material. This way i can keep transparency and still change the color of an existing material.

1 Like