Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
kovacsv 2022-10-11 20:07:41 +02:00
parent 8da7f15a54
commit 76dd260801
3 changed files with 62 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
source/website/sidebar.js
View File

@ -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)

68
source/website/sidebarsettingspanel.js
View File

@ -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 backgroundIsEnvMapCheckbox = AddCheckbox (checkboxDiv, 'use_as_background', 'Use as background image', settings.backgroundIsEnvMap, () => {
settings.backgroundIsEnvMap = backgroundIsEnvMapCheckbox.checked;
callbacks.onEnvironmentMapChanged ();
});
let isPerspective = (callbacks.getCameraMode () === CameraMode.Perspective);
if (isPerspective) {
let checkboxDiv = AddDiv (contentDiv, 'ov_environment_map_checkbox');
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.importParametersSection.Update ();
this.modelDisplaySection.UpdateVisibility ();
this.importParametersSection.UpdateVisibility ();
this.Resize ();
}

6
source/website/website.js
View File

@ -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);
},