THREE.Color() object comes with the .setStyle ( style ) method, which takes in a
style — color as a CSS-style string
.
Consider having multiple elements with the "clicker" class
<div class="clicker red"></div>
<div class="clicker green"></div>
<div class="clicker blue"></div>
<div class="clicker white"></div>
each with specific color classes:
.clicker {
width: 24px;
height: 24px;
border-radius: 12px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.white {
background-color: white;
}
To make them react to clicks, add event listeners like this:
var clickers = document.getElementsByClassName("clicker");
for(var i = 0; i < clickers.length; i++){
var clicker = clickers[i];
clicker.addEventListener("click", setColor);
}
where setColor is the function called when an element is clicked:
function setColor(e){
var target = (e.target) ? e.target : e.srcElement; // retrieve the clicked element
var css = window.getComputedStyle(target); // get computed style of the element
var color = css.backgroundColor; // get the element's background color
spriteMaterial.color.setStyle(color); // apply this color to the material of sprites using the "setStyle" method
}
Check out this jsfiddle example (click the colorful circles to change the color of the cube of sprites)