Why opacity and transparent is not working on meshPhongMaterial?

Questions
,
1

I’m trying to change the opacity and make it transparent in meshPhongMaterial but its not working. But when I try it with meshStandardMaterial it is working fine. How can I do the same with meshPhongMaterial

This is the code I’m trying. All of the materials are in meshPhongMaterial

Object.keys(materials).forEach(function (prop) {
          if (
            prop.includes("_352") ||
            prop.includes("_353") ||
            prop.includes("_354") ||
            prop.includes("_355") ||
            prop.includes("_356") ||
            prop.includes("_357") ||
            prop.includes("_358") ||
            prop.includes("_359") ||
            prop.includes("_360") ||
            prop.includes("_361") ||
            prop.includes("_362") ||
            prop.includes("_363") ||
            prop.includes("_351")
          ) {
            gsap.to(materials[prop], {
              duration: 1.5,
              opacity: 0.2,
              transparent: true,
            });
            
            materials[prop].color.setRGB(0, 0, 1);
          }
        });
2

It seems animating the opacity property of MeshPhongMaterial with GSAP works as expected, Edit fiddle - JSFiddle - Code Playground

Please modify the live example to demonstrate the issue.

3

try with adding this 2 lines ;

format: THREE.RGBAFormat;
depthWrite: false;

4

Basically I’m changing the material in useEffect when it loads . I think the problem is happening here. I don’t know why but if I don’t change the material from meshStandard to meshPhong gsap animation is working fine.

Here is how I’m changing the material on start:

 useEffect(() => {
    Object.keys(materials).forEach(function (prop) {
      let MaterialName=materials[prop].name;
      if(MaterialName.includes("M_UnitBox")){
        // materials[prop].color.setHex(0x00645c);
        materials[prop]=new THREE.MeshPhongMaterial({
        color:0x00645c,
        name:MaterialName
      })
      }

    });
  }, [materials]);