javascript - Three.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 .