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

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/55417658/set-transparent-opacity-0-to-some-faces-of-a-sphere-geometry