CODEWITHSUNDEEP
javascriptanimationthree.js
Ben
Ben

Reputation: 345

Three.js animated color change control

I'm struggling to apply a correct tint color to this animation in Three.js. Even if I apply correct tint color eg: #008080 the actual color is not green just blue or something. It looks like there is some calculation of the highlight color. How do I switch it off or control it?

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

Working example here:

https://jsfiddle.net/6cq1re9o/

Upvotes: 1

Views: 153

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

The color was modified by the fragment shader:

// 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 );

Since you just want the provided hex color, just uncomment and use this bit:

// 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 docs here. It simply returns a color of a point on a texture.

Check it out in this fiddle.


If you want to "control" it, then you'd need to modify the foo RGB color which is used as noise.

This may be only my opinion, but this webpack blob is highly unreadable. Next time please try making a minimal example focusing only on the problem.

Upvotes: 2

Related Questions