Terrance/camera controls (#748)

* adding keyboard camera control instructions to viewer

* adding orbit / fps controls

* adding button to toggle first person cams and orbit cam, spacebar resets view dir and position now

* renaming button

* getting started element now scrolls, adding instructions for camera controls

* fixed first person bug, removed orbit controls

* fixing style

* fixed mouse controls w viewer

* adjust rotate speed

Co-authored-by: Matthew Tancik <tancik@berkeley.edu>

nerfstudio/viewer/app/src/index.scss

@@ -174,6 +174,8 @@ $sidebar-width: 100% !default;
   border: 2px solid #000;
   //   box-shadow: 24px 24px;
   padding: 32px;
+  overflow-y: scroll;
+  height: 90%;
 }
 
 .LandingModal-box .WebSocketUrlField {

nerfstudio/viewer/app/src/modules/LandingModal/LandingModal.jsx

@@ -175,21 +175,15 @@ export default function LandingModel(props: LandingModalProps) {
                 </p>
               </TabPanel>
               <h3>Camera Keyboard Controls</h3>
-              <p>
-                <div>
-                  WASD - horizontal camera translation, QE - vertical camera
-                  translation
-                </div>
-                <div>Arrow Keys - camera rotation</div>
-                <div>
-                  Spacebar - reset camera orbit point and view direction to
-                  origin
-                </div>
-              </p>
+              <div>
+                Spacebar - reset camera to starting position <br />
+                WS - forward camera translation, AD - side to side camera translation <br />
+                QE - up and down camera translation, Arrow Keys - camera rotation
+              </div>
             </div>
           </Typography>
         </Box>
       </Modal>
-    </div>
+    </div >
   );
 }

nerfstudio/viewer/app/src/modules/Scene/Scene.jsx

@@ -29,9 +29,8 @@ export function get_scene_tree() {
 
   // Main camera
   const main_camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
-  main_camera.position.x = 0.7;
-  main_camera.position.y = -0.7;
-  main_camera.position.z = 0.3;
+  const start_position = new THREE.Vector3(0.7, -0.7, 0.3);
+  main_camera.position.set(start_position.x, start_position.y, start_position.z);
   main_camera.up = new THREE.Vector3(0, 0, 1);
   sceneTree.set_object_from_path(['Cameras', 'Main Camera'], main_camera);
 
@@ -68,28 +67,38 @@ export function get_scene_tree() {
   const camera_controls = new CameraControls(main_camera, renderer.domElement);
   camera_controls.azimuthRotateSpeed = 0.3;
   camera_controls.polarRotateSpeed = 0.3;
-  camera_controls.minDistance = 0.3;
-  camera_controls.maxDistance = 20;
-
-  camera_controls.dollySpeed = 0.1;
+  camera_controls.dollySpeed = 1.8;
+  camera_controls.infinityDolly = true;
   camera_controls.saveState();
 
   const keyMap = [];
   const moveSpeed = 0.02;
+  const rotSpeed = .015;
+  const EPS = .01;
 
-  function moveCamera() {
-    if (keyMap.ArrowLeft === true) {
-      camera_controls.rotate(-0.02, 0, true);
-    }
-    if (keyMap.ArrowRight === true) {
-      camera_controls.rotate(0.02, 0, true);
-    }
-    if (keyMap.ArrowUp === true) {
-      camera_controls.rotate(0, -0.01, true);
-    }
-    if (keyMap.ArrowDown === true) {
-      camera_controls.rotate(0, 0.01, true);
+  function rotate() {
+    if (keyMap.ArrowLeft || keyMap.ArrowRight || keyMap.ArrowUp || keyMap.ArrowDown){ 
+      const curTar = camera_controls.getTarget();
+      const curPos = camera_controls.getPosition();
+      const diff = curTar.sub(curPos).clampLength(0, EPS);
+      camera_controls.setTarget(curPos.x + diff.x, curPos.y + diff.y, curPos.z + diff.z);
+  
+      if (keyMap.ArrowLeft === true) {
+        camera_controls.rotate(rotSpeed, 0, true);
+      }
+      if (keyMap.ArrowRight === true) {
+        camera_controls.rotate(-rotSpeed, 0, true);
+      }
+      if (keyMap.ArrowUp === true) {
+        camera_controls.rotate(0, rotSpeed / 1.5, true);
+      }
+      if (keyMap.ArrowDown === true) {
+        camera_controls.rotate(0, -rotSpeed / 1.5, true);
+      }
     }
+  }
+
+  function translate() {
     if (keyMap.KeyD === true) {
       camera_controls.truck(moveSpeed, 0, true);
     }
@@ -97,10 +106,14 @@ export function get_scene_tree() {
       camera_controls.truck(-moveSpeed, 0, true);
     }
     if (keyMap.KeyW === true) {
-      camera_controls.forward(moveSpeed, true);
+      const curPos = camera_controls.getPosition();
+      const newTar = camera_controls.getTarget();
+      const newDiff = newTar.sub(curPos).normalize().multiplyScalar(curPos.length());
+      camera_controls.setTarget(curPos.x + newDiff.x, curPos.y + newDiff.y, curPos.z + newDiff.z);
+      camera_controls.dolly(moveSpeed, true);
     }
     if (keyMap.KeyS === true) {
-      camera_controls.forward(-moveSpeed, true);
+      camera_controls.dolly(-moveSpeed, true);
     }
     if (keyMap.KeyQ === true) {
       camera_controls.truck(0, moveSpeed, true);
@@ -110,6 +123,11 @@ export function get_scene_tree() {
     }
   }
 
+  function moveCamera() {
+    translate()
+    rotate()
+  }
+
   function onKeyUp(event) {
     const keyCode = event.code;
     keyMap[keyCode] = false;
@@ -240,6 +258,10 @@ export function get_scene_tree() {
   let drag = false;
   const onMouseDown = () => {
     drag = false;
+    const curPos = camera_controls.getPosition();
+    const newTar = camera_controls.getTarget();
+    const newDiff = newTar.sub(curPos).normalize().multiplyScalar(curPos.length());
+    camera_controls.setTarget(curPos.x + newDiff.x, curPos.y + newDiff.y, curPos.z + newDiff.z);
   };
 
   const onMouseMove = (e) => {