effect-controls now is an external file

aframevr · Feb 17, 2025 · 329c3bb · 329c3bb
1 parent 42e62d6
commit 329c3bb
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 50 deletions.
diff --git a/examples/showcase/post-processing/effect-controls.js b/examples/showcase/post-processing/effect-controls.js
@@ -0,0 +1,47 @@
+import AFRAME from 'aframe';
+AFRAME.registerComponent('effect-controls', {
+    schema: {
+        hand: { type: 'string', default: 'left' }
+    },
+
+    events: {
+        pinchstarted: function () {
+            this.toggleEffect();
+        },
+        buttondown: function () {
+            this.toggleEffect();
+        }
+    },
+
+    init: function () {
+        // initialize control variable
+        this.effectOn = true;
+
+        // set the proper controller on the specified hand
+        this.el.setAttribute('meta-touch-controls', {
+            hand: this.data.hand
+        });
+        this.el.setAttribute('hand-tracking-controls', {
+            hand: this.data.hand
+        });
+    },
+
+    toggleEffect: function () {
+        // get the scene
+        var scene = this.el.sceneEl;
+
+        // toggle the effect
+        if (this.effectOn) {
+            scene.setAttribute('bloom', {
+                enabled: false
+            });
+        } else {
+            scene.setAttribute('bloom', {
+                enabled: true
+            });
+        }
+
+        // set the control variable
+        this.effectOn = !this.effectOn;
+    }
+});
diff --git a/examples/showcase/post-processing/index.html b/examples/showcase/post-processing/index.html
@@ -17,6 +17,7 @@
       import AFRAME from 'aframe';
     </script>
     <script src="../../js/info-message.js" type="module"></script>
+    <script src="./effect-controls.js" type="module"></script>
     <script src="./bloom.js" type="module"></script>
   </head>
 
@@ -64,55 +65,5 @@
 
       <a-entity id="point01" light="color: #7cd2fe; intensity: 5; type: point;" position="0 3.51 -1"> </a-entity>
     </a-scene>
-
-    <script type="module">
-      import AFRAME from 'aframe';
-
-      AFRAME.registerComponent('effect-controls', {
-        schema: {
-          hand: { type: 'string', default: 'left' }
-        },
-
-        events: {
-          pinchstarted: function () {
-            this.toggleEffect();
-          },
-          buttondown: function () {
-            this.toggleEffect();
-          }
-        },
-
-        init: function () {
-          // initialize control variable
-          this.effectOn = true;
-
-          // set the proper controller on the specified hand
-          this.el.setAttribute('meta-touch-controls', {
-            hand: this.data.hand,
-          });
-          this.el.setAttribute('hand-tracking-controls', {
-            hand: this.data.hand,
-          });
-        },
-
-        toggleEffect: function () {
-          // get the scene
-          var scene = this.el.sceneEl;
-
-          // toggle the effect
-          if (this.effectOn) 
-            scene.setAttribute('bloom', {
-              enabled: false,
-            });
-          else
-            scene.setAttribute('bloom', {
-              enabled: true,
-            });
-
-          // set the control variable
-          this.effectOn = !this.effectOn;
-        }
-      });
-    </script>
   </body>
 </html>