Add Field of View slider to view options (#176)

* add Field of View slider to view options * Incorporates upstream camera changes and updates FOV slider accordingly * Apply whitespace suggestions from code review
playcanvas · Aug 28, 2024 · be26e60 · be26e60
1 parent 65e77fc
commit be26e60
Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/src/editor.ts b/src/editor.ts
@@ -117,6 +117,16 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
         setGridVisible(!scene.grid.visible);
     });
 
+    // camera.fov
+
+    events.function('camera.fov', () => {
+        return scene.camera.fov;
+    });
+
+    events.on('camera.setFov', (fov: number) => {
+        scene.camera.fov = fov;
+    });
+
     // camera.bound
 
     let bound = true;

diff --git a/src/ui/view-panel.ts b/src/ui/view-panel.ts
@@ -36,6 +36,28 @@ class ViewPanel extends Container {
         header.append(icon);
         header.append(label);
 
+        // camera fov
+
+        const fovRow = new Container({
+            class: 'view-panel-row'
+        });
+
+        const fovLabel = new Label({
+            text: 'Field of View',
+            class: 'view-panel-row-label'
+        });
+
+        const fovSlider = new SliderInput({
+            class: 'view-panel-row-slider',
+            min: 10,
+            max: 120,
+            precision: 1,
+            value: 60
+        });
+
+        fovRow.append(fovLabel);
+        fovRow.append(fovSlider);
+
         // sh bands
         const shBandsRow = new Container({
             class: 'view-panel-row'
@@ -120,6 +142,7 @@ class ViewPanel extends Container {
         showBoundRow.append(showBoundToggle);
 
         this.append(header);
+        this.append(fovRow);
         this.append(shBandsRow);
         this.append(centersSizeRow);
         this.append(showGridRow);
@@ -187,6 +210,16 @@ class ViewPanel extends Container {
         showBoundToggle.on('change', () => {
             events.fire('camera.setBound', showBoundToggle.value);
         });
+
+        // camera fov
+
+        events.on('camera.fov', (fov: number) => {
+            fovSlider.value = fov;
+        });
+
+        fovSlider.on('change', (value: number) => {
+            events.fire('camera.setFov', value);
+        });
     }
 }