Question

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

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示例（点击彩色圆圈可以更改精灵多维数据集的颜色）

将Sprite Canvas材质颜色更改为其他元素的颜色

1 个答案: