为球体几何体的某些面设置透明（不透明度：0）答案

【问题标题】：set transparent (opacity: 0) to some faces of a sphere geometry为球体几何体的某些面设置透明（不透明度：0）
【发布时间】：2019-08-20 09:47:44
【问题描述】：

我想让球体的一半面透明，另一半着色。我该怎么做？

我试过设置透明色，但好像不行。

            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);

如果我按照上面的方式进行操作，球体的所有面都会被着色。

我希望随机选择一半的面并且是透明的，这样它会使球体内的光线像上帝的光线一样散射它的光线效果，就像下面视频中的那样。 https://www.youtube.com/watch?v=suqFV7VGsL4

【问题讨论】：

感谢您的评论。我实际上只想使一半的脸透明。我无法弄清楚如何使用 material.transparent = true 来做到这一点。或者删除它们似乎更容易。

标签： three.js geometry face

【解决方案1】：

查看 three.js 中的 GLSL 着色器，three.js 不支持顶点颜色的 alpha。它只使用红色、绿色和蓝色，而不是 alpha。

要使用顶点颜色使某些东西透明，您需要编写自定义着色器或修改 three.js 的着色器

【讨论】：