Question

想象一下，你有一个下一个高度的三角形：0,4,7 我有一个渐变颜色与下一个值： 0：蓝色，3：绿色，6：黄色，9：红色。

我该如何实现这一目标？我必须首先创造一个纹理，我不是吗？（以及应用UV映射）

或者......我可以为此写一个着色器吗？

（我不想创建更多的几何数据，我不能）感谢。

Answer 1

你可以通过两种方式解决这个问题。编写着色器 - 刨光网格。渐变，你需要通过代码或者说photoshop来自己生成。微小的纹理可能足以创建这种模式。

如果你以某种方式生成三角形，那么你需要生成一些uv。这可以像将vertex.xy或zy甚至y映射到UV中一样简单;

从这里开始，应用简单的

 MeshBasicMaterial({map:yourGradientTexture});

会创造你的效果。现在你必须弄清楚如何生成这些渐变并使它们适合像THREE.DataTexture（）。另一方面，你不要触摸着色器代码。

如果您正在编写着色器，则执行这些渐变和色调映射的常用方法是映射一些值进行标准化并从纹理中读取。这可以是NdotL或任何东西。访问纹理的最常用方法是使用uv，以便获得

texture2D(_yourSamplerTex, UV );

但是你可以做到这一点，而你还没有生成任何额外的数据，你只是使用你的职位

varying vec3 myWorldposition; //or modelPos or screenPos or whatever
void main(){
    vec3 myColorGradient = texture2D( _myGradientSamplerTex, vec2(0.0, myWorldPosition.y)).xyz;//if your gradient is horizontal in the texture

或者，一堆数学和lerps即。＆＃34;混合物（）＆＃34;在glsl中可以给你一个程序梯度，但它会很麻烦，有限并且可能很复杂。可能更容易在JS中生成此纹理并更新它。或者，您可以使用planeMesh，为其着色，让它们被插入，将其渲染为微小的渲染纹理，然后映射它。

Three.js如何使用颜色渐变为三角形着色

1 个答案: