I get undefined when I am using js to create a-entity with aframe component

Question

I am trying to add some objects through a-entity based on a given location. the problem is setAttribute is not working because when I call getAttribute, it return "undefined". even geometry and material.. by the way I hardcoded an entity with html tag and it works correctly. I thought I have to wait for a-scene to load completely but its not working either. can anyone let me know what is the problem? I think I am missing something but I do not know what it is.

<script>

console.log("0");
AFRAME.registerComponent('gps-coins', {
  init: function () {
console.log("started1");

    for (var i = 0; i < 5; i++) {

      var coinEntity = document.createElement('a-entity');

      coinEntity.setAttribute('geometry', 'primitive: cylinder; radius: 5; height: 1'); // Adjust size
      coinEntity.setAttribute('material', 'color:green'); // Coin color
      coinEntity.setAttribute('rotation', '0 90 90'); 
      coinEntity.setAttribute('position', '5 5 5'); 
    console.log(coinEntity.getAttribute('geometry'));   
    console.log(coinEntity.getAttribute('material'));   

      // Append the coin to the scene
      this.el.appendChild(coinEntity);


    }
  }
});

console.log("very end");
</script>

I want to create 10 coin in the a-scene and also set some attribute to them but when I call getAttribute, I get undefined.

Answer 1

The attributes you're setting for geometry and material seem fine, but you're not setting them to the coinEntity properly if these all the only codes u coded right ? Also you are setting the position of all coins to the same coordinates (5, 5, 5). This means they will all overlap at the same position. You might want to adjust the position for each coin so that they're distributed in the scene.

So could u try this ?

<script>
      AFRAME.registerComponent('gps-coins', {
        init: function () {
          for (var i = 0; i < 5; i++) {
            var coinEntity = document.createElement('a-entity');

            coinEntity.setAttribute('geometry', {
              primitive: 'cylinder',
              radius: 0.5,
              height: 0.1
            });

            coinEntity.setAttribute('material', 'color: green');

            coinEntity.setAttribute('rotation', '0 0 0');

            // Adjust position for each coin
            var posX = Math.random() * 10 - 5; // Random position between -5 and 5
            var posY = Math.random() * 10 - 5;
            var posZ = Math.random() * 10 - 5;
            coinEntity.setAttribute('position', {
              x: posX,
              y: posY,
              z: posZ
            });

            this.el.appendChild(coinEntity);
          }
        }
      });
    </script>