UI Tweaks (#179)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "supersplat",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "author": "PlayCanvas<[email protected]>",
     "homepage": "https://playcanvas.com/supersplat/editor",
     "description": "3D Gaussian Splat Editor",

src/editor.ts

@@ -119,12 +119,19 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
 
     // camera.fov
 
+    const setCameraFov = (fov: number) => {
+        if (fov !== scene.camera.fov) {
+            scene.camera.fov = fov;
+            events.fire('camera.fov', scene.camera.fov);
+        }
+    };
+
     events.function('camera.fov', () => {
         return scene.camera.fov;
     });
 
     events.on('camera.setFov', (fov: number) => {
-        scene.camera.fov = fov;
+        setCameraFov(fov);
     });
 
     // camera.bound
@@ -524,7 +531,7 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
 
     // camera debug
 
-    let cameraDebug = true;
+    let cameraDebug = scene.config.camera.debug;
 
     const setCameraDebug = (enabled: boolean) => {
         if (enabled !== cameraDebug) {
@@ -582,6 +589,10 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
     events.on('view.setBands', (value: number) => {
         setViewBands(value);
     });
+
+    // hack: fire events to initialize UI
+    events.fire('camera.fov', scene.camera.fov);
+    events.fire('camera.debug', cameraDebug);
 }
 
 export { registerEditorEvents };

src/scene-config.ts

@@ -24,7 +24,8 @@ const sceneConfig = {
         fov: 50,
         exposure: 1.0,
         toneMapping: 'linear',
-        debug_render: ''
+        debug_render: '',
+        debug: true
     },
     shadow: {
         intensity: 0.25,

src/ui/scene-panel.scss

@@ -3,3 +3,9 @@
     left: 24px;
     width: 320px;
 }
+
+@media (max-width: 600px) {
+    #scene-panel {
+        display: none;
+    }
+}