Material: transparent=true has no effect on glTF materials (since r132)

With Three.js r132 I can no longer make my models transparent. I export Models in Blender (2.92.0) as .glb file. I then import via GLTFLoader and set the opacity in JavaScript. I am also unable to make the object transparent using the three.js editor (drag and drop .glb in the editor).

Steps to reproduce the behavior:

1. Export “Blender cube” as .glb file
2. Load the .glb via GLTFLoader
3. Set opacity/transparency on the MeshStandardMaterial

(expect that model ist transparent)

Code

new GLTFLoader().load("cube.glb", (gltf) => {
    const cube = gltf.scene.getObjectByName("Cube");
    if (
      cube instanceof THREE.Mesh &&
      cube.material instanceof THREE.MeshStandardMaterial
    ) {
      scene.add(cube);
      cube.material.opacity = 0.5;
      cube.material.color.set("#0000ff");
      cube.material.transparent = true;
      cube.material.depthWrite = false;
      cube.material.side = THREE.FrontSide;
    }
  });

Expected behavior

With r131, the sample project looks like this:

https://codesandbox.io/s/threejs-transparency-r131-rth6g

Screenshots

With r132, the sample project looks like this:

https://codesandbox.io/s/threejs-transparency-r132-1hs0v

Platform:

• Device: Desktop
• OS: MacOS
• Browser: Chrome
• Three.js version: r132.2

[donmccurdy]

In the latest version you may also need to set material.format = THREE.RGBAFormat to enable transparency. I’m not sure whether that change will remain in future versions though, see https://github.com/mrdoob/three.js/pull/22428#issuecomment-911819793.

[optimus007]

to summarise

• material.transparent : Boolean // master transparency control BUT _alphaTest will still work if this is false

• material.opacity : Float 0-1 // Only works if material.format=THREE.RGBAFormat

• material.alphaMap : greyscale opacity map // works if material.transparent=true & material.format is THREE.RGBAFormat NOTE: GLTF exporter does not export this channel & USDZ exporter does.

• Alpha channel of material.map // ( transparent png image) will work if material.transparent=true & material.format is irrelevant here

• material.format : THREE.format // Is THREE.RGBFormat for imported gltf files and is THREE.RGBAFormat when a new THREE.MeshStandardMaterial is created .

• material._alphaTest : Float 0-1 // clips the transparent part before this threshold value. Side note: this was material.alphaTest before now its material._alphaTest but using matrial.alphaTest still works

is this correct ?