Background settings is visible with orthographic camera, but it doesn't work #306

source/website/sidebar.js

@@ -48,6 +48,9 @@ export class Sidebar
             getShadingType : () => {
                 return this.callbacks.getShadingType ();
             },
+            getCameraMode : () => {
+                return this.callbacks.getCameraMode ();
+            },
             hasDefaultMaterial : () => {
                 return this.callbacks.hasDefaultMaterial ();
             },
@@ -73,9 +76,9 @@ export class Sidebar
         });
     }
 
-    Update ()
+    UpdateControlsVisibility ()
     {
-        this.settingsPanel.Update ();
+        this.settingsPanel.UpdateControlsVisibility ();
     }
 
     Resize (height)

source/website/sidebarsettingspanel.js

@@ -6,6 +6,7 @@ import { PopupDialog } from './dialog.js';
 import { Settings, Theme } from './settings.js';
 import { SidebarPanel } from './sidebarpanel.js';
 import { ShadingType } from '../engine/threejs/threeutils.js';
+import { CameraMode } from '../engine/viewer/viewer.js';
 
 function AddColorPicker (parentDiv, opacity, defaultColor, predefinedColors, onChange)
 {
@@ -117,11 +118,14 @@ class EnvironmentMapPopup extends PopupDialog
                 });
             }
         } else if (shadingType === ShadingType.Physical) {
-            let checkboxDiv = AddDiv (contentDiv, 'ov_environment_map_checkbox');
+            let isPerspective = (callbacks.getCameraMode () === CameraMode.Perspective);
-            let backgroundIsEnvMapCheckbox = AddCheckbox (checkboxDiv, 'use_as_background', 'Use as background image', settings.backgroundIsEnvMap, () => {
+            if (isPerspective) {
-                settings.backgroundIsEnvMap = backgroundIsEnvMapCheckbox.checked;
+                let checkboxDiv = AddDiv (contentDiv, 'ov_environment_map_checkbox');
-                callbacks.onEnvironmentMapChanged ();
+                let backgroundIsEnvMapCheckbox = AddCheckbox (checkboxDiv, 'use_as_background', 'Use as background image', settings.backgroundIsEnvMap, () => {
-            });
+                    settings.backgroundIsEnvMap = backgroundIsEnvMapCheckbox.checked;
+                    callbacks.onEnvironmentMapChanged ();
+                });
+            }
 
             for (let envMapImage of envMapImages) {
                 envMapImage.element = AddDomElement (contentDiv, 'img', 'ov_environment_map_preview');
@@ -143,6 +147,11 @@ class EnvironmentMapPopup extends PopupDialog
         contentDiv.classList.add ('sidebar');
         this.Open ();
     }
+
+    Update ()
+    {
+
+    }
 }
 
 class SettingsSection
@@ -166,6 +175,11 @@ class SettingsSection
 
     }
 
+    UpdateVisibility ()
+    {
+
+    }
+
     Clear ()
     {
 
@@ -215,6 +229,9 @@ class SettingsModelDisplaySection extends SettingsSection
         this.environmentMapPhongInput.addEventListener ('click', () => {
             this.environmentMapPopup = new EnvironmentMapPopup ();
             this.environmentMapPopup.ShowPopup (this.environmentMapPhongInput, ShadingType.Phong, this.settings, {
+                getCameraMode : () => {
+                    return this.callbacks.getCameraMode ();
+                },
                 onEnvironmentMapChanged : () => {
                     this.UpdateEnvironmentMap ();
                     this.callbacks.onEnvironmentMapChanged ();
@@ -228,6 +245,9 @@ class SettingsModelDisplaySection extends SettingsSection
         this.environmentMapPbrInput.addEventListener ('click', () => {
             this.environmentMapPopup = new EnvironmentMapPopup ();
             this.environmentMapPopup.ShowPopup (this.environmentMapPbrInput, ShadingType.Physical, this.settings, {
+                getCameraMode : () => {
+                    return this.callbacks.getCameraMode ();
+                },
                 onEnvironmentMapChanged : () => {
                     this.UpdateEnvironmentMap ();
                     this.callbacks.onEnvironmentMapChanged ();
@@ -308,14 +328,6 @@ class SettingsModelDisplaySection extends SettingsSection
             this.UpdateEnvironmentMap ();
         }
 
-        let isPhysicallyBased = (this.callbacks.getShadingType () === ShadingType.Physical);
-        if (this.environmentMapPhongDiv !== null) {
-           ShowDomElement (this.environmentMapPhongDiv, !isPhysicallyBased);
-        }
-        if (this.environmentMapPbrDiv !== null) {
-           ShowDomElement (this.environmentMapPbrDiv, isPhysicallyBased);
-        }
-
         if (this.edgeDisplayToggle !== null) {
             this.edgeDisplayToggle.SetStatus (this.settings.showEdges);
             ShowDomElement (this.edgeSettingsDiv, this.settings.showEdges);
@@ -326,6 +338,18 @@ class SettingsModelDisplaySection extends SettingsSection
         }
     }
 
+    UpdateVisibility ()
+    {
+        let isPhysicallyBased = (this.callbacks.getShadingType () === ShadingType.Physical);
+        if (this.environmentMapPhongDiv !== null) {
+            let isPerspective = (this.callbacks.getCameraMode () === CameraMode.Perspective);
+            ShowDomElement (this.environmentMapPhongDiv, !isPhysicallyBased && isPerspective);
+        }
+        if (this.environmentMapPbrDiv !== null) {
+           ShowDomElement (this.environmentMapPbrDiv, isPhysicallyBased);
+        }
+    }
+
     Clear ()
     {
         if (this.environmentMapPopup !== null) {
@@ -371,6 +395,10 @@ class SettingsImportParametersSection extends SettingsSection
         if (this.defaultColorPicker !== null) {
             this.defaultColorPicker.setColor ('#' + RGBColorToHexString (this.settings.defaultColor));
         }
+    }
+
+    UpdateVisibility ()
+    {
         if (this.contentDiv !== null) {
             let hasDefaultMaterial = this.callbacks.hasDefaultMaterial ();
             ShowDomElement (this.contentDiv, hasDefaultMaterial);
@@ -417,6 +445,11 @@ class SettingsAppearanceSection extends SettingsSection
             this.darkModeToggle.SetStatus (isDarkMode);
         }
     }
+
+    UpdateVisibility ()
+    {
+
+    }
 }
 
 export class SidebarSettingsPanel extends SidebarPanel
@@ -467,6 +500,9 @@ export class SidebarSettingsPanel extends SidebarPanel
             getShadingType : () => {
                 return this.callbacks.getShadingType ();
             },
+            getCameraMode : () => {
+                return this.callbacks.getCameraMode ();
+            },
             onEnvironmentMapChanged : () => {
                 this.callbacks.onEnvironmentMapChanged ();
             },
@@ -507,10 +543,10 @@ export class SidebarSettingsPanel extends SidebarPanel
         });
     }
 
-    Update ()
+    UpdateControlsVisibility ()
     {
-        this.modelDisplaySection.Update ();
+        this.modelDisplaySection.UpdateVisibility ();
-        this.importParametersSection.Update ();
+        this.importParametersSection.UpdateVisibility ();
         this.Resize ();
     }
 

source/website/website.js

@@ -179,7 +179,7 @@ export class Website
         this.viewer.SetMainObject (threeObject);
         this.viewer.SetUpVector (Direction.Y, false);
         this.navigator.FillTree (importResult);
-        this.sidebar.Update ();
+        this.sidebar.UpdateControlsVisibility ();
         this.FitModelToWindow (true);
     }
 
@@ -561,6 +561,7 @@ export class Website
             } else if (buttonIndex === 1) {
                 this.viewer.SetCameraMode (CameraMode.Orthographic);
             }
+            this.sidebar.UpdateControlsVisibility ();
         });
         AddSeparator (this.toolbar, ['only_full_width', 'only_on_model']);
         let measureToolButton = AddPushButton (this.toolbar, 'measure', 'Measure', ['only_full_width', 'only_on_model'], (isSelected) => {
@@ -622,6 +623,9 @@ export class Website
             getShadingType : () => {
                 return this.viewer.GetShadingType ();
             },
+            getCameraMode : () => {
+                return this.viewer.GetCameraMode ();
+            },
             hasDefaultMaterial : () => {
                 return HasDefaultMaterial (this.model);
             },