How to Change color and texture using html css UI?

Hello I am new here. I am changing canvas objects using html css UI. i have created a sidebar their are the some options like colors, texture etc.

here is my editor file

i have created html and css logic, but the logic of js to trigger the event. i didnt get i have seen the color changing tutorials but it apply the rendom color.

I am week in logic plz help will consider admirable

Hi @ateeque and welcome,

Check the following topic, it includes a sample project that uses the jscolor library. The part to study is how it updates the material color on each color change:

i didnt get but the the color will change the box color the file you had given the box remain same

you have my file would you just solve that. i love to learn but in starting i need help from you guys.

So, try doing this instead at the line where you are passing a random color:

material.diffuse = new pc.Color(Math.random(), Math.random(), Math.random());

instead of this line what shoild I write. as i told you i am week in js logic.

material.diffuse = new pc.Color(Math.random(), Math.random(), Math.random());

would you tell me here which line should i apply

Replace the following line that you had in your html-handler.js script:

material.diffuse.set(Math.random(), Math.random(), Math.random());

With this:

material.diffuse = new pc.Color(Math.random(), Math.random(), Math.random());

i try earlier but i dont want the random color the colors of buttons apply that box color
like button of blue when click it will apply that box color.

Then you need to read the color from your button and use that in pc.Color().

i have create my attributes in html-handler where i am getting the attriutes watch the video

Try searching online on a way to convert your blue, green etc colors to RGB. You can then feed those numbers in the new pc.Color() constructor e.g.:

new pc.Color(0.25, 0.5, 1.0);

Hello I want to change material which have some properties like image or texture. i have created some buttons which will change box material when click. here is the file
showroom | Editor (
@Leonidas @yaustar @will
help me out with js logic
how to get material and set material
plz watch the video

this topic has 2 section one is color change and second is texture change. i solve the color change but stuck with texture and i come up with logic to material change thats why i create the new topic

thanks for helping

There is also this example that uses the PlayCanvas UI on how to change the color of a model:

@Leonidas i had seen that but what i was stuck is material change and thank good the problem is solved.