Spaces:

awacke1
/

ChatGPTGeniusWriter-HTML5-Output-1

Running

App Files Files Community

awacke1 commited on Jul 30, 2023

Commit

e2a660a

1 Parent(s): c0fd12b

Update index.html

Browse files

Files changed (1) hide show

index.html +3 -97

index.html CHANGED Viewed

@@ -1,75 +1,5 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="utf-8">
-    <title>Aframe and Three.js Keyboard Interaction Demo</title>
-    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
-    <script src="https://threejs.org/build/three.js"></script>
-</head>
-<body>
-    <a-scene keyboard-shortcuts>
-        <a-entity position="0 1.6 0">
-            <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-scene>
-    <script>
-        AFRAME.registerComponent('keyboard-shortcuts', {
-            init: function () {
-                window.addEventListener('keydown', (event) => {
-                    const key = event.key.toLowerCase();
-                    if (key.length === 1 && /^[a-z]+$/.test(key)) {
-                        this.generateLetter(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);
-            }
-        });
-        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
-                });
-            }
-        });
-    </script>
-</body>
-</html>
-Here's an example of an A-Frame and Three.js demonstration that includes keyboard interaction, dynamically generated 3D letters, camera and WASD control, and a skybox with blue, yellow, and white chaos-driven visuals. Additionally, it includes a function to call a web service and display the results.
-```html
-<!DOCTYPE html>
-<html>
 <head>
   <meta charset="utf-8">
   <title>Aframe and Three.js Keyboard Interaction Demo</title>
@@ -95,16 +25,10 @@ Here's an example of an A-Frame and Three.js demonstration that includes keyboar
           }
         });
       },
       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');
@@ -115,28 +39,10 @@ Here's an example of an A-Frame and Three.js demonstration that includes keyboar
     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
-        });
       }
     });
-    // Call web service and display results
-    fetch('https://api11.salmonground-a8f39f59.centralus.azurecontainerapps.io/selftest')
-      .then(response => response.json())
-      .then(data => console.log(data));
   </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>Aframe and Three.js Keyboard Interaction Demo</title>
           }
         });
       },
       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');
     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 });
       }
     });
   </script>
 </body>
 </html>