将“精灵画布材质”颜色更改为另一元素的颜色

Question

我想知道如何更改Sprite Canvas材质的颜色

var material = new THREE.SpriteCanvasMaterial( {
color: 0xffffff,

这样它就可以跟随另一个具有特定ID /类别的元素的颜色。 我不确定如何实现此目标，因为CSS颜色系统为#FFFFFF，而此处为0xffffff。

我删除了第一个问题，因为我对此有了更多了解。 任何帮助将非常感激。 干杯。

Answer 1

THREE.Color()对象具有.setStyle ( style )方法，其中style — color as a CSS-style string 。

假设您有“ clicker”类的几个元素

  <div class="clicker red"></div>
  <div class="clicker green"></div>
  <div class="clicker blue"></div>
  <div class="clicker white"></div>

带有其他颜色类别：

.clicker {
  width: 24px;
  height: 24px;
  border-radius: 12px;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.white {
  background-color: white;
}

您希望他们对单击做出反应时，必须设置事件侦听器，如下所示：

var clickers = document.getElementsByClassName("clicker");
for(var i = 0; i < clickers.length; i++){
    var clicker = clickers[i];
    clicker.addEventListener("click", setColor);
}

请注意， setColor是单击元素时调用的函数：

function setColor(e){
  var target = (e.target) ? e.target : e.srcElement; // get the element you've clicked
  var css = window.getComputedStyle(target); // get computed style of the element
  var color = css.backgroundColor; // get element's background color (it will be like "rgb(128,0,255)")
  spriteMaterial.color.setStyle(color); // apply this color to the material of sprites via the "setStyle" method
}

jsfiddle示例（单击彩色圆圈以更改其中的精灵立方体的颜色）