diff --git a/source/import/importer.js b/source/import/importer.js index 592f843..5f3e33c 100644 --- a/source/import/importer.js +++ b/source/import/importer.js @@ -184,6 +184,9 @@ OV.ImportSettings = class constructor () { this.defaultColor = new OV.Color (200, 200, 200); + this.edgesColor = new OV.Color (0, 0, 0); + this.showEdges = false; + this.edgesAngle = 15; } }; diff --git a/source/viewer/domviewer.js b/source/viewer/domviewer.js index 1f3f88d..f677809 100644 --- a/source/viewer/domviewer.js +++ b/source/viewer/domviewer.js @@ -74,7 +74,17 @@ OV.Init3DViewerElements = function () settings.defaultColor = color; } } + + let edgeColor = element.getAttribute ('edge'); + if (edgeColor) { + let color = OV.ParameterConverter.StringToColor (edgeColor); + if (color !== null) { + settings.showEdges = true; + settings.edgesColor = color; + } + } + viewer.UpdateSettings (settings); loader.LoadFromUrlList (modelUrls, settings); return { element: element, diff --git a/source/viewer/viewer.js b/source/viewer/viewer.js index a964e0c..dab23cf 100644 --- a/source/viewer/viewer.js +++ b/source/viewer/viewer.js @@ -86,9 +86,17 @@ OV.Viewer = class this.navigation = null; this.upVector = null; this.settings = { - animationSteps : 40 + animationSteps : 40, + showEdges : false, + edgesAngle : 15, + edgesColor : new OV.Color (0, 0, 0), }; } + + UpdateSettings (settings) + { + this.settings = Object.assign ({ animationSteps: 40 }, settings); + } Init (canvas) { @@ -236,6 +244,11 @@ OV.Viewer = class for (let i = 0; i < meshes.length; i++) { let mesh = meshes[i]; this.scene.add (mesh); + if (this.settings.showEdges) { + let edges = new THREE.EdgesGeometry (mesh.geometry, this.settings.edgesAngle); + let lines = new THREE.LineSegments (edges, new THREE.LineBasicMaterial ( { color: '#' + OV.ColorToHexString (this.settings.edgesColor) })); + this.scene.add (lines); + } } this.Render (); } @@ -351,7 +364,7 @@ OV.Viewer = class { for (let i = this.scene.children.length - 1; i >= 0; i--) { let object = this.scene.children[i]; - if (object.isMesh) { + if (object.isMesh || object.type === 'LineSegments') { object.geometry.dispose (); this.scene.remove (object); } diff --git a/website/assets/images/toolbar/settings.svg b/website/assets/images/toolbar/settings.svg index a0d09e9..7496b83 100644 --- a/website/assets/images/toolbar/settings.svg +++ b/website/assets/images/toolbar/settings.svg @@ -1 +1,51 @@ - \ No newline at end of file + +image/svg+xml diff --git a/website/o3dv/dialogs.js b/website/o3dv/dialogs.js index 426c1b7..ad686f9 100644 --- a/website/o3dv/dialogs.js +++ b/website/o3dv/dialogs.js @@ -1,6 +1,7 @@ OV.FeatureSet = { - SetDefaultColor : false + SetDefaultColor : true, + SetShowEdge : true, }; OV.ShowMessageDialog = function (title, message, subMessage) @@ -225,7 +226,10 @@ OV.ShowSharingDialog = function (importer, importSettings, camera) OV.ShowSettingsDialog = function (importSettings, onOk) { let dialogSettings = { - defaultColor : importSettings.defaultColor + defaultColor : importSettings.defaultColor, + edgesColor : importSettings.edgesColor, + showEdges : importSettings.showEdges, + edgesAngle : importSettings.edgesAngle, }; let dialog = new OV.ButtonDialog (); let contentDiv = dialog.Init ('Settings', [ @@ -255,6 +259,39 @@ OV.ShowSettingsDialog = function (importSettings, onOk) let colorStr = colorInput.val ().substr (1); dialogSettings.defaultColor = OV.HexStringToColor (colorStr); }); + + let showEdgeRow = $('
').addClass ('ov_dialog_table_row').appendTo (contentDiv); + $('
').html ('Show Edges').addClass ('ov_dialog_table_row_name').appendTo (showEdgeRow); + let seValueColumn = $('
').addClass ('ov_dialog_table_row_value').appendTo (showEdgeRow); + let showEdgeInput = $('').attr ('type', 'checkbox').addClass ('ov_dialog_checkradio').appendTo (seValueColumn); + $('').addClass ('ov_dialog_table_row_comment').html ('(Overlay edge on model)').appendTo (seValueColumn); + showEdgeInput.attr ('checked', dialogSettings.showEdges); + showEdgeInput.change (function () { + dialogSettings.showEdges = showEdgeInput.prop ('checked'); + }); + + let edgeColorRow = $('
').addClass ('ov_dialog_table_row').appendTo (contentDiv); + $('
').html ('Edges Color').addClass ('ov_dialog_table_row_name').appendTo (edgeColorRow); + let ecValueColumn = $('
').addClass ('ov_dialog_table_row_value').appendTo (edgeColorRow); + let edgeColorInput = $('').attr ('type', 'color').addClass ('ov_dialog_color').appendTo (ecValueColumn); + $('').addClass ('ov_dialog_table_row_comment').html ('(For overlaid edges)').appendTo (ecValueColumn); + edgeColorInput.val ('#' + OV.ColorToHexString (dialogSettings.edgesColor)); + edgeColorInput.change (function () { + let colorStr = edgeColorInput.val ().substr (1); + dialogSettings.edgesColor = OV.HexStringToColor (colorStr); + }); + + let edgeAngleRow = $('
').addClass ('ov_dialog_table_row').appendTo (contentDiv); + $('
').html ('Edges detection angle').addClass ('ov_dialog_table_row_name').appendTo (edgeAngleRow); + let eaValueColumn = $('
').addClass ('ov_dialog_table_row_value').appendTo (edgeAngleRow); + let edgeAngleInput = $('').attr ('type', 'text').addClass ('ov_dialog_inner_title').appendTo (eaValueColumn); + $('').addClass ('ov_dialog_table_row_comment').html ('(Edge detection angle)').appendTo (eaValueColumn); + edgeAngleInput.val (dialogSettings.edgesAngle); + edgeAngleInput.change (function () { + dialogSettings.edgesAngle = edgeAngleInput.val (); + }); + + dialog.Show (); return dialog; }; diff --git a/website/o3dv/embed.js b/website/o3dv/embed.js index 474a7bc..bdbff11 100644 --- a/website/o3dv/embed.js +++ b/website/o3dv/embed.js @@ -24,7 +24,8 @@ OV.Embed = class let color = this.hashHandler.GetColorFromHash (); if (color !== null) { settings.defaultColor = color; - } + } + this.viewer.UpdateSettings (settings); this.modelLoader.LoadFromUrlList (urls, settings); let hashParameters = OV.CreateModelUrlParameters (urls); let websiteUrl = this.parameters.websiteLinkDiv.attr ('href') + '#' + hashParameters; diff --git a/website/o3dv/website.js b/website/o3dv/website.js index 2108949..969349c 100644 --- a/website/o3dv/website.js +++ b/website/o3dv/website.js @@ -21,6 +21,7 @@ OV.Website = class { let canvas = $('').appendTo (this.parameters.viewerDiv); this.viewer.Init (canvas.get (0)); + this.viewer.UpdateSettings (this.importSettings); this.ShowViewer (false); this.hashHandler.SetEventListener (this.OnHashChange.bind (this)); @@ -193,7 +194,7 @@ OV.Website = class return; } let settings = new OV.ImportSettings (); - settings.defaultColor = this.importSettings.defaultColor; + Object.assign(settings, this.importSettings); let color = this.hashHandler.GetColorFromHash (); if (color !== null) { settings.defaultColor = color; @@ -290,16 +291,27 @@ OV.Website = class AddButton (this.toolbar, 'share', 'Share model', true, function () { obj.dialog = OV.ShowSharingDialog (importer, obj.importSettings, obj.viewer.GetCamera ()); }); - if (OV.FeatureSet.SetDefaultColor) { + if (OV.FeatureSet.SetDefaultColor || OV.FeatureSet.SetShowEdge) { AddSeparator (this.toolbar, true); AddButton (this.toolbar, 'settings', 'Settings', true, function () { obj.dialog = OV.ShowSettingsDialog (obj.importSettings, function (dialogSettings) { let reload = false; - if (!OV.ColorIsEqual (obj.importSettings.defaultColor, dialogSettings.defaultColor)) { - obj.importSettings.defaultColor = dialogSettings.defaultColor; - reload = true; + for (let key in dialogSettings) { + if (key.indexOf ('Color') !== -1) { + if (!OV.ColorIsEqual (obj.importSettings[key], dialogSettings[key])) { + obj.importSettings[key] = dialogSettings[key]; + reload = true; + } + } + else { + if (dialogSettings[key] !== obj.importSettings[key]) { + obj.importSettings[key] = dialogSettings[key]; + reload = true; + } + } } if (reload) { + obj.viewer.UpdateSettings (obj.importSettings); obj.ReloadFiles (); } });