Opacity in mesh doesn't work


I’ve set transparent to true and opacity to 0 but my 3D model is still visible. I’m at my wit’s end because I still can’t find what’s the issue. This is my code:

function hideModel(model: Group) {
  model.traverse((object) => {
    if ((object as Mesh).material as MeshStandardMaterial) {
      const material = (object as Mesh).material as MeshStandardMaterial
      ((object as Mesh).material as MeshStandardMaterial).opacity = 0.0;
      ((object as Mesh).material as MeshStandardMaterial).transparent = true;

model3ds.forEach((model, index) => {
    const size = new Vector3();
    const box = new Box3().setFromObject(model);
    const scaleVec = new Vector3(3.25, 3.25, 3.25).divide(size);
    const scale = Math.min(scaleVec.x, Math.min(scaleVec.y, scaleVec.z));
    model.position.y = 3
    model.traverse((object) => {
      object.name = PRODUCT_NAME + featuredProducts3dModels[index].id;

Hi! Into browser console check is really material have opacity 0 and transparent true.


I’ve ensured that the opacity is really 0 and the transparent is indeed true.

Try this https://github.com/mrdoob/three.js/issues/22598

1 Like

Works like a charm. Thanks!

1 Like