Update app.py

app.py

@@ -11,8 +11,11 @@ def load_aframe_and_extras():
     let score = 0;
     let selectedEntity = null;
     let velocity = {x: 0, y: 0, z: 0};
+    let rotVelocity = {x: 0, y: 0, z: 0};
     let maxSpeed = 0.5;
     let accel = 0.02;
+    let maxRotSpeed = 2;
+    let rotAccel = 0.1;
 
     AFRAME.registerComponent('draggable', {
       init: function () {
@@ -112,63 +115,75 @@ def load_aframe_and_extras():
 
     function flyCamera(action) {
       var rig = document.querySelector('#rig');
-      var rot = rig.getAttribute('rotation');
-      var rSpeed = 2;
+      var pos = rig.getAttribute('position');
 
       switch(action) {
         case 'moveLeft':
-          velocity.x = Math.max(velocity.x - accel, -maxSpeed);
+          var leftDir = new THREE.Vector3(-1, 0, 0);
+          leftDir.applyQuaternion(rig.object3D.quaternion);
+          pos.x += leftDir.x * 0.1;
+          pos.y += leftDir.y * 0.1;
+          pos.z += leftDir.z * 0.1;
           break;
         case 'moveRight':
-          velocity.x = Math.min(velocity.x + accel, maxSpeed);
+          var rightDir = new THREE.Vector3(1, 0, 0);
+          rightDir.applyQuaternion(rig.object3D.quaternion);
+          pos.x += rightDir.x * 0.1;
+          pos.y += rightDir.y * 0.1;
+          pos.z += rightDir.z * 0.1;
           break;
-        case 'moveUp':
-          velocity.y = Math.min(velocity.y + accel, maxSpeed);
+        case 'rotateCCW':
+          rotVelocity.y = Math.min(rotVelocity.y + rotAccel, maxRotSpeed);
           break;
-        case 'moveDown':
-          velocity.y = Math.max(velocity.y - accel, -maxSpeed);
+        case 'rotateCW':
+          rotVelocity.y = Math.max(rotVelocity.y - rotAccel, -maxRotSpeed);
           break;
-        case 'panLeft':
-          rot.y += rSpeed;
+        case 'rollCCW':
+          rotVelocity.z = Math.min(rotVelocity.z + rotAccel, maxRotSpeed);
           break;
-        case 'panRight':
-          rot.y -= rSpeed;
+        case 'rollCW':
+          rotVelocity.z = Math.max(rotVelocity.z - rotAccel, -maxRotSpeed);
           break;
         case 'forward':
           var cam = document.querySelector('[camera]');
           var dir = new THREE.Vector3();
           cam.object3D.getWorldDirection(dir);
-          var pos = rig.getAttribute('position');
           pos.x += dir.x * 0.1;
           pos.y += dir.y * 0.1;
           pos.z += dir.z * 0.1;
-          rig.setAttribute('position', pos);
           break;
         case 'backward':
           var cam = document.querySelector('[camera]');
           var dir = new THREE.Vector3();
           cam.object3D.getWorldDirection(dir);
-          var pos = rig.getAttribute('position');
           pos.x -= dir.x * 0.1;
           pos.y -= dir.y * 0.1;
           pos.z -= dir.z * 0.1;
-          rig.setAttribute('position', pos);
           break;
         case 'stop':
           velocity = {x: 0, y: 0, z: 0};
+          rotVelocity = {x: 0, y: 0, z: 0};
           moveCamera('center');
           break;
       }
-      rig.setAttribute('rotation', rot);
+      rig.setAttribute('position', pos);
     }
 
     function updateCameraPosition() {
       var rig = document.querySelector('#rig');
       var pos = rig.getAttribute('position');
+      var rot = rig.getAttribute('rotation');
+
       pos.x += velocity.x;
-      pos.y = Math.max(1, pos.y + velocity.y); // Prevent camera from going below y=1
+      pos.y = Math.max(1, pos.y + velocity.y);
       pos.z += velocity.z;
+
+      rot.x += rotVelocity.x;
+      rot.y += rotVelocity.y;
+      rot.z += rotVelocity.z;
+
       rig.setAttribute('position', pos);
+      rig.setAttribute('rotation', rot);
       requestAnimationFrame(updateCameraPosition);
     }
 
@@ -202,12 +217,12 @@ def load_aframe_and_extras():
         case '7': moveCamera('angle2'); break;
         case '8': moveCamera('angle3'); break;
         case '9': moveCamera('angle4'); break;
-        case 'q': flyCamera('moveLeft');  break;
-        case 'e': flyCamera('moveRight'); break;
-        case 'z': flyCamera('moveUp');    break;
-        case 'c': flyCamera('moveDown');  break;
-        case 'a': flyCamera('panLeft');   break;
-        case 'd': flyCamera('panRight');  break;
+        case 'q': flyCamera('rotateCCW'); break;
+        case 'e': flyCamera('rotateCW');  break;
+        case 'z': flyCamera('rollCCW');   break;
+        case 'c': flyCamera('rollCW');    break;
+        case 'a': flyCamera('moveLeft');  break;
+        case 'd': flyCamera('moveRight'); break;
         case 'w': flyCamera('forward');   break;
         case 'x': flyCamera('backward');  break;
         case 's': flyCamera('stop');      break;