From 965482825b98b3e7ca5cbc3b8986bb28cecbace5 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Sat, 9 Feb 2019 18:55:44 +0100 Subject: [PATCH] Highlight meshes by material. --- website/include/importerapp.css | 4 +- website/include/importerapp.js | 64 ++++++++++++++++++++++--------- website/include/importerviewer.js | 21 ++++++++-- 3 files changed, 65 insertions(+), 24 deletions(-) diff --git a/website/include/importerapp.css b/website/include/importerapp.css index 1057029..e53b262 100644 --- a/website/include/importerapp.css +++ b/website/include/importerapp.css @@ -188,12 +188,12 @@ table.infotable td border : 1px solid #aaaaaa; } -div.meshbuttons +div.submenubuttons { } -div.meshbuttons img.meshimgbutton +div.submenubuttons img.submenubutton { padding : 3px; margin-right : 3px; diff --git a/website/include/importerapp.js b/website/include/importerapp.js index ff3b9a2..28f52f5 100644 --- a/website/include/importerapp.js +++ b/website/include/importerapp.js @@ -47,7 +47,7 @@ ImporterApp.prototype.Init = function () var myThis = this; var top = document.getElementById ('top'); this.importerButtons = new ImporterButtons (top); - this.importerButtons.AddLogo ('Online 3D Viewer v 0.6.2', function () { myThis.ShowAboutDialog (); }); + this.importerButtons.AddLogo ('Online 3D Viewer v 0.6.3', function () { myThis.ShowAboutDialog (); }); this.importerButtons.AddButton ('images/openfile.png', 'Open File', function () { myThis.OpenFile (); }); this.importerButtons.AddButton ('images/fitinwindow.png', 'Fit In Window', function () { myThis.FitInWindow (); }); this.importerButtons.AddToggleButton ('images/fixup.png', 'images/fixupgray.png', 'Enable/Disable Fixed Up Vector', function () { myThis.SetFixUp (); }); @@ -209,13 +209,18 @@ ImporterApp.prototype.GenerateMenu = function () infoTable.AddRow ('Triangle count', triangleCount); } - function AddMaterial (importerMenu, materialsGroup, material) + function AddMaterial (importerApp, importerMenu, materialsGroup, materialIndex, material) { materialsGroup.AddSubItem (material.name, { openCloseButton : { title : 'Show/Hide Information', onOpen : function (contentDiv, material) { contentDiv.empty (); + var materialbuttons = $('
').addClass ('submenubuttons').appendTo (contentDiv); + var highlightButton = $('').addClass ('submenubutton').attr ('src', 'images/highlightmesh.png').attr ('title', 'Highlight Meshes With Material').appendTo (materialbuttons); + highlightButton.click (function () { + importerApp.HighlightMeshesByMaterial (materialIndex); + }); var table = new InfoTable (contentDiv); table.AddColorRow ('Ambient', material.ambient); table.AddColorRow ('Diffuse', material.diffuse); @@ -244,16 +249,16 @@ ImporterApp.prototype.GenerateMenu = function () document.body.removeChild(input); } - var meshButtons = $('
').addClass ('meshbuttons').appendTo (contentDiv); - var fitInWindowButton = $('').addClass ('meshimgbutton').attr ('src', 'images/fitinwindowsmall.png').attr ('title', 'Fit Mesh In Window').appendTo (meshButtons); + var meshButtons = $('
').addClass ('submenubuttons').appendTo (contentDiv); + var fitInWindowButton = $('').addClass ('submenubutton').attr ('src', 'images/fitinwindowsmall.png').attr ('title', 'Fit Mesh In Window').appendTo (meshButtons); fitInWindowButton.click (function () { importerApp.FitMeshInWindow (meshIndex); }); - var highlightButton = $('').addClass ('meshimgbutton').attr ('src', 'images/highlightmesh.png').attr ('title', 'Highlight Mesh').appendTo (meshButtons); + var highlightButton = $('').addClass ('submenubutton').attr ('src', 'images/highlightmesh.png').attr ('title', 'Highlight Mesh').appendTo (meshButtons); highlightButton.click (function () { importerApp.HighlightMesh (meshIndex); }); - var copyNameToClipboardButton = $('').addClass ('meshimgbutton').attr ('src', 'images/copytoclipboard.png').attr ('title', 'Copy Mesh Name To Clipboard').appendTo (meshButtons); + var copyNameToClipboardButton = $('').addClass ('submenubutton').attr ('src', 'images/copytoclipboard.png').attr ('title', 'Copy Mesh Name To Clipboard').appendTo (meshButtons); copyNameToClipboardButton.click (function () { CopyToClipboard (meshName); }); @@ -347,7 +352,7 @@ ImporterApp.prototype.GenerateMenu = function () var material; for (i = 0; i < jsonData.materials.length; i++) { material = jsonData.materials[i]; - AddMaterial (importerMenu, materialsGroup, material); + AddMaterial (this, importerMenu, materialsGroup, i, material); } this.meshesGroup = AddDefaultGroup (importerMenu, 'Meshes', 'meshesmenuitem'); @@ -513,6 +518,13 @@ ImporterApp.prototype.ShowHideMeshInternal = function (meshIndex, isVisible) this.viewer.ShowMesh (meshIndex, meshMenuItem.isVisible); }; +ImporterApp.prototype.HighlightMeshInternal = function (meshIndex, highlight) +{ + var meshMenuItem = this.meshMenuItems[meshIndex]; + meshMenuItem.Highlight (highlight); + this.viewer.HighlightMesh (meshIndex, highlight); +}; + ImporterApp.prototype.ProcessFiles = function (fileList, isUrl) { this.ClearReadyForTest (); @@ -581,11 +593,6 @@ ImporterApp.prototype.RegisterCanvasClick = function (canvasName) ImporterApp.prototype.HighlightMesh = function (meshIndex) { - function HighlightMeshInModel (viewer, meshIndex, highlight) - { - viewer.HighlightMesh (meshIndex, highlight); - } - var i, menuItem, highlight; if (meshIndex != -1) { for (i = 0; i < this.meshMenuItems.length; i++) { @@ -593,12 +600,10 @@ ImporterApp.prototype.HighlightMesh = function (meshIndex) highlight = false; if (i == meshIndex) { if (!menuItem.IsHighlighted ()) { - menuItem.Highlight (true); menuItem.menuItemDiv.get (0).scrollIntoView (); - HighlightMeshInModel (this.viewer, i, true); + this.HighlightMeshInternal (i, true); } else { - menuItem.Highlight (false); - HighlightMeshInModel (this.viewer, i, false); + this.HighlightMeshInternal (i, false); } } } @@ -606,8 +611,7 @@ ImporterApp.prototype.HighlightMesh = function (meshIndex) for (i = 0; i < this.meshMenuItems.length; i++) { menuItem = this.meshMenuItems[i]; if (menuItem.IsHighlighted ()) { - menuItem.Highlight (false); - HighlightMeshInModel (this.viewer, i, false); + this.HighlightMeshInternal (i, false); } } } @@ -615,12 +619,34 @@ ImporterApp.prototype.HighlightMesh = function (meshIndex) this.viewer.Draw (); }; +ImporterApp.prototype.HighlightMeshesByMaterial = function (materialIndex) +{ + var meshIndices = this.viewer.GetMeshesByMaterial (materialIndex); + var i, meshIndex, menuItem; + + for (i = 0; i < this.meshMenuItems.length; i++) { + menuItem = this.meshMenuItems[i]; + if (menuItem.IsHighlighted ()) { + this.HighlightMeshInternal (i, false); + } + } + + for (i = 0; i < meshIndices.length; i++) { + meshIndex = meshIndices[i]; + menuItem = this.meshMenuItems[meshIndex]; + this.HighlightMeshInternal (meshIndex, true); + } + + this.meshesGroup.SetOpen (true); + this.viewer.Draw (); +}; + ImporterApp.prototype.OnCanvasClick = function (x, y) { var objects = this.viewer.GetMeshesUnderPosition (x, y); var meshIndex = -1; if (objects.length > 0) { - meshIndex = objects[0].originalJsonIndex; + meshIndex = objects[0].originalJsonMeshIndex; this.meshesGroup.SetOpen (true); } diff --git a/website/include/importerviewer.js b/website/include/importerviewer.js index b0b6032..e67c1c9 100644 --- a/website/include/importerviewer.js +++ b/website/include/importerviewer.js @@ -87,7 +87,7 @@ ImporterViewer.prototype.ShowMesh = function (index, show) { this.viewer.scene.traverse (function (current) { if (current instanceof THREE.Mesh) { - if (current.originalJsonIndex == index) { + if (current.originalJsonMeshIndex == index) { if (show) { current.visible = true; } else { @@ -98,11 +98,26 @@ ImporterViewer.prototype.ShowMesh = function (index, show) }); }; +ImporterViewer.prototype.GetMeshesByMaterial = function (materialIndex) +{ + var meshIndices = []; + this.viewer.scene.traverse (function (current) { + if (current instanceof THREE.Mesh) { + if (current.originalJsonMaterialIndex == materialIndex) { + if (meshIndices.length === 0 || meshIndices[meshIndices.length - 1] != current.originalJsonMeshIndex) { + meshIndices.push (current.originalJsonMeshIndex); + } + } + } + }); + return meshIndices; +}; + ImporterViewer.prototype.HighlightMesh = function (index, highlight) { this.viewer.scene.traverse (function (current) { if (current instanceof THREE.Mesh) { - if (current.originalJsonIndex == index) { + if (current.originalJsonMeshIndex == index) { if (highlight) { current.material.emissive.setHex (0x555555); } else { @@ -123,7 +138,7 @@ ImporterViewer.prototype.FitMeshInWindow = function (index) var meshes = []; this.viewer.scene.traverse (function (current) { if (current instanceof THREE.Mesh) { - if (current.originalJsonIndex == index) { + if (current.originalJsonMeshIndex == index) { meshes.push (current); } }