将球体几何体的某些面设置为透明(不透明度:0) [英] 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.

我希望随机选择一半的面孔并使其透明，以使球体内部的光线像上帝射线效果一样散射其光线，这类似于下面的视频中的一个. https://www.youtube.com/watch?v=suqFV7VGsL4

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

推荐答案

查看three.js中的GLSL着色器，Three.js不支持顶点颜色的alpha.它仅使用红色，绿色和蓝色，而不使用Alpha.

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.

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

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

这篇关于将球体几何体的某些面设置为透明(不透明度:0)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！