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

Create a new class for model loader user interface handling.

Browse Source
This commit is contained in:
kovacsv 2021-12-03 16:19:44 +01:00
parent 9c5f208297
commit 0efcff6d30
8 changed files with 189 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
source/threejs/threemodelloader.js
View File

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

41
source/viewer/domviewer.js
View File

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

2
tools/config.json
View File

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

2
website/embed.html
View File

@ -113,7 +113,7 @@
<script type="text/javascript" src="o3dv/js/sidebarpanels.js"></script>
<script type="text/javascript" src="o3dv/js/sidebar.js"></script>
<script type="text/javascript" src="o3dv/js/hashhandler.js"></script>
<script type="text/javascript" src="o3dv/js/loader.js"></script>
<script type="text/javascript" src="o3dv/js/threemodelloaderui.js"></script>
<script type="text/javascript" src="o3dv/js/themehandler.js"></script>
<script type="text/javascript" src="o3dv/js/website.js"></script>
<script type="text/javascript" src="o3dv/js/embed.js"></script>

2
website/index.html
View File

@ -115,7 +115,7 @@
<script type="text/javascript" src="o3dv/js/sidebarpanels.js"></script>
<script type="text/javascript" src="o3dv/js/sidebar.js"></script>
<script type="text/javascript" src="o3dv/js/hashhandler.js"></script>
<script type="text/javascript" src="o3dv/js/loader.js"></script>
<script type="text/javascript" src="o3dv/js/threemodelloaderui.js"></script>
<script type="text/javascript" src="o3dv/js/themehandler.js"></script>
<script type="text/javascript" src="o3dv/js/website.js"></script>
<script type="text/javascript" src="o3dv/js/embed.js"></script>

46
website/o3dv/js/embed.js
View File

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

110
website/o3dv/js/loader.js → website/o3dv/js/threemodelloaderui.js
View File

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

105
website/o3dv/js/website.js
View File

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