三.js不透明度渐变答案

【问题标题】：three.js opacity gradient三.js不透明度渐变
【发布时间】：2016-12-13 18:06:45
【问题描述】：

我想知道，由于 three.js 不支持 rgba（不使用 alpha），有没有办法用不透明度渐变制作面部？

我看到可能使用 ShaderMaterial，使用自定义属性，但由于我是 WebGL 新手，我还不太了解。

attributes = {
   // ...
   customColor: { type: 'v4', value: [] }
   // ...
};

var values_color = attributes.customColor.value;

for( var v = 0; v < vertices.length; v++ ) {
   // ...
   values_color[ v ] = new THREE.Vector4();
   // ...
}

我想做这样的事情，但要透明：http://jsfiddle.net/FtML5/3/

【问题讨论】：

标签： javascript three.js

【解决方案1】：

您可以将THREE.ShaderMaterial 与alpha 值的自定义顶点属性一起使用。这是一步一步的指南 -

1) 在您的顶点着色器中，声明一个attribute float，它将采用 alpha 值。同时在顶点和片段着色器中声明varying float。

顶点着色器：

attribute float alphaValue;
varying float vAlphaValue;

片段着色器：

varying float vAlphaValue;

2) 将 alpha 属性值赋给顶点着色器中的可变值。

顶点着色器：

vAlphaValue = alphaValue;

3) 完成所有计算后，将 alpha 变化值赋给 gl_FragColor 的 alpha 值。

片段着色器：

gl_FragColor.a = vAlphaValue;

4) 从主机端，添加一个总顶点长度的数组。这是代码示例 -

var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
var alphaArray = [];
var alphaArrayLength = vertices.length / 3;
for(var i = 0; i < alphaArrayLength; i++) {
      alphaArray.push(0.5);
}

5) 为几何图形中的 alpha 值添加自定义属性，并使用创建的数组对其进行更新 -

geometry.addAttribute('alphaValue', new THREE.BufferAttribute(new Float32Array(alphaArray), 1));

6) 创建一个 THREE.ShaderMaterial -

var material = new THREE.ShaderMaterial({

            vertexColors: THREE.VertexColors,
            side: THREE.DoubleSide,
            transparent: true,
            vertexShader: document.
                getElementById('vertex_shader_for_face').text,
            fragmentShader: document.
                getElementById('fragment_shader_for_face').text
        });

7) 使用几何和材质创建网格 -

var mesh = new THREE.Mesh(geometry, material);

【讨论】：

【解决方案2】：

最快的解决方案似乎是使用自定义着色器并根据 UV 值设置片段不透明度。

【讨论】：