三.js动画换色控制

Question

我正在努力在 Three.js 中为这个动画应用正确的色调。即使我应用正确的色调，例如：#008080，实际颜色也不是绿色，而是蓝色或其他颜色。看起来有一些高亮颜色的计算。如何关闭或控制它？

  const PARTICLE_SIZE = 1;
  const textureAttr = {
    resolution: 64,
    radius: 32,
    color: '#008080'
  };

这里的工作示例：

https://jsfiddle.net/6cq1re9o/

Answer 1

颜色被片段着色器修改：

// noise RGB values
float r = 1. - 2.0 * noise;
float g = 0.0;
float b = 1. - 1.0 * noise;
vec3 foo = vec3(r*2.0, g, b*1.5);

// calculate a new color using the above noise
gl_FragColor = vec4( foo, 1.0 ) * texture2D( texture, gl_PointCoord );

---

由于您只需要提供的十六进制颜色，只需取消注释并使用此位：

// grab the textel
gl_FragColor = texture2D( texture, vec2(pos.x, pos.y) );
// or just use the noisy bit without the noise
// gl_FragColor = texture2D( texture, gl_PointCoord );

texture2D 文档here。它只是返回纹理上一个点的颜色。

在fiddle 中查看。

如果要“控制”它，则需要修改用作噪点的foo RGB 颜色。

---

这可能只是我的看法，但这个 webpack blob 非常不可读。下次请尝试制作minimal example focusing only on the problem。