Today we are going to build this

verge 3d material
Final Output

Don’t worry, it’s easier then you think just 3 puzzles

First, we need to create an HTML input color tag that generates hex code whenever we change its color, must assign that with an id so you can use it in verge 3d later. Paste this code into your HTML file.

I customized my input color tag with CSS, if want to do that, then check this  guide

As I said before the input color tag is generating hex code whenever we input color in it, that hex code stores in a property known as a value,  so we need to store that value property in a variable.

Must check the parent doc checkbox, if you are working with external HTML file

verge 3d get property puzzle

Use set color puzzle and from its advanced settings check the “use CSS color code” checkbox. And now paste your variable next to CSS color: 

Now we need to update these puzzles whenever we input color in the input color tag. So we need to use “on event of input” puzzle and inside that puzzle paste the two puzzles, that we created.

Verge 3d puzzles

That much easy it is to create real-time material changing

I am WebGL and verge 3d developer, i love to share my knowledge and experience with other people

Leave a Reply

Your email address will not be published. Required fields are marked *