Reformat other examples, fix aframe master url, update to environment…

… 1.4.0 (#779) * Reformat other examples, fix aframe master url, update to environment 1.4.0 * Replace old a-animation with animation component * Use event-set 5.x.x url to get the latest version * add movement-controls to controllers.html example
aframevr · Nov 27, 2024 · a6e1314 · a6e1314
1 parent ebb07fa
commit a6e1314
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 46 deletions.
diff --git a/examples/360video.html b/examples/360video.html
@@ -33,9 +33,9 @@
       <a-camera>
         <a-entity
           position="0 0 -1.5"
-          text="align:center;
-                width:6;
-                wrapCount:100;
+          text="align: center;
+                width: 6;
+                wrapCount: 100;
                 color: white;
                 value: Click or tap to start video"
           hide-on-play="#video">

diff --git a/examples/colors.html b/examples/colors.html
@@ -3,15 +3,15 @@
   <head>
     <meta charset="utf-8">
     <title>Example Scene</title>
-    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe/dist/aframe-master.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@master/dist/aframe-master.min.js"></script>
   </head>
   <body>
     <a-scene debug="true">
-      <a-entity id="hsl-green" geometry="primitive: box" material="color:hsl(120, 100%, 75%)" position="-4 1 0"></a-entity>
-      <a-entity id="rgb-yellow" geometry="primitive: box" material="color:rgb(255, 255, 0)" position="-2 1 0"></a-entity>
-      <a-entity id="hex3-red" geometry="primitive: box" material="color:#f00" position="0 1 0"></a-entity>
-      <a-entity id="hex6-red" geometry="primitive: box" material="color:#ff0000" position="2 1 0"></a-entity>
-      <a-entity id="string-blue" geometry="primitive: box" material="color:blue" position="4 1 0"></a-entity>
+      <a-entity id="hsl-green" geometry="primitive: box" material="color: hsl(120, 100%, 75%)" position="-4 1 0"></a-entity>
+      <a-entity id="rgb-yellow" geometry="primitive: box" material="color: rgb(255, 255, 0)" position="-2 1 0"></a-entity>
+      <a-entity id="hex3-red" geometry="primitive: box" material="color: #f00" position="0 1 0"></a-entity>
+      <a-entity id="hex6-red" geometry="primitive: box" material="color: #ff0000" position="2 1 0"></a-entity>
+      <a-entity id="string-blue" geometry="primitive: box" material="color: blue" position="4 1 0"></a-entity>
     </a-scene>
     <script src="../dist/aframe-inspector.js"></script>
   </body>

diff --git a/examples/controllers.html b/examples/controllers.html
@@ -3,10 +3,11 @@
   <head>
     <meta charset="utf-8">
     <title>Controllers</title>
-    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe/dist/aframe-master.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/dist/aframe-environment-component.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/dist/aframe-teleport-controls.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@master/dist/aframe-master.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/aframe-environment-component.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/c-frame/[email protected]/dist/aframe-extras.controls.min.js"></script>
   </head>
   <body>
     <a-scene>
@@ -23,8 +24,8 @@
           event-set__mouseenter="_event: mouseenter; material.opacity: 0.75"
           event-set__mouseleave="_event: mouseleave; material.opacity: 1"
           event-set__click="_event: click; scale: 1.1 1.1 1.1"></a-mixin>
-        <img id="crateImg" src="https://aframe.io/sample-assets/assets/images/wood/crate.gif" crossOrigin="true">
-        <img id="floorImg" src="https://aframe.io/sample-assets/assets/images/terrain/grasslight-big.jpg" crossOrigin="true">
+        <img id="crateImg" src="https://aframe.io/sample-assets/assets/images/wood/crate.gif" crossorigin="true">
+        <img id="floorImg" src="https://aframe.io/sample-assets/assets/images/terrain/grasslight-big.jpg" crossorigin="true">
       </a-assets>
 
       <a-entity id="environment" environment="preset: forest; fog: 0"></a-entity>
@@ -34,10 +35,8 @@
         <a-entity id="aBlueBox" mixin="interactable" geometry="primitive: box; depth: 2; height: 5; width: 1" material="color: #4CC3D9" position="0 8 0"></a-entity>
         <a-entity id="shortOrangeBox" mixin="interactable short orange box" position="-5 2 0"></a-entity>
         <a-entity id="shortYellowBox" mixin="interactable short yellow box" position="5 2 0"></a-entity>
-        <a-entity id="redBox" mixin="interactable" geometry="primitive: box" material="color: #F00" position="-4 1 0">
-          <a-animation attribute="rotation" to="0 360 0" repeat="indefinite" easing="linear" dur="9600"></a-animation>
-        </a-entity>
-        <a-entity id="yellowSphere" mixin="interactable" geometry="primitive: sphere" material="color:#ff0; metalness:0.0; roughness:1.0" position="-2 2 -2"></a-entity>
+        <a-entity id="redBox" mixin="interactable" geometry="primitive: box" material="color: #F00" position="-4 1 0" animation="property: object3D.rotation.y; to: 360; loop: true; easing: linear; dur: 9600"></a-entity>
+        <a-entity id="yellowSphere" mixin="interactable" geometry="primitive: sphere" material="color: #ff0; roughness: 1" position="-2 2 -2"></a-entity>
         <a-box id="brickBox" mixin="interactable" src="https://aframe.io/sample-assets/assets/images/bricks/brick_bump.jpg" position="-5 5 -2" width="1" color="#F16745"></a-box>
         <a-box id="aBox" mixin="interactable" position="0 2 0" height="2" color="#FFC65D"></a-box>
 
@@ -50,9 +49,13 @@
       <!-- Lights. -->
       <a-entity id="pointLight" light="type: point; intensity: 0.25" position="0 3 3"></a-entity>
 
-      <!-- Hands. -->
-      <a-entity id="rightHand" laser-controls="hand: right"></a-entity>
-      <a-entity id="leftHand" hand-controls="left" teleport-controls></a-entity>
+      <a-entity id="rig" movement-controls>
+        <a-entity id="player" camera position="0 1.6 0" look-controls></a-entity>
+        <!-- Hands. -->
+        <a-entity id="rightHand" laser-controls="hand: right"></a-entity>
+        <a-entity id="leftHand" hand-controls="hand: left"
+                  blink-controls="rotateOnTeleport: false; cameraRig: #rig; teleportOrigin: #player; collisionEntities: .environmentGround"></a-entity>
+      </a-entity>
     </a-scene>
 
     <script src="../dist/aframe-inspector.js"></script>

diff --git a/examples/embedded-zoom.html b/examples/embedded-zoom.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Inspector Test - Embedded (Bad)</title>
-    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe/dist/aframe-master.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@master/dist/aframe-master.min.js"></script>
     <style>
       html,
       body {
@@ -32,28 +32,26 @@
             <a-mixin id="purple" material="color: #93648D"></a-mixin>
             <a-mixin id="short" scale="1 0.5 1"></a-mixin>
             <a-mixin id="yellow" material="color: #FFC65D"></a-mixin>
-            <img id="crateImg" src="assets/textures/crate.gif">
-            <img id="floorImg" src="assets/textures/grasslight-big.jpg">
+            <img id="crateImg" src="https://aframe.io/sample-assets/assets/images/wood/crate.gif" crossorigin="anonymous">
+            <img id="floorImg" src="https://aframe.io/sample-assets/assets/images/terrain/grasslight-big.jpg" crossorigin="anonymous">
           </a-assets>
 
           <!-- Meshes. -->
           <a-entity id="aBlueBox" mixin="blueBox" position="0 8 0"></a-entity>
           <a-entity id="shortOrangeBox" mixin="short orange box" position="-5 2 0"></a-entity>
           <a-entity id="shortYellowBox" mixin="short yellow box" position="5 2 0"></a-entity>
-          <a-entity id="redBox" geometry="primitive: box" material="color:#f00" position="-4 1 0">
-            <a-animation attribute="rotation" to="0 360 0" repeat="indefinite" easing="linear" dur="9600"></a-animation>
-          </a-entity>
-          <a-entity id="yellowSphere" geometry="primitive: sphere" material="color:#ff0; metalness:0.0; roughness:1.0" position="-2 2 -2"></a-entity>
-          <a-box src="assets/textures/brick_bump.jpg" position="-5 5 -2" width="1" color="#F16745"></a-box>
+          <a-entity id="redBox" geometry="primitive: box" material="color: #f00" position="-4 1 0" animation="property: object3D.rotation.y; to: 360; loop: true; easing: linear; dur: 9600"></a-entity>
+          <a-entity id="yellowSphere" geometry="primitive: sphere" material="color: #ff0; roughness: 1" position="-2 2 -2"></a-entity>
+          <a-box src="https://aframe.io/sample-assets/assets/images/bricks/brick_bump.jpg" position="-5 5 -2" width="1" color="#F16745"></a-box>
           <a-box id="aBox" position="0 2 0" height="2" color="#FFC65D"></a-box>
 
           <!-- Models. -->
           <a-entity id="crate" geometry="primitive: box" material="src: #crateImg" position="3 4 0"></a-entity>
           <a-entity id="greenBox" geometry="primitive: box" material="color: #0f0" position="4 2 4"></a-entity>
 
           <!-- Floor. -->
-          <a-entity id="floor" geometry="primitive: cylinder; height: .2; radius: 12"
-                    material="src: #floorImg; color: #fafafa; metalness: .2; repeat: 50 20; roughness: .1"></a-entity>
+          <a-entity id="floor" geometry="primitive: cylinder; height: 0.2; radius: 12"
+                    material="src: #floorImg; color: #fafafa; metalness: 0.2; repeat: 50 20; roughness: 0.1"></a-entity>
 
           <!-- Lights. -->
           <a-entity id="pointLight" light="type: point" position="0 3 3"></a-entity>

diff --git a/examples/embedded.html b/examples/embedded.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Inspector Test - Embedded</title>
-    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe/dist/aframe-master.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@master/dist/aframe-master.min.js"></script>
     <style>
       html,
       body {
@@ -35,28 +35,26 @@
         <a-mixin id="purple" material="color: #93648D"></a-mixin>
         <a-mixin id="short" scale="1 0.5 1"></a-mixin>
         <a-mixin id="yellow" material="color: #FFC65D"></a-mixin>
-        <img id="crateImg" src="assets/textures/crate.gif">
-        <img id="floorImg" src="assets/textures/grasslight-big.jpg">
+        <img id="crateImg" src="https://aframe.io/sample-assets/assets/images/wood/crate.gif" crossorigin="anonymous">
+        <img id="floorImg" src="https://aframe.io/sample-assets/assets/images/terrain/grasslight-big.jpg" crossorigin="anonymous">
       </a-assets>
 
       <!-- Meshes. -->
       <a-entity id="aBlueBox" mixin="blueBox" position="0 8 0"></a-entity>
       <a-entity id="shortOrangeBox" mixin="short orange box" position="-5 2 0"></a-entity>
       <a-entity id="shortYellowBox" mixin="short yellow box" position="5 2 0"></a-entity>
-      <a-entity id="redBox" geometry="primitive: box" material="color:#f00" position="-4 1 0">
-        <a-animation attribute="rotation" to="0 360 0" repeat="indefinite" easing="linear" dur="9600"></a-animation>
-      </a-entity>
-      <a-entity id="yellowSphere" geometry="primitive: sphere" material="color:#ff0; metalness:0.0; roughness:1.0" position="-2 2 -2"></a-entity>
-      <a-box src="assets/textures/brick_bump.jpg" position="-5 5 -2" width="1" color="#F16745"></a-box>
+      <a-entity id="redBox" geometry="primitive: box" material="color: #f00" position="-4 1 0" animation="property: object3D.rotation.y; to: 360; loop: true; easing: linear; dur: 9600"></a-entity>
+      <a-entity id="yellowSphere" geometry="primitive: sphere" material="color: #ff0; roughness: 1" position="-2 2 -2"></a-entity>
+      <a-box src="https://aframe.io/sample-assets/assets/images/bricks/brick_bump.jpg" position="-5 5 -2" width="1" color="#F16745"></a-box>
       <a-box id="aBox" position="0 2 0" height="2" color="#FFC65D"></a-box>
 
       <!-- Models. -->
       <a-entity id="crate" geometry="primitive: box" material="src: #crateImg" position="3 4 0"></a-entity>
       <a-entity id="greenBox" geometry="primitive: box" material="color: #0f0" position="4 2 4"></a-entity>
 
       <!-- Floor. -->
-      <a-entity id="floor" geometry="primitive: cylinder; height: .2; radius: 12"
-                material="src: #floorImg; color: #fafafa; metalness: .2; repeat: 50 20; roughness: .1"></a-entity>
+      <a-entity id="floor" geometry="primitive: cylinder; height: 0.2; radius: 12"
+                material="src: #floorImg; color: #fafafa; metalness: 0.2; repeat: 50 20; roughness: 0.1"></a-entity>
 
       <!-- Lights. -->
       <a-entity id="pointLight" light="type: point" position="0 3 3"></a-entity>

diff --git a/examples/empty.html b/examples/empty.html
@@ -3,11 +3,11 @@
   <head>
     <meta charset="utf-8">
     <title>Example Scene</title>
-    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe/dist/aframe-master.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@master/dist/aframe-master.min.js"></script>
   </head>
   <body>
     <a-scene stats>
     </a-scene>
-    <script src="http://localhost:3333/dist/aframe-inspector.js"></script>
+    <script src="../dist/aframe-inspector.js"></script>
   </body>
 </html>
diff --git a/examples/index.html b/examples/index.html
@@ -5,7 +5,7 @@
     <title>Example Scene</title>
     <!--<script>window.AFRAME_SAMPLE_ASSETS_ROOT = "./sample-assets/";</script>-->
     <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@master/dist/aframe-master.min.js"></script>
-    <script src="https://unpkg.com/aframe-environment-component@1.3.7/dist/aframe-environment-component.min.js"></script>
+    <script src="https://unpkg.com/aframe-environment-component@1.4.0/dist/aframe-environment-component.min.js"></script>
   </head>
   <body>
     <a-scene debug="true">
@@ -23,7 +23,7 @@
         <img id="floorImg" src="https://aframe.io/sample-assets/assets/images/terrain/grasslight-big.jpg" crossorigin="true">
       </a-assets>
 
-      <a-entity id="environment" environment="preset: forest"></a-entity>
+      <a-entity id="environment" environment="preset: forest; fog: 0"></a-entity>
 
       <!-- Meshes. -->
       <a-entity id="aBlueBox" mixin="blueBox" position="0 8 0"></a-entity>