How to Change color and texture using html css UI?

Help & Support
1

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
https://playcanvas.com/editor/scene/1792618

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

Capture.PNG
Capture.PNG1763×850 101 KB

2

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:

3

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

4

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

5

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());
material.update();

image
image1627×1089 95.8 KB

6

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());
material.update();

would you tell me here which line should i apply
@Leonidas

7

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());
8

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.
@Leonidas

9

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

10

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

11

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

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 (playcanvas.com)
@Leonidas @yaustar @will
help me out with js logic
how to get material and set material
plz watch the video

13

@Leonidas
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

14

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

https://developer.playcanvas.com/en/tutorials/webxr-ray-input/

15

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