Блог

Главная - Вопросы по программированию - установить прозрачность (непрозрачность: 0) для некоторых граней сферической геометрии

установить прозрачность (непрозрачность: 0) для некоторых граней сферической геометрии

#three.js #geometry #face

#three.js #геометрия #Лицо

Вопрос:

Я хочу сделать половину граней сферы прозрачной, а другую половину цветной. Как я могу это сделать?

Я пытался установить прозрачный цвет, но, похоже, это не работает таким образом.

             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

Комментарии:

1. Спасибо за ваш комментарий. На самом деле я хочу сделать прозрачной только половину граней. Я не мог понять, как это сделать с material.transparent = true. Или, кажется, проще удалить их вместо этого.

Ответ №1:

Рассматривая шейдеры GLSL в three.js, three.js не поддерживает альфа для цветов вершин. В нем используются только красный, зеленый и синий цвета, а не альфа.

Чтобы использовать цвета вершин для придания прозрачности чему-либо, вам нужно написать пользовательский шейдер или изменить three.js Шейдеры