Why is a transparent box sometimes visible?

I have a 3d object that is surrounded by a BoxGeometry. The material of the BoxGeometry is visible (because it’s children must be visible) but its set to transparent: true and opacity: 0.

However based on the viewangle it becomes visible as a white box that does block visibility of the background, but not of its sibling (the blue pipe). Do you have any idea what could cause this?

pipe_visibility

See below for a screenrecord and the data ob the object.

{
    "metadata": {
        "version": 4.5,
        "type": "Object",
        "generator": "Object3D.toJSON"
    },
    "geometries": [
        {
            "uuid": "ff2eabe7-e197-4995-89a4-bc161ce9030d",
            "type": "BoxGeometry",
            "width": 0.13261572265625,
            "height": 0.13261584472656252,
            "depth": 0.5007917938232422,
            "widthSegments": 1,
            "heightSegments": 1,
            "depthSegments": 1
        },
        {
            "uuid": "b147bf59-59b6-44c4-9539-ec368c83c434",
            "type": "SphereGeometry",
            "radius": 0.05,
            "widthSegments": 32,
            "heightSegments": 16,
            "phiStart": 0,
            "phiLength": 6.283185307179586,
            "thetaStart": 0,
            "thetaLength": 3.141592653589793
        },
        {
            "uuid": "53ad42e6-a008-47e7-9665-b38a4d1529ca",
            "type": "SphereGeometry",
            "radius": 0.05,
            "widthSegments": 32,
            "heightSegments": 16,
            "phiStart": 0,
            "phiLength": 6.283185307179586,
            "thetaStart": 0,
            "thetaLength": 3.141592653589793
        }
    ],
    "materials": [
        {
            "uuid": "7cfe3346-e303-4fed-8e67-3e4c9cc6ecef",
            "type": "MeshStandardMaterial",
            "color": 0,
            "roughness": 1,
            "metalness": 0,
            "emissive": 0,
            "envMapIntensity": 1,
            "opacity": 0,
            "transparent": true,
            "depthFunc": 3,
            "depthTest": true,
            "depthWrite": true,
            "colorWrite": true,
            "stencilWrite": false,
            "stencilWriteMask": 255,
            "stencilFunc": 519,
            "stencilRef": 0,
            "stencilFuncMask": 255,
            "stencilFail": 7680,
            "stencilZFail": 7680,
            "stencilZPass": 7680
        },
        {
            "uuid": "fca8737c-f3d1-4fb1-bd47-ec53fd8b311c",
            "type": "MeshBasicMaterial",
            "color": 16711680,
            "reflectivity": 1,
            "refractionRatio": 0.98,
            "depthFunc": 3,
            "depthTest": true,
            "depthWrite": true,
            "colorWrite": true,
            "stencilWrite": false,
            "stencilWriteMask": 255,
            "stencilFunc": 519,
            "stencilRef": 0,
            "stencilFuncMask": 255,
            "stencilFail": 7680,
            "stencilZFail": 7680,
            "stencilZPass": 7680
        },
        {
            "uuid": "2975add5-b84e-4343-8c74-3d90bf07520c",
            "type": "MeshBasicMaterial",
            "color": 16711680,
            "reflectivity": 1,
            "refractionRatio": 0.98,
            "depthFunc": 3,
            "depthTest": true,
            "depthWrite": true,
            "colorWrite": true,
            "stencilWrite": false,
            "stencilWriteMask": 255,
            "stencilFunc": 519,
            "stencilRef": 0,
            "stencilFuncMask": 255,
            "stencilFail": 7680,
            "stencilZFail": 7680,
            "stencilZPass": 7680
        }
    ],
    "object": {
        "uuid": "f0816fe3-4b4d-404b-b1f1-7a5006848018",
        "type": "Mesh",
        "name": "Bounding box",
        "layers": 5,
        "matrix": [
            1,
            0,
            0,
            0,
            0,
            1,
            0,
            0,
            0,
            0,
            1,
            0,
            0,
            0,
            0,
            1
        ],
        "geometry": "ff2eabe7-e197-4995-89a4-bc161ce9030d",
        "material": "7cfe3346-e303-4fed-8e67-3e4c9cc6ecef",
        "children": [
            {
                "uuid": "ffa46130-8e67-40eb-8d59-5f1d4fd92e51",
                "type": "Mesh",
                "layers": 8,
                "matrix": [
                    1,
                    0,
                    0,
                    0,
                    0,
                    1,
                    0,
                    0,
                    0,
                    0,
                    1,
                    0,
                    0,
                    0,
                    0.2503958969116211,
                    1
                ],
                "geometry": "b147bf59-59b6-44c4-9539-ec368c83c434",
                "material": "fca8737c-f3d1-4fb1-bd47-ec53fd8b311c"
            },
            {
                "uuid": "c3cc70fe-369b-4469-9b4d-1859015d9ab0",
                "type": "Mesh",
                "layers": 8,
                "matrix": [
                    1,
                    0,
                    0,
                    0,
                    0,
                    1,
                    0,
                    0,
                    0,
                    0,
                    1,
                    0,
                    0,
                    0,
                    -0.2503958969116211,
                    1
                ],
                "geometry": "53ad42e6-a008-47e7-9665-b38a4d1529ca",
                "material": "2975add5-b84e-4343-8c74-3d90bf07520c"
            }
        ]
    }
}

Does it render as expected when depthWrite is set to false for box’s material?

1 Like

Yes, this fixed it. And the docs explain it well enough: three.js docs

Thanks!