我想知道,由于 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/
最佳答案
您可以将 THREE.ShaderMaterial
与 alpha 值的自定义顶点属性结合使用。这是分步指南 -
1) 在顶点着色器中,声明一个将采用 alpha 值的属性 float
。还要在顶点着色器和片段着色器中声明一个变化的 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) 使用几何体和 Material 创建网格 -
var mesh = new THREE.Mesh(geometry, material);
关于javascript - 三.js不透明度渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38821176/