diff --git a/source/threejs/threemodelloader.js b/source/threejs/threemodelloader.js index 45f41bc..e1bfcae 100644 --- a/source/threejs/threemodelloader.js +++ b/source/threejs/threemodelloader.js @@ -3,69 +3,53 @@ OV.ThreeModelLoader = class constructor () { this.importer = new OV.Importer (); - this.callbacks = null; this.inProgress = false; this.defaultMaterial = null; this.hasHighpDriverIssue = OV.HasHighpDriverIssue (); } - Init (callbacks) + InProgress () { - this.callbacks = callbacks; + return this.inProgress; } - LoadFromUrlList (urls, settings) - { - this.LoadFromSource (urls, OV.FileSource.Url, settings); - } - - LoadFromFileList (files, settings) - { - this.LoadFromSource (files, OV.FileSource.File, settings); - } - - LoadFromSource (files, fileSource, settings) + LoadModel (files, fileSource, settings, callbacks) { if (this.inProgress) { return; } this.inProgress = true; - this.callbacks.onLoadStart (); + callbacks.onLoadStart (); this.importer.ImportFiles (files, fileSource, settings, { onFilesLoaded : () => { - this.callbacks.onImportStart (); + callbacks.onImportStart (); }, onSelectMainFile : (fileNames, selectFile) => { - if (!this.callbacks.onSelectMainFile) { + if (!callbacks.onSelectMainFile) { selectFile (0); } else { - this.callbacks.onSelectMainFile (fileNames, selectFile); + callbacks.onSelectMainFile (fileNames, selectFile); } }, onImportSuccess : (importResult) => { - this.OnModelImported (importResult); + callbacks.onVisualizationStart (); + let params = new OV.ModelToThreeConversionParams (); + params.forceMediumpForMaterials = this.hasHighpDriverIssue; + let output = new OV.ModelToThreeConversionOutput (); + OV.ConvertModelToThreeObject (importResult.model, params, output, { + onTextureLoaded : () => { + callbacks.onTextureLoaded (); + }, + onModelLoaded : (threeObject) => { + this.defaultMaterial = output.defaultMaterial; + callbacks.onModelFinished (importResult, threeObject); + this.inProgress = false; + } + }); }, onImportError : (importError) => { - this.callbacks.onLoadError (importError); - this.inProgress = false; - } - }); - } - - OnModelImported (importResult) - { - this.callbacks.onVisualizationStart (); - let params = new OV.ModelToThreeConversionParams (); - params.forceMediumpForMaterials = this.hasHighpDriverIssue; - let output = new OV.ModelToThreeConversionOutput (); - OV.ConvertModelToThreeObject (importResult.model, params, output, { - onTextureLoaded : () => { - this.callbacks.onTextureLoaded (); - }, - onModelLoaded : (threeObject) => { - this.defaultMaterial = output.defaultMaterial; - this.callbacks.onModelFinished (importResult, threeObject); + callbacks.onLoadError (importError); this.inProgress = false; } }); @@ -76,6 +60,11 @@ OV.ThreeModelLoader = class return this.importer; } + GetDefaultMaterial () + { + return this.defaultMaterial; + } + ReplaceDefaultMaterialColor (defaultColor) { if (this.defaultMaterial !== null) { diff --git a/source/viewer/domviewer.js b/source/viewer/domviewer.js index 31e1b14..036914b 100644 --- a/source/viewer/domviewer.js +++ b/source/viewer/domviewer.js @@ -15,13 +15,31 @@ OV.Init3DViewerElement = function (parentDiv, modelUrls, parameters) viewer.Resize (width, height); let loader = new OV.ThreeModelLoader (); + + if (modelUrls === null || modelUrls.length === 0) { + return null; + } + + if (parameters.backgroundColor) { + viewer.SetBackgroundColor (parameters.backgroundColor); + } + + if (parameters.environmentMap) { + viewer.SetEnvironmentMap (parameters.environmentMap); + } + + let settings = new OV.ImportSettings (); + if (parameters.defaultColor) { + settings.defaultColor = parameters.defaultColor; + } + let progressDiv = null; - loader.Init ({ + loader.LoadModel (modelUrls, OV.FileSource.Url, settings, { onLoadStart : () => { canvas.style.display = 'none'; progressDiv = document.createElement ('div'); - parentDiv.appendChild (progressDiv); progressDiv.innerHTML = 'Loading model...'; + parentDiv.appendChild (progressDiv); }, onImportStart : () => { progressDiv.innerHTML = 'Importing model...'; @@ -60,25 +78,6 @@ OV.Init3DViewerElement = function (parentDiv, modelUrls, parameters) progressDiv.innerHTML = message; } }); - - if (modelUrls === null || modelUrls.length === 0) { - return null; - } - - if (parameters.backgroundColor) { - viewer.SetBackgroundColor (parameters.backgroundColor); - } - - if (parameters.environmentMap) { - viewer.SetEnvironmentMap (parameters.environmentMap); - } - - let settings = new OV.ImportSettings (); - if (parameters.defaultColor) { - settings.defaultColor = parameters.defaultColor; - } - - loader.LoadFromUrlList (modelUrls, settings); return { element: parentDiv, viewer: viewer diff --git a/tools/config.json b/tools/config.json index 2142f9d..083e13e 100644 --- a/tools/config.json +++ b/tools/config.json @@ -85,7 +85,7 @@ "website/o3dv/js/sidebarpanels.js", "website/o3dv/js/sidebar.js", "website/o3dv/js/hashhandler.js", - "website/o3dv/js/loader.js", + "website/o3dv/js/threemodelloaderui.js", "website/o3dv/js/themehandler.js", "website/o3dv/js/website.js", "website/o3dv/js/embed.js" diff --git a/website/embed.html b/website/embed.html index e25aabd..9053760 100644 --- a/website/embed.html +++ b/website/embed.html @@ -113,7 +113,7 @@ - + diff --git a/website/index.html b/website/index.html index dac0c6c..cea1259 100644 --- a/website/index.html +++ b/website/index.html @@ -115,7 +115,7 @@ - + diff --git a/website/o3dv/js/embed.js b/website/o3dv/js/embed.js index 4b5ba0e..1825710 100644 --- a/website/o3dv/js/embed.js +++ b/website/o3dv/js/embed.js @@ -5,18 +5,17 @@ OV.Embed = class this.parameters = parameters; this.viewer = new OV.Viewer (); this.hashHandler = new OV.HashHandler (); - this.modelLoader = new OV.ThreeModelLoader (); + this.modelLoaderUI = new OV.ThreeModelLoaderUI (); } Load () { let canvas = OV.AddDomElement (this.parameters.viewerDiv, 'canvas'); this.InitViewer (canvas); - this.InitModelLoader (); this.Resize (); if (this.hashHandler.HasHash ()) { - let urls = this.hashHandler.GetModelFilesFromHash (); + let urls = this.hashHandler.GetModelFilesFromHash (); if (urls === null) { return; } @@ -29,7 +28,24 @@ OV.Embed = class if (defaultColor !== null) { settings.defaultColor = defaultColor; } - this.modelLoader.LoadFromUrlList (urls, settings); + this.modelLoaderUI.LoadModel (urls, OV.FileSource.Url, settings, { + onStart : () => + { + + }, + onFinish : (importResult, threeObject) => + { + this.OnModelFinished (importResult, threeObject); + }, + onRender : () => + { + this.viewer.Render (); + }, + onError : (importError) => + { + + } + }); let hashParameters = OV.CreateModelUrlParameters (urls); let websiteUrl = this.parameters.websiteLinkDiv.getAttribute ('href') + '#' + hashParameters; this.parameters.websiteLinkDiv.setAttribute ('href', websiteUrl); @@ -75,26 +91,4 @@ OV.Embed = class 'assets/envmaps/grayclouds/negz.jpg' ]); } - - InitModelLoader () - { - OV.InitModelLoader (this.modelLoader, { - onStart : () => - { - - }, - onFinish : (importResult, threeObject) => - { - this.OnModelFinished (importResult, threeObject); - }, - onRender : () => - { - this.viewer.Render (); - }, - onError : (importError) => - { - - } - }); - } }; diff --git a/website/o3dv/js/loader.js b/website/o3dv/js/threemodelloaderui.js similarity index 50% rename from website/o3dv/js/loader.js rename to website/o3dv/js/threemodelloaderui.js index 87cb0ef..14a5933 100644 --- a/website/o3dv/js/loader.js +++ b/website/o3dv/js/threemodelloaderui.js @@ -1,6 +1,65 @@ -OV.InitModelLoader = function (modelLoader, callbacks) +OV.ThreeModelLoaderUI = class { - function OpenErrorDialog (importError) + constructor () + { + this.modelLoader = new OV.ThreeModelLoader (); + this.modalDialog = null; + } + + LoadModel (files, fileSource, settings, callbacks) + { + if (this.modelLoader.InProgress ()) { + return; + } + + let progressDialog = null; + this.modelLoader.LoadModel (files, fileSource, settings, { + onLoadStart : () => { + this.CloseDialogIfOpen (); + callbacks.onStart (); + progressDialog = new OV.ProgressDialog (); + progressDialog.Init ('Loading Model'); + progressDialog.Show (); + }, + onSelectMainFile : (fileNames, selectFile) => { + progressDialog.Hide (); + this.modalDialog = this.ShowFileSelectorDialog (fileNames, (index) => { + progressDialog.Show (); + selectFile (index); + }); + }, + onImportStart : () => { + progressDialog.SetText ('Importing Model'); + }, + onVisualizationStart : () => { + progressDialog.SetText ('Visualizing Model'); + }, + onModelFinished : (importResult, threeObject) => { + progressDialog.Hide (); + callbacks.onFinish (importResult, threeObject); + }, + onTextureLoaded : () => { + callbacks.onRender (); + }, + onLoadError : (importError) => { + progressDialog.Hide (); + callbacks.onError (importError); + this.modalDialog = this.ShowErrorDialog (importError); + }, + }); + } + + GetModelLoader () + { + return this.modelLoader; + } + + GetImporter () + { + return this.modelLoader.GetImporter (); + } + + ShowErrorDialog (importError) { if (importError.code === OV.ImportErrorCode.NoImportableFile) { return OV.ShowMessageDialog ( @@ -23,7 +82,7 @@ OV.InitModelLoader = function (modelLoader, callbacks) } } - function ShowFileSelectorDialog (fileNames, onSelect) + ShowFileSelectorDialog (fileNames, onSelect) { let dialog = new OV.ButtonDialog (); let contentDiv = dialog.Init ('Select Model', [ @@ -61,48 +120,11 @@ OV.InitModelLoader = function (modelLoader, callbacks) return dialog; } - function CloseDialogIfOpen (dialog) + CloseDialogIfOpen () { - if (dialog !== null) { - dialog.Hide (); - dialog = null; + if (this.modalDialog !== null) { + this.modalDialog.Hide (); + this.modalDialog = null; } } - - let modalDialog = null; - let progressDialog = null; - modelLoader.Init ({ - onLoadStart : () => { - CloseDialogIfOpen (modalDialog); - callbacks.onStart (); - progressDialog = new OV.ProgressDialog (); - progressDialog.Init ('Loading Model'); - progressDialog.Show (); - }, - onSelectMainFile : (fileNames, selectFile) => { - progressDialog.Hide (); - modalDialog = ShowFileSelectorDialog (fileNames, (index) => { - progressDialog.Show (); - selectFile (index); - }); - }, - onImportStart : () => { - progressDialog.SetText ('Importing Model'); - }, - onVisualizationStart : () => { - progressDialog.SetText ('Visualizing Model'); - }, - onModelFinished : (importResult, threeObject) => { - progressDialog.Hide (); - callbacks.onFinish (importResult, threeObject); - }, - onTextureLoaded : () => { - callbacks.onRender (); - }, - onLoadError : (importError) => { - progressDialog.Hide (); - callbacks.onError (importError); - modalDialog = OpenErrorDialog (importError); - }, - }); }; diff --git a/website/o3dv/js/website.js b/website/o3dv/js/website.js index 3f328a6..59f6545 100644 --- a/website/o3dv/js/website.js +++ b/website/o3dv/js/website.js @@ -19,7 +19,7 @@ OV.Website = class this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.parameters.navigatorSplitterDiv); this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv, this.parameters.sidebarSplitterDiv, this.settings); this.eventHandler = new OV.EventHandler (this.parameters.eventHandler); - this.modelLoader = new OV.ThreeModelLoader (); + this.modelLoaderUI = new OV.ThreeModelLoaderUI (); this.themeHandler = new OV.ThemeHandler (); this.highlightColor = new THREE.Color (0x8ec9f0); this.uiState = OV.WebsiteUIState.Undefined; @@ -35,7 +35,6 @@ OV.Website = class this.InitViewer (); this.InitToolbar (); this.InitDragAndDrop (); - this.InitModelLoader (); this.InitSidebar (); this.InitNavigator (); this.InitCookieConsent (); @@ -315,7 +314,7 @@ OV.Website = class LoadModelFromUrlList (urls, settings) { - this.modelLoader.LoadFromUrlList (urls, settings); + this.LoadModel (urls, OV.FileSource.Url, settings); this.ClearHashIfNotOnlyUrlList (); } @@ -323,13 +322,55 @@ OV.Website = class { let importSettings = new OV.ImportSettings (); importSettings.defaultColor = this.settings.defaultColor; - this.modelLoader.LoadFromFileList (files, importSettings); + this.LoadModel (files, OV.FileSource.File, importSettings); this.ClearHashIfNotOnlyUrlList (); } + LoadModel (files, fileSource, settings) + { + this.modelLoaderUI.LoadModel (files, fileSource, settings, { + onStart : () => + { + this.SetUIState (OV.WebsiteUIState.Loading); + this.ClearModel (); + }, + onFinish : (importResult, threeObject) => + { + this.SetUIState (OV.WebsiteUIState.Model); + this.OnModelLoaded (importResult, threeObject); + let importedExtension = OV.GetFileExtension (importResult.mainFile); + this.eventHandler.HandleEvent ('model_loaded', { extension : importedExtension }); + }, + onRender : () => + { + this.viewer.Render (); + }, + onError : (importError) => + { + this.SetUIState (OV.WebsiteUIState.Intro); + let reason = 'unknown'; + if (importError.code === OV.ImportErrorCode.NoImportableFile) { + reason = 'no_importable_file'; + } else if (importError.code === OV.ImportErrorCode.ImportFailed) { + reason = 'import_failed'; + } + let extensions = []; + let importer = this.modelLoaderUI.GetImporter (); + let fileList = importer.GetFileList ().GetFiles (); + for (let i = 0; i < fileList.length; i++) { + extensions.push (fileList[i].extension); + } + this.eventHandler.HandleEvent ('model_load_failed', { + reason : reason, + extensions : extensions + }); + } + }); + } + ClearHashIfNotOnlyUrlList () { - let importer = this.modelLoader.GetImporter (); + let importer = this.modelLoaderUI.GetImporter (); let isOnlyUrl = importer.GetFileList ().IsOnlyUrlSource (); if (!isOnlyUrl && this.hashHandler.HasHash ()) { this.hashHandler.SkipNextEventHandler (); @@ -345,9 +386,10 @@ OV.Website = class if (resetColors) { this.settings.SaveToCookies (this.cookieHandler); this.viewer.SetBackgroundColor (this.settings.backgroundColor); - if (this.modelLoader.defaultMaterial !== null) { + let modelLoader = this.modelLoaderUI.GetModelLoader (); + if (modelLoader.GetDefaultMaterial () !== null) { OV.ReplaceDefaultMaterialColor (this.model, this.settings.defaultColor); - this.modelLoader.ReplaceDefaultMaterialColor (this.settings.defaultColor); + modelLoader.ReplaceDefaultMaterialColor (this.settings.defaultColor); } } } @@ -413,7 +455,7 @@ OV.Website = class } } - let importer = this.modelLoader.GetImporter (); + let importer = this.modelLoaderUI.GetImporter (); AddButton (this.toolbar, this.eventHandler, 'open', 'Open model from your device', [], () => { this.OpenFileBrowserDialog (); @@ -491,48 +533,6 @@ OV.Website = class }, false); } - InitModelLoader () - { - OV.InitModelLoader (this.modelLoader, { - onStart : () => - { - this.SetUIState (OV.WebsiteUIState.Loading); - this.ClearModel (); - }, - onFinish : (importResult, threeObject) => - { - this.SetUIState (OV.WebsiteUIState.Model); - this.OnModelLoaded (importResult, threeObject); - let importedExtension = OV.GetFileExtension (importResult.mainFile); - this.eventHandler.HandleEvent ('model_loaded', { extension : importedExtension }); - }, - onRender : () => - { - this.viewer.Render (); - }, - onError : (importError) => - { - this.SetUIState (OV.WebsiteUIState.Intro); - let reason = 'unknown'; - if (importError.code === OV.ImportErrorCode.NoImportableFile) { - reason = 'no_importable_file'; - } else if (importError.code === OV.ImportErrorCode.ImportFailed) { - reason = 'import_failed'; - } - let extensions = []; - let importer = this.modelLoader.GetImporter (); - let fileList = importer.GetFileList ().GetFiles (); - for (let i = 0; i < fileList.length; i++) { - extensions.push (fileList[i].extension); - } - this.eventHandler.HandleEvent ('model_load_failed', { - reason : reason, - extensions : extensions - }); - } - }); - } - InitSidebar () { this.sidebar.Init ({ @@ -542,9 +542,10 @@ OV.Website = class }, onDefaultColorChange : () => { this.settings.SaveToCookies (this.cookieHandler); - if (this.modelLoader.defaultMaterial !== null) { + let modelLoader = this.modelLoaderUI.GetModelLoader (); + if (modelLoader.GetDefaultMaterial () !== null) { OV.ReplaceDefaultMaterialColor (this.model, this.settings.defaultColor); - this.modelLoader.ReplaceDefaultMaterialColor (this.settings.defaultColor); + modelLoader.ReplaceDefaultMaterialColor (this.settings.defaultColor); } this.viewer.Render (); },