A-frame set sphere color to variable

Question

I am trying to figure out a way to take a sphere in my scene and set the color of the sphere to a variable. How can I achieve this? I would also like it to update so for example, if a button is pressed and the variable changes to a different color then the sphere's color will change too.

Here is my markup for the sphere:

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

What I would like is to set the color of that sphere to a variable called color. How can I achieve this?

check [this](https://stackoverflow.com/questions/67524575/a-frame-set-jump-height-to-a-variable) thread — Piotr Adam Milewski, May 24 '21 at 21:12

score 1 · Accepted Answer · answered May 06 '22 at 11:51

you can try something like this

<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>

once you click on the change button it randomly generates you a color and sets the color attribute with the randomly generated value

A-frame set sphere color to variable

1 Answers1