set transparent (opacity: 0) to some faces of a sphere geometry

Question

I want to make half the faces of a sphere transparent and the other half colored. How can I do that?

I've tried to set a transparent color, but it seems it doesn't work that way.

            geometry = new THREE.SphereGeometry(1.0, 17, 17);

            for (var i = 0; i < geometry.faces.length; i++) {

                let x = Math.random();

              //Here I'm trying to set a transparent color to half the faces of the sphere.

                let color = 0
                if (x < 0.5) {
                    color = '0x000000';
                } else {
                    color = '0xffffff';
                }
                geometry.faces[i].color.setHex(color);

            }

            var material = new THREE.MeshPhongMaterial({ vertexColors: THREE.VertexColors });

            sphere = new THREE.Mesh(geometry, material);

All the faces of the sphere are colored if I do in the way above.

I want half the faces to be randomly selected and to be transparent so that it will make the light inside the sphere scatter its rays like god rays effect, which is something like the one in the video below. https://www.youtube.com/watch?v=suqFV7VGsL4

Thank you for your comment. I actually want to make only the half of faces transparent. I couldn't figure out how to do it with material.transparent = true. Or it seems it's easier to delete them instead. — gwen, Apr 03 '19 at 04:17

score 0 · Answer 1 · answered Apr 03 '19 at 05:58

Looking at the GLSL shaders in three.js, three.js does not support alpha on vertex colors. It only uses Red, Green, and Blue, not the alpha.

To use vertex colors to make something transparent you'd need to write a custom shader or modify three.js's shaders

set transparent (opacity: 0) to some faces of a sphere geometry

1 Answers1

Linked