Update some glitch links to examples inside the repo (#5744)

vincentfretin · web-flow · commit 1ac54d4e14cf · 2025-07-08T15:18:48.000-04:00
* Point to aincraft in the repo instead of glitch

* Remove not maintained networked-aframe glitch

* Link to community-components in the repo instead of aframe-registry glitch

* Replace a-watch glitch url by link in the repo

* Replace glitch cdn url by aframe cdn for grip-compressed.glb

* Remove cdn.glitch.com url in test

* Link to 360-gallery in the repo instead of aframe-gallery glitch

* Update link to Animated Lights example

* Increase light intensity in dynamic-lights example

* Remove dead examples in interactions-and-controllers

* Add aframe-modify-model-material example in the repo

* Remove dead Displacement Shader example
diff --git a/README.md b/README.md
@@ -117,13 +117,13 @@ architecture](https://aframe.io/docs/1.7.1/introduction/entity-component-system.
 components from the ecosystem (e.g., ocean, physics) and plug them into our
 objects straight from HTML:
 
-[![Remix](https://cloud.githubusercontent.com/assets/674727/24572421/688f7fc0-162d-11e7-8a35-b02bc050c043.jpg)](https://glitch.com/~aframe-registry)
+[See example](https://aframe.io/aframe/examples/docs/community-components/)
 
 ```html
 <html>
   <head>
     <script src="https://aframe.io/releases/1.7.1/aframe.min.js"></script>
-    <script src="https://unpkg.com/@c-frame/aframe-particle-system-component@1.2.x/dist/aframe-particle-system-component.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-particle-system-component@1.2.x/dist/aframe-particle-system-component.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.5.0/dist/aframe-extras.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@fern-solutions/aframe-sky-background/dist/sky-background.umd.min.js"></script>
   </head>
@@ -134,7 +134,7 @@ objects straight from HTML:
       <a-entity id="sphere" geometry="primitive: sphere"
                 material="color: #EFEFEF; shader: flat"
                 position="0 0.15 -5"
-                light="type: point; intensity: 5"
+                light="type: point; intensity: 15.7"
                 animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true"></a-entity>
 
       <a-entity id="ocean" ocean="density: 20; width: 50; depth: 50; speed: 4"
diff --git a/docs/components/gltf-model.md b/docs/components/gltf-model.md
@@ -6,7 +6,7 @@ parent_section: components
 source_code: src/components/gltf-model.js
 examples:
  - title: Modifying Material of Model
-   src: https://glitch.com/edit/#!/aframe-modify-model-material?path=index.html:1:0
+   src: https://aframe.io/aframe/examples/test/gltf-model/modify-materials.html
 ---
 
 [about-gltf]: https://www.khronos.org/gltf
diff --git a/docs/components/light.md b/docs/components/light.md
@@ -6,7 +6,7 @@ parent_section: components
 source_code: src/components/light.js
 examples:
   - title: Animated Lights
-    src: https://glitch.com/edit/#!/aframe-animated-lights?path=index.html
+    src: https://aframe.io/aframe/examples/showcase/dynamic-lights/
 ---
 
 The light component defines the entity as a source of light. Light affects all
diff --git a/docs/components/material.md b/docs/components/material.md
@@ -5,8 +5,6 @@ layout: docs
 parent_section: components
 source_code: src/components/material.js
 examples:
-  - title: Displacement Shader
-    src: https://glitch.com/edit/#!/aframe-displacement-shader?path=client/index.js:1:0
   - title: Shader Walkthrough
     src: https://codepen.io/machenmusik/pen/WZyQNj
   - title: Grid Shader
diff --git a/docs/components/obj-model.md b/docs/components/obj-model.md
@@ -6,7 +6,7 @@ parent_section: components
 source_code: src/components/obj-model.js
 examples:
  - title: Modifying Material of Model
-   src: https://glitch.com/edit/#!/aframe-modify-model-material?path=index.html:1:0
+   src: https://aframe.io/aframe/examples/test/gltf-model/modify-materials.html
 ---
 
 The obj-model component loads a 3D model and material using a
diff --git a/docs/core/mixins.md b/docs/core/mixins.md
@@ -7,7 +7,7 @@ order: 7
 source_code: src/core/a-mixin.js
 examples:
   - title: Animated Lights
-    src: https://glitch.com/edit/#!/aframe-animated-lights?path=index.html
+    src: https://aframe.io/aframe/examples/showcase/dynamic-lights/
 ---
 
 Mixins provide a way to compose and reuse commonly-used sets of component
diff --git a/docs/introduction/best-practices.md b/docs/introduction/best-practices.md
@@ -130,7 +130,7 @@ document.querySelector('a-scene').renderer.setTexture2D(ourTexture, 0);
 
 We will try to come with a convenient API in A-Frame to do this automatically.
 
-[360]: https://aframe-360-gallery.glitch.me
+[360]: https://aframe.io/aframe/examples/docs/360-gallery/
 
 For example, this is apparent in the [360&deg; image gallery][360]. If we look at
 the browser performance tools, there will be frame drops when switching to a
diff --git a/docs/introduction/entity-component-system.md b/docs/introduction/entity-component-system.md
@@ -5,9 +5,9 @@ layout: docs
 order: 5
 examples:
   - title: Community Components in Action
-    src: https://glitch.com/edit/#!/aframe-registry?path=index.html
+    src: https://aframe.io/aframe/examples/docs/community-components/
   - title: Animated Lights
-    src: https://glitch.com/edit/#!/aframe-animated-lights?path=index.html
+    src: https://aframe.io/aframe/examples/showcase/dynamic-lights/
 ---
 
 [ecs]: https://wikipedia.org/wiki/Entity_component_system
diff --git a/docs/introduction/faq.md b/docs/introduction/faq.md
@@ -222,7 +222,7 @@ all browsers implement this. Firefox with WebVR implements this. A link
 component for link traversal ([example][link-traversal-example]) was released with A-Frame 0.6.0:
 
 ```html
-<a-entity link="on: click; href: https://aframe-aincraft.glitch.me"></a-entity>
+<a-entity link="on: click; href: https://aframe.io/aframe/examples/docs/aincraft/"></a-entity>
 ```
 
 ## Can I prevent the camera from going through obstacles?
diff --git a/docs/introduction/installation.md b/docs/introduction/installation.md
@@ -35,11 +35,10 @@ own custom URL name.
 
 Below are a few other A-Frame Glitches for starters:
 
-- [aframe-aincraft](https://glitch.com/~aframe-aincraft) - Minecraft demo.
-- [aframe-gallery](https://glitch.com/~aframe-gallery) - 360&deg; image gallery.
-- [aframe-registry](https://glitch.com/~aframe-registry) - Showcase of various components.
+- [aincraft](https://github.com/aframevr/aframe/tree/master/examples/docs/aincraft) - Minecraft demo.
+- [360-gallery](https://github.com/aframevr/aframe/tree/master/examples/docs/360-gallery/) - 360&deg; image gallery.
+- [community-components](https://github.com/aframevr/aframe/tree/master/examples/docs/community-components) - Showcase of various community components.
 - [aframe-vaporwave](https://glitch.com/~aframe-vaporwave) - Retro-futuristic scene.
-- [networked-aframe](https://glitch.com/~networked-aframe) - Multiuser.
 
 ### Other Code Editors
 
diff --git a/docs/introduction/interactions-and-controllers.md b/docs/introduction/interactions-and-controllers.md
@@ -4,11 +4,6 @@ type: introduction
 layout: docs
 parent_section: introduction
 order: 9
-examples:
-  - title: Basic Interaction
-    src: https://glitch.com/edit/#!/aframe-basic-interaction?path=index.html:1:0
-  - title: Escape the Room
-    src: https://glitch.com/edit/#!/wide-cream?path=index.html:1:0
 ---
 
 There is no one true way for adding interactions due to variety of platforms,
diff --git a/docs/introduction/javascript-events-dom-apis.md b/docs/introduction/javascript-events-dom-apis.md
@@ -14,7 +14,7 @@ examples:
   - title: A-Frame School &mdash; Handling Events
     src: https://glitch.com/edit/#!/aframe-school-js?path=solution4.html
   - title: Animated Lights
-    src: https://glitch.com/edit/#!/aframe-animated-lights?path=index.html
+    src: https://aframe.io/aframe/examples/showcase/dynamic-lights/
 ---
 
 [geometry]: ../components/geometry.md
diff --git a/docs/introduction/models.md b/docs/introduction/models.md
@@ -6,7 +6,7 @@ parent_section: introduction
 order: 10
 examples:
  - title: Modifying Material of Model
-   src: https://glitch.com/edit/#!/aframe-modify-model-material?path=index.html:1:0
+   src: https://aframe.io/aframe/examples/test/gltf-model/modify-materials.html
 ---
 
 [3loaders]: https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders
@@ -72,7 +72,7 @@ Models](./hosting-and-publishing.md#hosting-models).
 
 ## Modifying Materials
 
-[modify]: https://glitch.com/edit/#!/aframe-modify-model-material?path=index.html:1:0
+[modify]: https://aframe.io/aframe/examples/test/gltf-model/modify-materials.html
 
 To modify the material of a model, we need to wait for the model to load, and
 then modify the three.js meshes created from the model. What happens is an
@@ -102,7 +102,7 @@ See this live example of [modifying material of a loaded model][modify].
   });
 </script>
 
-<a-scene background="color: #ECECEC">
+<a-scene>
   <a-assets>
     <a-asset-item id="cityModel" src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf"></a-asset-item>
   </a-assets>
diff --git a/examples/docs/community-components/index.html b/examples/docs/community-components/index.html
@@ -8,8 +8,8 @@
     -->
     <script src="../../../dist/aframe-master.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-particle-system-component@1.2.x/dist/aframe-particle-system-component.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/aframe-simple-sun-sky@1.2.3/simple-sun-sky.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.5.0/dist/aframe-extras.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@fern-solutions/aframe-sky-background/dist/sky-background.umd.min.js"></script>
   </head>
   <body>
     <a-scene>
@@ -25,7 +25,7 @@
                 material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
                 rotation="-90 0 0"></a-entity>
 
-      <a-simple-sun-sky sun-position="1 0.4 0"></a-simple-sun-sky>
+      <a-sky-background top-color="#EBEBF5" bottom-color="#B9B9D2"></a-sky-background>
 
       <a-entity id="light" light="type: ambient; color: #888"></a-entity>
     </a-scene>
diff --git a/examples/mixed-reality/watch/hand-menu.js b/examples/mixed-reality/watch/hand-menu.js
@@ -228,9 +228,9 @@ Watch style UI that work both in VR and AR with @aframevr in one line of <HTML>
 
 Try now on @Meta Quest Browser
 
-https://a-watch.glitch.me/
+https://aframe.io/aframe/examples/mixed-reality/watch/
 
-Just 400 lines of code: https://glitch.com/edit/#!/a-watch
+Just 400 lines of code: https://github.com/aframevr/aframe/tree/master/examples/mixed-reality/watch
 
 Watch-style intuitive but easy to occlude hands ⌚️
 Palm- style less familiar but more robust ✋
diff --git a/examples/showcase/dynamic-lights/index.html b/examples/showcase/dynamic-lights/index.html
@@ -45,7 +45,7 @@
         <a-mixin id="light"
                  geometry="primitive: sphere; radius: 1.5"
                  material="color: #FFF; shader: flat"
-                 light="color: #DDDDFF; distance: 120; intensity: 6.28; type: point"></a-mixin>
+                 light="color: #DDDDFF; distance: 120; intensity: 60; type: point"></a-mixin>
         <a-mixin id="torusKnot"
                  random-torus-knot
                  random-material
diff --git a/examples/test/gltf-model/modify-materials.html b/examples/test/gltf-model/modify-materials.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>glTF Model</title>
+    <meta name="description" content="glTF Model - A-Frame">
+    <script src="../../../dist/aframe-master.js"></script>
+    <script src="play-all-model-animations.js"></script>
+    <script>
+      AFRAME.registerComponent('modify-materials', {
+        init: function () {
+          // Wait for model to load.
+          this.el.addEventListener('model-loaded', () => {
+            // Grab the mesh / scene.
+            const obj = this.el.getObject3D('mesh');
+            // Go over the submeshes and modify materials we want.
+            obj.traverse(node => {
+              if (node.name.indexOf('ship') !== -1) {
+                node.material.color.set('red');
+              }
+            });
+          });
+        }
+      });
+    </script>
+  </head>
+  <body>
+    <a-scene stats>
+      <a-assets>
+        <a-asset-item id="cityModel" src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf"></a-asset-item>
+      </a-assets>
+
+      <a-entity gltf-model="#cityModel" play-all-model-animations modify-materials></a-entity>
+    </a-scene>
+  </body>
+</html>
diff --git a/examples/test/model/index.html b/examples/test/model/index.html
@@ -12,7 +12,7 @@
         <a-asset-item id="crate-obj" src="../../assets/models/crate/crate.obj"></a-asset-item>
         <a-asset-item id="crate-mtl" src="../../assets/models/crate/crate.mtl"></a-asset-item>
         <a-asset-item id="brainstem" src="https://cdn.aframe.io/test-models/models/glTF-2.0/brainstem/BrainStem.gltf"></a-asset-item>
-        <a-asset-item id="putter-grip" src="https://cdn.glitch.global/f43e6264-95fc-43e8-8049-dc53b985b1e3/grip-compressed.glb?v=1661368839319"></a-asset-item>
+        <a-asset-item id="putter-grip" src="https://cdn.aframe.io/test-models/models/glTF-2.0/grip-compressed.glb"></a-asset-item>
       </a-assets>
 
       <a-entity position="0 0 -12">
diff --git a/tests/core/a-assets.test.js b/tests/core/a-assets.test.js
@@ -398,7 +398,7 @@ suite('a-asset-item', function () {
     });
 
     test('get file name from url with query parameters', function () {
-      var url = 'https://cdn.glitch.com/test.jpg?1531238960521&test=yeah';
+      var url = 'https://aframe.io/test.jpg?1531238960521&test=yeah';
       assert.equal(getFileNameFromURL(url), 'test.jpg');
     });
   });
