javascript - 将 Sprite Canvas Material 颜色更改为另一个元素的颜色

Question

我想知道如何更改 Sprite Canvas Material 颜色

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

这样它就会跟随另一个具有特定 ID/类的元素的颜色。我不确定如何实现这一点，因为 CSS 颜色系统是#FFFFFF，而这里是 0xffffff。

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

Answer 1

THREE.Color() 对象具有 .setStyle ( style ) 方法，其中 style — 颜色作为 CSS 样式字符串。

假设您有几个“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;
}

因为您希望他们对点击使用react，您必须设置事件监听器，如下所示:

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示例(单击彩色圆圈可更改那里 Sprite 立方体的颜色)