Update index.html

index.html

@@ -12,7 +12,7 @@
       <a-entity id="camera" camera look-controls wasd-controls></a-entity>
     </a-entity>
     <a-sky color="#0000ff"></a-sky>
-    <a-entity id="lettersContainer"></a-entity>
+    <a-entity id="objectsContainer"></a-entity>
   </a-scene>
 
   <script>
@@ -21,28 +21,46 @@
         window.addEventListener('keydown', (event) => {
           const key = event.key.toLowerCase();
           if (key.length === 1 && /^[a-z]+$/.test(key)) {
-            this.generateLetter(key);
+            this.generateObject(key);
           }
         });
       },
-      generateLetter: function (key) {
-        const lettersContainer = document.querySelector('#lettersContainer');
-        const letter = document.createElement('a-entity');
-        letter.setAttribute('text', { value: key.toUpperCase(), align: 'center', font: 'https://cdn.aframe.io/fonts/Exo2SemiBold.fnt', width: 2 });
-        letter.setAttribute('position', '0 1 -5');
-        letter.setAttribute('rotation', '0 0 0');
-        letter.setAttribute('scale', '1 1 1');
-        letter.setAttribute('letter', '');
-        lettersContainer.appendChild(letter);
+
+      generateObject: function (key) {
+        const objectsContainer = document.querySelector('#objectsContainer');
+        const object = document.createElement('a-entity');
+
+        // Set object properties and components
+        object.setAttribute('geometry', {
+          primitive: 'box',
+          width: 1,
+          height: 1,
+          depth: 1
+        });
+        object.setAttribute('material', { color: getRandomColor() });
+        object.setAttribute('position', getRandomPosition());
+
+        objectsContainer.appendChild(object);
       }
     });
 
-    AFRAME.registerComponent('letter', {
-      init: function () {
-        this.el.setAttribute('animation', { property: 'rotation', to: '0 360 0', dur: 2000, easing: 'linear', loop: true });
-        this.el.setAttribute('animation__position', { property: 'position', to: '0 1 20', dur: 2000, easing: 'linear', loop: true });
+    // Helper function to generate random color
+    function getRandomColor() {
+      const letters = '0123456789ABCDEF';
+      let color = '#';
+      for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
       }
-    });
+      return color;
+    }
+
+    // Helper function to generate random position
+    function getRandomPosition() {
+      const x = Math.random() * 10 - 5;
+      const y = Math.random() * 10 - 5;
+      const z = Math.random() * 10 - 5;
+      return `${x} ${y} ${z}`;
+    }
   </script>
 </body>
 </html>