How to update color values when using a shader?

Questions
1

Hi, i’m trying to do this using three js
Etch-a-sketch (michalosman.github.io)

So I basically generated a 16x16 BoxBufferGeometry grid and added edges using a shader as pointed here: How to render geometry edges? - Questions - three.js forum (threejs.org)
And got this:

image
image1169×799 80.6 KB

Everything cool, but then i realized i don’t have a way to change the material color because im using a shader mesh, basically i want to change the colors of the squares when I click them using a raycaster but before achieving that i need a way to update the colors but i want to keep the black edges like this:

image
image1033×691 137 KB

2

In general, color values are managed using uniforms eg.

new ShaderMaterial({
  uniforms:{ myColor: { value: new Color() } } 
})

However, here you have many many colors. Perhaps it’s best to generate a texture representing this.

1 Like
3

Or consider to use vertex colors for this use case.

2 Likes
4

How is that doable? It’s the first time I use a shader sorry, I wanna be able to change the color of the boxes individually after the scene is rendered

5

I slightly modified my example, so an individual box has its own color: https://jsfiddle.net/prisoner849/81rqxd20/

изображение
изображение854×864 109 KB

2 Likes
6

THANKS, it worked very well, so from now on if i want to change the color it will be doable by using this box.material.uniforms.color.value.set?

7

Perfectly correct :slight_smile:

1 Like
8

this is already closed and i just wanted to show my results after your tips:
3Dtch-a-Sketch (portareset1.github.io)
im new to coding, started in february so is not that good

1 Like
9

how can i change the texture like that