A-frame 将球体颜色设置为变量

Question

我正在尝试找出一种在我的场景中获取球体并将球体颜色设置为变量的方法。我怎样才能做到这一点？我也希望它更新，例如，如果按下按钮并且变量更改为不同的颜色，那么球体的颜色也会更改。

这是我对球体的标记：

<a-sphere id="eleId" class="head" scale="0.3 0.3 0.3" position="0 1.5 -1"></a-sphere>

我想将该球体的颜色设置为一个名为 color 的变量。我怎样才能做到这一点？

Answer 1

你可以试试这个

<body>
    <button style="position:fixed;z-index:999" onclick="colorChange()">Color change</button>
    <a-scene>
    <a-sphere id="eleId" class="head" color="#ff1122" scale="0.3 0.3 0.3" position="0 1.5 -1"></a-sphere>
</a-scene>
</body>
<script>
    function colorChange(){
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  document.querySelector("a-sphere").setAttribute("color",color)
}
</script>

单击更改按钮后，它会随机生成一种颜色并使用随机生成的值设置颜色属性

A-frame 将球体颜色设置为变量

A-frame set sphere color to variable

html

javascript

frontend

virtual-reality

aframe