Set material diffuse from HTML input

Help & Support
1

I’ve created a CSS/HTML color picker from various sources and I’d like for it to automatically change the diffuse of a material.
Here is the project: bruh_2 (just a test world).
I’m really looking for some help to figure out a way to do it cause everything I’ve tried hasn’t work.
I’m pretty much a noob when it comes to coding.

Any help will be much apprecieted.
(I know my code is probably a mess but I’ve gone through so many iterations now I’m really close to just dump it in fire, sorry)

2

Hi @Nicola_Rambelli,

Check this example, it showcases how to communicate from an HTML click event and update the material color (random color):

https://developer.playcanvas.com/en/tutorials/htmlcss-ui/

You are pretty close in your project, what you are looking for is to read the color value of your picker and convert from HEX to RGB, so it can be applied to the material.

Here is how to get the value from the color picker as HEX using a simple DOM event. You can paste it in the browser console while your app is running:

document.getElementById('primary_color').addEventListener("input", (event) => {
   const color = event.target.value;
   console.log(color);
}, false);

image
image1458×1170 97.7 KB

2 Likes
3

I’ve implemented the code you suggested like this:

document.getElementById('primary_color').addEventListener("input", (event) => {
   const color = event.target.value;
   function hexToRGB((color),false){
       var h = "0123456789abcdef";
       var r = h.indexOf(hex[1])*16+h.indexOf(hex[2]);
       var g = h.indexOf(hex[3])*16+h.indexOf(hex[4]);
       var b = h.indexOf(hex[5])*16+h.indexOf(hex[6]);
       
       var material = this.material.resource;
       if (material) {
           material.diffuse.set((+r+), (+g+), (+b+));
           material.update();
           }
    }, false);
};

but I’m still getting a

Uncaught SyntaxError: Unexpected token '('

I’ve checked parenthesis and commas but I cannot find the issue. What am I missing?

4

Hi @Nicola_Rambelli,

The way you added a function inside the input color listener isn’t correct. There are JavaScript errors in there. Also checking your project, that code should live inside a script instance method like initialize, check this manual page on how scripting works in PlayCanvas:

https://developer.playcanvas.com/en/user-manual/scripting/

Here is an updated version of your code that works and updates the material color. But definitely study the manual to understand better on how to use it in your project:

document.getElementById('primary_color').addEventListener("input", (event) => {
   const hex = event.target.value.replace('#','');
    var bigint = parseInt(hex, 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

   const color = new pc.Color(r/255,g/255,b/255);
   const material = pc.app.assets.find('New Material').resource;
   material.diffuse = color;
   material.update();
});

image
image1345×1274 68.7 KB

2 Likes
5

You are a life saver, I’m still learning and I sure got a long way to go. Thank you again for your solution, it works flawlessly.

1 Like
6

Goodmorning,

I’m bumping this thread because I’m looking for a way to detect change in the html to initialize the script, I’ve used the .prototype.update but it fires off every frame making the visualizer un usable after a couple minutes.

7

Check this manual page, it contains a way to listen to the asset load event, to monitor changes in the HTML:

https://developer.playcanvas.com/en/user-manual/assets/html/

1 Like