'A-frame set sphere color to variable

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?

javascripthtmlfrontendaframevirtual-reality


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ajai.s

Related Questions