Various fixes in example (#5424)

* Update usages of vr-mode-ui to the new xr-mode-ui * Omit crossorigin attribute on a-asset-item tags as it has no effect * Fix small mistakes in mixed-reality examples * Update environment-component to 1.3.4 in examples --------- Co-authored-by: Noeri Huisman <[email protected]>
aframevr · Jan 7, 2024 · be8592e · be8592e
1 parent 69e5d00
commit be8592e
Show file tree

Hide file tree

Showing 20 changed files with 27 additions and 30 deletions.
diff --git a/examples/animation/aframe-logo/index.html b/examples/animation/aframe-logo/index.html
@@ -8,7 +8,7 @@
     <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
   </head>
   <body>
-    <a-scene vr-mode-ui="enabled: false;"
+    <a-scene xr-mode-ui="enabled: false;"
              background="color: #24CAFF;"
              renderer="colorManagement: true;">
       <a-assets>

diff --git a/examples/boilerplate/ar-hello-world/index.html b/examples/boilerplate/ar-hello-world/index.html
@@ -24,7 +24,7 @@
       ar-hit-test="target:#objects;"
       renderer="physicallyCorrectLights:true;colorManagement:true;exposure:1;toneMapping:ACESFilmic;"
       shadow="type:pcfsoft"
-      vr-mode-ui="enterAREnabled: true"
+      xr-mode-ui="XRMode: xr"
     >
       <a-light type="directional" light="castShadow:true;" position="1 1 1" intensity="0.5" shadow-camera-automatic="#objects"></a-light>
       <a-camera position="0 0.4 0" wasd-controls="acceleration:10;"></a-camera>

diff --git a/examples/boilerplate/webxr-ar-lighting/index.html b/examples/boilerplate/webxr-ar-lighting/index.html
@@ -1,10 +1,9 @@
 <html>
 
 <head>
-	<script src="../../../build/aframe.js"></script>
-	<!-- <script src="../../../dist/aframe-master.js"></script> -->
+	<script src="../../../dist/aframe-master.js"></script>
 	<script src="ar-shadow-helper.js"></script>
-	<script src="https://unpkg.com/[email protected].1/dist/aframe-environment-component.min.js"></script>
+	<script src="https://unpkg.com/[email protected].4/dist/aframe-environment-component.min.js"></script>
 	<title>AFRame Total WebXR AR Demo</title>
 	<style>
 		body {
@@ -20,7 +19,7 @@
 		reflection="directionalLight:#dirlight;"
 		ar-hit-test="target:#table;"
 		shadow="type: pcfsoft"
-		vr-mode-ui="enterAREnabled: true">
+		xr-mode-ui="XRMode: xr">
 		<a-assets>
 			<!-- model by Snooze https://sketchfab.com/3d-models/low-poly-table-b940256ec5994e26a9e71289d1211b19 -->
 			<a-asset-item id="table-glb" src="../../assets/models/table.glb"></a-asset-item>

diff --git a/examples/boilerplate/webxr-dom-overlay/index.html b/examples/boilerplate/webxr-dom-overlay/index.html
@@ -51,7 +51,7 @@
     </div>
     <a-scene background="color: #ECECEC"
              webxr="optionalFeatures: dom-overlay; overlayElement: #overlay"
-             vr-mode-ui="enterAREnabled: true">
+             xr-mode-ui="XRMode: xr">
       <a-entity exit-ar-button="element: #exit-ar"></a-entity>
       <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
       <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>

diff --git a/examples/mixed-reality/anchor/index.html b/examples/mixed-reality/anchor/index.html
@@ -6,7 +6,6 @@
     <meta name="description" content="Anchor (Mixed Reality) • A-Frame">
     <script src="../../../dist/aframe-master.js"></script>
     <script src="../../js/info-message.js"></script>
-    <script src="https://unpkg.com/[email protected]/dist/aframe-environment-component.min.js"></script>
     <script src="anchor-grabbed-entity.js"></script>
     <script src="painting-changer.js"></script>
     <script src="painting.js"></script>
@@ -22,7 +21,7 @@
         <!-- Model by theGentleGiant https://sketchfab.com/3d-models/vintage-painting-dani-3fdd92904c2b44028bef28b33e897d9f -->
         <a-asset-item id="frame"
           src="https://cdn.aframe.io/examples/mixed-reality/anchor/models/painting/scene.gltf"
-          response-type="arraybuffer" crossorigin="anonymous"></a-asset-item>
+          response-type="arraybuffer"></a-asset-item>
         <a-asset-item id="messageText" src="message.html"></a-asset-item>
         <img id="helloaframe" src="https://cdn.aframe.io/examples/mixed-reality/anchor/images/helloaframe.png" crossorigin="anonymous"/>
         <img id="greco" src="https://cdn.aframe.io/examples/mixed-reality/anchor/images/greco.png" crossorigin="anonymous"/>

diff --git a/examples/mixed-reality/real-world-meshing/index.html b/examples/mixed-reality/real-world-meshing/index.html
@@ -12,7 +12,7 @@
     </head>
   <body>
     <a-scene
-      real-world-meshing="filter: table; meshesEnabled: false; planeMixin: xrplane"
+      real-world-meshing="filterLabels: table; meshesEnabled: false; planeMixin: xrplane"
       obb-collider="showColliders: false"
       renderer="colorManagement: true;"
       xr-mode-ui="XRMode: ar"
@@ -24,7 +24,7 @@
           * author: Rosnandie Yikie (https://sketchfab.com/rosnandie.yikie) -->
         <a-asset-item id="coffee"
           src="https://cdn.aframe.io/examples/mixed-reality/real-world-meshing/models/coffee.glb"
-          response-type="arraybuffer" crossorigin="anonymous"></a-asset-item>
+          response-type="arraybuffer"></a-asset-item>
         <a-asset-item id="messageText" src="message.html"></a-asset-item>
         <a-mixin
           id="xrplane"

diff --git a/examples/mixed-reality/watch/index.html b/examples/mixed-reality/watch/index.html
@@ -6,7 +6,7 @@
     <meta name="description" content="Hand Menu (Mixed Reality) • A-Frame">
     <script src="../../../dist/aframe-master.js"></script>
     <script src="../../js/info-message.js"></script>
-    <script src="https://unpkg.com/[email protected].0/dist/aframe-environment-component.min.js"></script>
+    <script src="https://unpkg.com/[email protected].4/dist/aframe-environment-component.min.js"></script>
     <script src="time.js"></script>
     <script src="button.js"></script>
     <script src="hand-menu.js"></script>
@@ -25,7 +25,7 @@
         <!-- Model by Socksthecat https://sketchfab.com/3d-models/character-accessory-watch-d2a883db37184592b5ea0ce4cbd2a286 -->
         <a-asset-item id="watch"
           src="https://cdn.aframe.io/examples/mixed-reality/watch/models/watch.glb"
-          response-type="arraybuffer" crossorigin="anonymous"></a-asset-item>
+          response-type="arraybuffer"></a-asset-item>
         <a-asset-item id="messageText" src="message.html"></a-asset-item>
         <img crossorigin="anonymous" id="infoButton" src="https://cdn.aframe.io/examples/mixed-reality/watch/images/info-button.png" />
         <img crossorigin="anonymous" id="infoButtonHover" src="https://cdn.aframe.io/examples/mixed-reality/watch/images/info-button-hover.png" />
@@ -78,7 +78,7 @@
         hide-on-enter-ar
         rotation="90 0 0"
         position="0 0 0"
-        geometry="primitive: plane; width: 100; height: 100; segmentsHeight: 2, segmentsWidth: 2;"
+        geometry="primitive: plane; width: 100; height: 100; segmentsHeight: 2; segmentsWidth: 2;"
         material="shader: grid; transparent: true; side: double;">
       </a-entity>
       <!-- Only renders in 2D. An empty scene when the page loads not very interesting -->

diff --git a/examples/showcase/anime-UI/index.html b/examples/showcase/anime-UI/index.html
@@ -8,7 +8,7 @@
     <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
   </head>
   <body>
-    <a-scene renderer="colorManagement: true;" vr-mode-ui="enterAREnabled: true">
+    <a-scene renderer="colorManagement: true;" xr-mode-ui="XRMode: xr">
       <a-assets>
         <a-asset-item id="engine" src="models/engine.glb"></a-asset-item>
         <a-mixin id="image" geometry="height: 2; width: 2"></a-mixin>

diff --git a/examples/showcase/hand-tracking-grab-controls/index.html b/examples/showcase/hand-tracking-grab-controls/index.html
@@ -9,7 +9,7 @@
     <script src="../../js/spatial-ui/spatial-modal.js"></script>
     <script src="../../js/spatial-ui/spatial-hero-image.js"></script>
     <script src="../../js/info-message.js"></script>
-    <script src="https://unpkg.com/[email protected].0/dist/aframe-environment-component.min.js"></script>
+    <script src="https://unpkg.com/[email protected].4/dist/aframe-environment-component.min.js"></script>
     <script src="hover.js"></script>
   </head>
   <body>

diff --git a/examples/showcase/hand-tracking/index.html b/examples/showcase/hand-tracking/index.html
@@ -6,7 +6,7 @@
     <meta name="description" content="Hand Tracking! • A-Frame">
     <script src="../../../dist/aframe-master.js"></script>
     <script src="../../js/info-message.js"></script>
-    <script src="https://unpkg.com/[email protected].0/dist/aframe-environment-component.min.js"></script>
+    <script src="https://unpkg.com/[email protected].4/dist/aframe-environment-component.min.js"></script>
     <script src="pinchable.js"></script>
     <script src="color-change.js"></script>
     <script src="slider.js"></script>

diff --git a/examples/showcase/link-traversal/egypt.html b/examples/showcase/link-traversal/egypt.html
@@ -8,7 +8,7 @@
     <script src="js/components/aframe-tooltip-component.js"></script>
     <script src="js/components/camera-position.js"></script>
     <script src="js/components/link-controls.js"></script>
-    <script src="https://unpkg.com/[email protected].2/dist/aframe-environment-component.min.js"></script>
+    <script src="https://unpkg.com/[email protected].4/dist/aframe-environment-component.min.js"></script>
     <script src="../../js/info-message.js"></script>
   </head>
   <body>

diff --git a/examples/showcase/link-traversal/forest.html b/examples/showcase/link-traversal/forest.html
@@ -8,7 +8,7 @@
     <script src="js/components/aframe-tooltip-component.js"></script>
     <script src="js/components/camera-position.js"></script>
     <script src="js/components/link-controls.js"></script>
-    <script src="https://unpkg.com/[email protected].2/dist/aframe-environment-component.min.js"></script>
+    <script src="https://unpkg.com/[email protected].4/dist/aframe-environment-component.min.js"></script>
     <script src="../../js/info-message.js"></script>
   </head>
   <body>

diff --git a/examples/showcase/link-traversal/index.html b/examples/showcase/link-traversal/index.html
@@ -8,7 +8,7 @@
     <script src="js/components/aframe-tooltip-component.js"></script>
     <script src="js/components/camera-position.js"></script>
     <script src="js/components/link-controls.js"></script>
-    <script src="https://unpkg.com/[email protected].2/dist/aframe-environment-component.min.js"></script>
+    <script src="https://unpkg.com/[email protected].4/dist/aframe-environment-component.min.js"></script>
     <script src="../../js/info-message.js"></script>
   </head>
   <body>
@@ -19,7 +19,6 @@
       environment
       info-message="htmlSrc: #messageText">
       <a-assets>
-        <a-asset-item id="messageText" src="message.html"></a-asset-item>
        <img id="thumbJapan" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/japan.png">
        <img id="thumbEgypt" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/egypt.png">
        <img id="thumbForest" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/forest.png">

diff --git a/examples/showcase/link-traversal/japan.html b/examples/showcase/link-traversal/japan.html
@@ -8,7 +8,7 @@
     <script src="js/components/aframe-tooltip-component.js"></script>
     <script src="js/components/camera-position.js"></script>
     <script src="js/components/link-controls.js"></script>
-    <script src="https://unpkg.com/[email protected].2/dist/aframe-environment-component.min.js"></script>
+    <script src="https://unpkg.com/[email protected].4/dist/aframe-environment-component.min.js"></script>
     <script src="../../js/info-message.js"></script>
   </head>
   <body>

diff --git a/examples/showcase/model-viewer/index.html b/examples/showcase/model-viewer/index.html
@@ -17,7 +17,7 @@
   renderer="colorManagement: true;"
   info-message="htmlSrc: #messageText"
   model-viewer="gltfModel: #triceratops; title: Triceratops"
-  vr-mode-ui="enterAREnabled: true">
+  xr-mode-ui="XRMode: xr">
   <a-assets timeout="10000">
     <!--
       Model source: https://sketchfab.com/3d-models/triceratops-d16aabe33dc24f8ab37e3df50c068265
@@ -26,7 +26,7 @@
     -->
     <a-asset-item id="triceratops"
       src="https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf"
-      response-type="arraybuffer" crossorigin="anonymous"></a-asset-item>
+      response-type="arraybuffer"></a-asset-item>
 
     <img id="shadow" src="shadow.png"></img>
     <a-asset-item id="messageText" src="message.html"></a-asset-item>

diff --git a/examples/showcase/spatial-ui/index.html b/examples/showcase/spatial-ui/index.html
@@ -38,7 +38,7 @@
         <a-entity spatial-modal="width: 1.2; height: 0.72" visible="false">
           <a-entity spatial-modal-image="width: 0.6; height: 0.72" position="-0.3 0 0.001"></a-entity>
           <a-entity spatial-close-button="" position="0.55 0.31 0.001" class="close-button"></a-entity>
-          <a-text font="kelsonsans" class="movie-title" value="Hayao Miyazaki" align="left" width="0.75"position="0.03 0.2 0.001"></a-text>
+          <a-text font="kelsonsans" class="movie-title" value="Hayao Miyazaki" align="left" width="0.75" position="0.03 0.2 0.001"></a-text>
           <a-text font="kelsonsans" height="1" class="movie-synopsis" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." align="left" width="0.5" position="0.03 0.08 0.001"></a-text>
         </a-entity>
 
@@ -55,7 +55,7 @@
               title="The Secret World of Arrietty (2010)"
               synopsis="Arrietty, a tiny teenager, lives with her parents in the recesses of a suburban home, unbeknown to the homeowner and housekeeper. Like others of her kind, Arrietty remains hidden from her human hosts."
               tile="src: https://cdn.aframe.io/examples/ui/karigurashi.jpg"
-              position="-0.6435 0.318 0.01" opacity="0.5"></a-entity>
+              position="-0.6435 0.318 0.01"></a-entity>
             <a-entity
               mixin="tile"
               title="Ponyo (2008)"

diff --git a/examples/showcase/ui/index.html b/examples/showcase/ui/index.html
@@ -5,7 +5,7 @@
     <title>Laser input UI</title>
     <meta name="description" content="Laser input UI • A-Frame">
     <script src="../../../dist/aframe-master.js"></script>
-    <script src="https://unpkg.com/[email protected].0/dist/aframe-environment-component.min.js"></script>
+    <script src="https://unpkg.com/[email protected].4/dist/aframe-environment-component.min.js"></script>
     <script src="../../js/info-message.js"></script>
     <script src="highlight.js"></script>
     <script src="info-panel.js"></script>

diff --git a/examples/test/layer/index.html b/examples/test/layer/index.html
@@ -5,7 +5,7 @@
     <title>Compositor Layer Example • A-Frame</title>
     <meta name="description" content="Hello, World! • A-Frame">
     <script src="../../../dist/aframe-master.js"></script>
-    <script src="https://unpkg.com/[email protected].0/dist/aframe-environment-component.min.js"></script>
+    <script src="https://unpkg.com/[email protected].4/dist/aframe-environment-component.min.js"></script>
     <script src="page-turn.js"></script>
     <script src="toggle-layer.js"></script>
     <script src="button.js"></script>

diff --git a/examples/test/text/anchors.html b/examples/test/text/anchors.html
@@ -5,7 +5,7 @@
     <script src="../../../dist/aframe-master.js"></script>
   </head>
   <body>
-    <a-scene background="color: #222" auto-enter-vr="display:all">
+    <a-scene background="color: #222">
       <a-assets>
         <a-mixin
           id="marker"

diff --git a/examples/test/text/scenarios.html b/examples/test/text/scenarios.html
@@ -69,7 +69,7 @@
       </a-box>
 
       <!-- Label a plane, three times. -->
-      <a-plane rotation="-90 0 0" width="1" depth="1" position="0 1 -1"
+      <a-plane rotation="-90 0 0" width="1" height="1" position="0 1 -1"
                text="baseline: bottom; font: kelsonsans; color: black; value:
                      kelsonsans font
                      align default (left)