Merge pull request #9 from diarmidmackenzie/update-to-1.5

Update to 1.5; some other minor fixes
diarmidmackenzie · Dec 17, 2023 · eb66de6 · eb66de6
2 parents d5c2b81 + f121862
commit eb66de6
Show file tree

Hide file tree

Showing 15 changed files with 61 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 # aframe-multi-camera
 
-https://user-images.githubusercontent.com/16045703/150434386-91181ba5-4162-4e15-a100-bf1576dba8ba.mp4
+<video src="https://user-images.githubusercontent.com/16045703/150434386-91181ba5-4162-4e15-a100-bf1576dba8ba.mp4" controls="controls" style="max-width: 730px;">
+</video>
+
 
 
 ## Overview
@@ -16,23 +18,23 @@ We have the following examples:
 
 #### Multiple Cameras
 
-Multiple cameras and canvases: https://diarmidmackenzie.github.io/aframe-multi-camera/examples/multi-screen.html
+[Multiple cameras and canvases](https://diarmidmackenzie.github.io/aframe-multi-camera/examples/multi-screen.html)
 
-Cursor use across multiple secondary cameras: https://diarmidmackenzie.github.io/aframe-multi-camera/examples/multi-screen-with-cursor.html
+[Cursor use across multiple secondary cameras](https://diarmidmackenzie.github.io/aframe-multi-camera/examples/multi-screen-with-cursor.html)
 
-Multiple camera views embedded in an HTML page without any background full-screen A-Frame scene: https://diarmidmackenzie.github.io/aframe-multi-camera/examples/embedded-views.html
+[Multiple camera views embedded in an HTML page without any background full-screen A-Frame scene](https://diarmidmackenzie.github.io/aframe-multi-camera/examples/embedded-views.html)
 
-Secondary cameras rendering to planes in the scene, to create a CCTV monitor effect: https://diarmidmackenzie.github.io/aframe-multi-camera/examples/camera-texture.html
+[Secondary cameras rendering to planes in the scene, to create a CCTV monitor effect](https://diarmidmackenzie.github.io/aframe-multi-camera/examples/camera-texture.html)
 
-Primary camera rendering to a plane in the scene, to create a CCTV monitor effect: https://diarmidmackenzie.github.io/aframe-multi-camera/examples/monitor-user-view.html
+[Primary camera rendering to a plane in the scene, to create a CCTV monitor effect](https://diarmidmackenzie.github.io/aframe-multi-camera/examples/monitor-user-view.html)
 
-Mirrors rendered to planes in the scene: https://diarmidmackenzie.github.io/aframe-multi-camera/examples/mirror-example.html
+[Mirrors rendered to planes in the scene](https://diarmidmackenzie.github.io/aframe-multi-camera/examples/mirror-example.html)
 
 ### Viewpoint Selector
 
-A basic example of a scene where the central objects can be manipulated using the viewpoint-selector: https://diarmidmackenzie.github.io/aframe-multi-camera/examples/viewpoint-selector-basic.html
+A [basic example](https://diarmidmackenzie.github.io/aframe-multi-camera/examples/viewpoint-selector-basic.html) of a scene where the central objects can be manipulated using the viewpoint-selector: 
 
-A second example, demonstrating various different configuration options for the viewpoint selector.https://diarmidmackenzie.github.io/aframe-multi-camera/examples/viewpoint-selector-alternate.html
+A [second example](https://diarmidmackenzie.github.io/aframe-multi-camera/examples/viewpoint-selector-alternate.html), demonstrating various different configuration options for the viewpoint selector.
 
 
 ## Components

diff --git a/aframe/cursor.js b/aframe/cursor.js
@@ -4,7 +4,7 @@
    https://github.com/aframevr/aframe/blob/25f09c11f84a60f5c078b112154688ccbadf20ff/src/components/cursor.js
 
    Use as follows:
-   <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+   <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="cursor.js"></script>
 */
 

diff --git a/examples/camera-texture.html b/examples/camera-texture.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+      <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
       <script src="../src/multi-camera.js"></script>
   </head>
   <body>

diff --git a/examples/embedded-views.html b/examples/embedded-views.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+      <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
       <script src="../src/multi-camera.js"></script>
       <script src="./mouse-rotate-controls.js"></script>
   </head>

diff --git a/examples/mirror-example.html b/examples/mirror-example.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+      <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
       <script src="../src/mirror.js"></script>
   </head>
   <body>
-    <a-scene stats>
+    <a-scene stats renderer="colorManagement: false">
       <img id="test-texture" src="https://cdn.aframe.io/examples/ui/kazetachinu.jpg" crossorigin="anonymous"/>
       <a-camera position="0 1.6 5"></a-camera>
       <a-entity id="container" position = "0 0 -4">

diff --git a/examples/monitor-user-view.html b/examples/monitor-user-view.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+      <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
       <script src="../src/multi-camera.js"></script>
   </head>
   <body>

diff --git a/examples/multi-screen-with-cursor.html b/examples/multi-screen-with-cursor.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+      <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
       <script src="../aframe/cursor.js"></script>
       <script src="../src/multi-camera.js"></script>
       <script src="./mouse-rotate-controls.js"></script>

diff --git a/examples/multi-screen.html b/examples/multi-screen.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+      <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
       <script src="../src/multi-camera.js"></script>
       <script src="./mouse-rotate-controls.js"></script>
   </head>

diff --git a/examples/viewpoint-selector-alternate.html b/examples/viewpoint-selector-alternate.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+      <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
       <script src="../aframe/cursor.js"></script>
       <script src="../src/multi-camera.js"></script>
       <script src="../src/viewpoint-selector.js"></script>
@@ -37,7 +37,7 @@
         <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
         <a-plane position="0 0 0" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" side="double"></a-plane>
       </a-entity>
-      <a-sky color="#ECEC3EC"></a-sky>
+      <a-sky color="#ECECEC"></a-sky>
     </a-scene>
     <div id="viewpoint-selector-position"
          style="position:absolute; bottom: 60px; right: 60px; width: 200px; height:200px">

diff --git a/examples/viewpoint-selector-basic.html b/examples/viewpoint-selector-basic.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+      <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
       <script src="../aframe/cursor.js"></script>
       <script src="../src/multi-camera.js"></script>
       <script src="../src/viewpoint-selector.js"></script>

diff --git a/src/viewpoint-selector.js b/src/viewpoint-selector.js
@@ -365,9 +365,9 @@ AFRAME.registerComponent('viewpoint-selector', {
 
         angle = this.angles[id];
 
-        this.tempEuler.set(THREE.Math.degToRad(angle.x),
-                           THREE.Math.degToRad(angle.y),
-                           THREE.Math.degToRad(angle.z))
+        this.tempEuler.set(THREE.MathUtils.degToRad(angle.x),
+                           THREE.MathUtils.degToRad(angle.y),
+                           THREE.MathUtils.degToRad(angle.z))
         this.targetQuaternion.setFromEuler(this.tempEuler);
         this.targetQuaternion.multiply(this.selectorToGroupQuaternion);
 

diff --git a/tests/camera-texture-add-remove.html b/tests/camera-texture-add-remove.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+      <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
       <script src="../src/multi-camera.js"></script>
       <script>
         const NUM_CAMERAS = 4;

diff --git a/tests/mirror-color-management.html b/tests/mirror-color-management.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+      <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
+      <script src="../src/mirror.js"></script>
+  </head>
+  <body>
+    <a-scene stats renderer="colorManagement: true">
+      <img id="test-texture" src="https://cdn.aframe.io/examples/ui/kazetachinu.jpg" crossorigin="anonymous"/>
+      <a-camera position="0 1.6 5"></a-camera>
+      <a-entity id="container" position = "0 0 -4">
+        <a-box position="-1 0.5 1" rotation="0 0 0" color="#4CC3D9"
+               animation="property: rotation; to: 0 360 0; loop: true; dur: 3000; easing: linear"></a-box>
+        <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
+        <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"
+                    animation="property: rotation; to: 360 0 0; loop: true; dur: 3000; easing: linear"></a-cylinder>
+        <a-plane position="0 0 0" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" side="double"></a-plane>
+        <a-plane position="0 -0.001 0" rotation="-90 0 0" width="10" height="10" color="#3333DD" side="double"></a-plane>
+        <a-plane id="mirror-plane1" position="0 2 -3" rotation="0 0 0" width="4" height="4"
+                 color="#ECECEC" mirror side="back"></a-plane>
+        <a-plane id="mirror-plane2" position="3 2 0" rotation="0 -90 0" width="4" height="4"
+                  color="#ECECEC" mirror side="back"></a-plane>
+        <a-plane id="mirror-plane3" position="0 5 0" rotation="90 0 0" width="4" height="4"
+                 color="#ECECEC" mirror side="back"></a-plane>
+        <a-plane id="mirror-plane4" position="-3 2 0" rotation="0 90 0" width="4" height="4"
+                 color="#ECECEC" mirror side="back">
+        </a-plane>
+
+      </a-entity>
+      <a-sky color="#ECECEC"></a-sky>
+    </a-scene>
+  </body>
+</html>
diff --git a/tests/multi-screen-with-cursor-add-remove.html b/tests/multi-screen-with-cursor-add-remove.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+      <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
       <script src="../aframe/cursor.js"></script>
       <script src="../src/multi-camera.js"></script>
       <script src="../examples/mouse-rotate-controls.js"></script>

diff --git a/tests/multi-screen-with-cursor-plus-cube-env-map.html b/tests/multi-screen-with-cursor-plus-cube-env-map.html
@@ -5,7 +5,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+      <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
       <script src="../aframe/cursor.js"></script>
       <script src="../src/multi-camera.js"></script>
       <script src="../examples/mouse-rotate-controls.js"></script>