diff --git a/source/viewer/viewer.js b/source/viewer/viewer.js index 54dc9f3..7f91411 100644 --- a/source/viewer/viewer.js +++ b/source/viewer/viewer.js @@ -323,9 +323,24 @@ OV.ViewerGrid = class { this.scene = scene; this.mainObject = null; + this.gridSettings = { + showGrid : false, + direction : OV.Direction.Y, + cellSize : 1.0 + }; } - AddGridLines (boundingBox, cellSize) + IsGridVisible () + { + return this.gridSettings.showGrid; + } + + SetGridSettings (show) + { + this.gridSettings.showGrid = show; + } + + UpdateGridLines (boundingBox) { function CreateLine (from, to, material) { @@ -335,20 +350,29 @@ OV.ViewerGrid = class return line; } - this.RemoveGridLines (); + this.ClearGridLines (); + if (boundingBox === null) { + return; + } + + if (!this.gridSettings.showGrid) { + return; + } this.mainObject = new THREE.Object3D (); const material = new THREE.LineBasicMaterial({ color: 0xcccccc }); + // TODO: direction handling let boundingBoxSize = new THREE.Vector3 (); boundingBox.getSize (boundingBoxSize); - let expandSize = boundingBoxSize.y * 0.5; + let expandSize = 1.0; let minValue = new THREE.Vector2 (boundingBox.min.z - expandSize, boundingBox.min.x - expandSize); let maxValue = new THREE.Vector2 (boundingBox.max.z + expandSize, boundingBox.max.x + expandSize); + let cellSize = this.gridSettings.cellSize; let alignedMinValue = new THREE.Vector2 ( Math.floor (minValue.x / cellSize) * cellSize, Math.floor (minValue.y / cellSize) * cellSize @@ -358,21 +382,25 @@ OV.ViewerGrid = class Math.ceil (maxValue.y / cellSize) * cellSize ); - let level = boundingBox.min.y; + let level = 0.0; let cellCountX = Math.ceil ((alignedMaxValue.x - alignedMinValue.x) / cellSize); let cellCountY = Math.ceil ((alignedMaxValue.y - alignedMinValue.y) / cellSize); for (let step = 0; step < cellCountX + 1; step++) { let lineDist = alignedMinValue.x + step * cellSize; - this.mainObject.add (CreateLine (new THREE.Vector3 (alignedMinValue.y, level, lineDist), new THREE.Vector3 (alignedMaxValue.y, level, lineDist), material)); + let beg = new THREE.Vector3 (alignedMinValue.y, level, lineDist); + let end = new THREE.Vector3 (alignedMaxValue.y, level, lineDist); + this.mainObject.add (CreateLine (beg, end, material)); } for (let step = 0; step < cellCountY + 1; step++) { let lineDist = alignedMinValue.y + step * cellSize; - this.mainObject.add (CreateLine (new THREE.Vector3 (lineDist, level, alignedMinValue.x), new THREE.Vector3 (lineDist, level, alignedMaxValue.x), material)); + let beg = new THREE.Vector3 (lineDist, level, alignedMinValue.x); + let end = new THREE.Vector3 (lineDist, level, alignedMaxValue.x); + this.mainObject.add (CreateLine (beg, end, material)); } this.scene.add (this.mainObject); } - RemoveGridLines () + ClearGridLines () { if (this.mainObject !== null) { this.scene.remove (this.mainObject); @@ -516,6 +544,13 @@ OV.Viewer = class this.Render (); } + SetGridSettings (show) + { + this.grid.SetGridSettings (show); + this.UpdateGridLines (); + this.Render (); + } + SetEdgeSettings (show, color, threshold) { this.geometry.SetEdgeSettings (show, color, threshold); @@ -646,12 +681,7 @@ OV.Viewer = class const shadingType = OV.GetShadingTypeOfObject (object); this.geometry.SetMainObject (object); this.shading.SetType (shadingType); - - // let boundingBox = this.GetBoundingBox ((meshUserData) => { - // return true; - // }); - // let cellSize = 1.0; - // this.grid.AddGridLines (boundingBox, cellSize); + this.UpdateGridLines (); this.Render (); } @@ -662,6 +692,19 @@ OV.Viewer = class this.Render (); } + UpdateGridLines () + { + this.grid.ClearGridLines (); + if (!this.grid.IsGridVisible ()) { + return; + } + + let boundingBox = this.GetBoundingBox ((meshUserData) => { + return true; + }); + this.grid.UpdateGridLines (boundingBox); + } + Clear () { this.geometry.Clear (); diff --git a/website/o3dv/js/featureset.js b/website/o3dv/js/featureset.js index 64ac4bf..e8d1050 100644 --- a/website/o3dv/js/featureset.js +++ b/website/o3dv/js/featureset.js @@ -1,4 +1,5 @@ OV.FeatureSet = { + ShowGrid : false, MeasureTool : false }; diff --git a/website/o3dv/js/settings.js b/website/o3dv/js/settings.js index 1517ba5..00a342f 100644 --- a/website/o3dv/js/settings.js +++ b/website/o3dv/js/settings.js @@ -9,6 +9,7 @@ OV.Settings = class { this.backgroundColor = new OV.Color (255, 255, 255); this.defaultColor = new OV.Color (200, 200, 200); + this.showGrid = false; this.showEdges = false; this.edgeColor = new OV.Color (0, 0, 0); this.edgeThreshold = 1; @@ -19,6 +20,7 @@ OV.Settings = class { this.backgroundColor = cookieHandler.GetColorVal ('ov_background_color', new OV.Color (255, 255, 255)); this.defaultColor = cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200)); + this.showGrid = cookieHandler.GetBoolVal ('ov_show_grid', false); this.showEdges = cookieHandler.GetBoolVal ('ov_show_edges', false); this.edgeColor = cookieHandler.GetColorVal ('ov_edge_color', new OV.Color (0, 0, 0)); this.edgeThreshold = cookieHandler.GetIntVal ('ov_edge_threshold', 1); @@ -30,6 +32,7 @@ OV.Settings = class { cookieHandler.SetColorVal ('ov_background_color', this.backgroundColor); cookieHandler.SetColorVal ('ov_default_color', this.defaultColor); + cookieHandler.SetBoolVal ('ov_show_grid', this.showGrid); cookieHandler.SetBoolVal ('ov_show_edges', this.showEdges); cookieHandler.SetColorVal ('ov_edge_color', this.edgeColor); cookieHandler.SetIntVal ('ov_edge_threshold', this.edgeThreshold); diff --git a/website/o3dv/js/sidebar.js b/website/o3dv/js/sidebar.js index f82c1cb..f654be3 100644 --- a/website/o3dv/js/sidebar.js +++ b/website/o3dv/js/sidebar.js @@ -49,6 +49,9 @@ OV.Sidebar = class onDefaultColorChange : () => { this.callbacks.onDefaultColorChange (); }, + onGridDisplayChange : () => { + this.callbacks.onGridDisplayChange (); + }, onEdgeDisplayChange : () => { this.callbacks.onEdgeDisplayChange (); }, diff --git a/website/o3dv/js/sidebarsettingspanel.js b/website/o3dv/js/sidebarsettingspanel.js index 2b5880f..5093d40 100644 --- a/website/o3dv/js/sidebarsettingspanel.js +++ b/website/o3dv/js/sidebarsettingspanel.js @@ -78,6 +78,36 @@ OV.SettingsColorSection = class } }; +OV.SettingsGridDisplaySection = class +{ + constructor (parentDiv) + { + this.parentDiv = parentDiv; + this.gridDisplayToggle = null; + } + + Init (showGrid, onChange) + { + let contentDiv = OV.AddDiv (this.parentDiv, 'ov_sidebar_settings_content'); + let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle'); + + this.showGridToggle = OV.AddToggle (titleDiv, 'ov_sidebar_subtitle_toggle'); + this.showGridToggle.OnChange (() => { + onChange (this.showGridToggle.GetStatus ()); + }); + OV.AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Show Grid'); + this.showGridToggle.SetStatus (showGrid); + } + + Update (showGrid) + { + if (this.showGridToggle === null) { + return; + } + this.showGridToggle.SetStatus (showGrid); + } +}; + OV.SettingsEdgeDisplaySection = class { constructor (parentDiv) @@ -201,6 +231,10 @@ OV.SidebarSettingsPanel = class extends OV.SidebarPanel this.sectionsDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_settings_sections ov_thin_scrollbar'); this.backgroundColorSection = new OV.SettingsColorSection (this.sectionsDiv); this.defaultColorSection = new OV.SettingsColorSection (this.sectionsDiv); + this.gridDisplaySection = null; + if (OV.FeatureSet.ShowGrid) { + this.gridDisplaySection = new OV.SettingsGridDisplaySection (this.sectionsDiv); + } this.edgeDisplaySection = new OV.SettingsEdgeDisplaySection (this.sectionsDiv); this.themeSection = new OV.SettingsThemeSection (this.sectionsDiv); @@ -248,6 +282,12 @@ OV.SidebarSettingsPanel = class extends OV.SidebarPanel this.SetDefaultColor (newColor, false); } ); + if (this.gridDisplaySection !== null) { + this.gridDisplaySection.Init (this.settings.showGrid, (showGrid) => { + this.settings.showGrid = showGrid; + callbacks.onGridDisplayChange (); + }); + } this.edgeDisplaySection.Init ( this.settings.showEdges, this.settings.edgeColor, @@ -312,6 +352,7 @@ OV.SidebarSettingsPanel = class extends OV.SidebarPanel this.settings.backgroundColor = defaultSettings.backgroundColor; this.settings.defaultColor = defaultSettings.defaultColor; + this.settings.showGrid = defaultSettings.showGrid; this.settings.showEdges = defaultSettings.showEdges; this.settings.edgeColor = defaultSettings.edgeColor; this.settings.edgeThreshold = defaultSettings.edgeThreshold; @@ -319,8 +360,15 @@ OV.SidebarSettingsPanel = class extends OV.SidebarPanel this.backgroundColorSection.Update (defaultSettings.backgroundColor); this.defaultColorSection.Update (defaultSettings.defaultColor); + if (this.gridDisplaySection !== null) { + this.gridDisplaySection.Update (defaultSettings.showGrid); + } this.edgeDisplaySection.Update (defaultSettings.showEdges, defaultSettings.edgeColor, defaultSettings.edgeThreshold); this.themeSection.Update (defaultSettings.themeId); + + if (this.gridDisplaySection !== null) { + this.callbacks.onGridDisplayChange (); + } this.callbacks.onThemeChange (); } diff --git a/website/o3dv/js/website.js b/website/o3dv/js/website.js index 7172f1e..1e8e62d 100644 --- a/website/o3dv/js/website.js +++ b/website/o3dv/js/website.js @@ -405,6 +405,12 @@ OV.Website = class } } + UpdateGridDisplay () + { + this.settings.SaveToCookies (this.cookieHandler); + this.viewer.SetGridSettings (this.settings.showGrid); + } + UpdateEdgeDisplay () { this.settings.SaveToCookies (this.cookieHandler); @@ -431,6 +437,7 @@ OV.Website = class { let canvas = OV.AddDomElement (this.parameters.viewerDiv, 'canvas'); this.viewer.Init (canvas); + this.viewer.SetGridSettings (this.settings.showGrid); this.viewer.SetEdgeSettings (this.settings.showEdges, this.settings.edgeColor, this.settings.edgeThreshold); this.viewer.SetBackgroundColor (this.settings.backgroundColor); this.viewer.SetEnvironmentMap ([ @@ -588,6 +595,9 @@ OV.Website = class } this.viewer.Render (); }, + onGridDisplayChange : () => { + this.UpdateGridDisplay (); + }, onEdgeDisplayChange : () => { this.UpdateEdgeDisplay (); },