时间戳

首页 > 解决方案 > 为球体几何体的某些面设置透明（不透明度：0）

three.js - 为球体几何体的某些面设置透明（不透明度：0）

问题描述

我想让球体的一半面透明，另一半着色。我怎样才能做到这一点？

我试图设置一个透明的颜色，但它似乎不起作用。

            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

标签： three.jsgeometryface

解决方案

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

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

推荐阅读