From 527234d47cc19f731931e3881b44b7cc1e243ef4 Mon Sep 17 00:00:00 2001 From: Viktor Kovacs Date: Sun, 11 Apr 2021 11:01:24 +0200 Subject: [PATCH 01/49] Update version. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 84b34b6..02406fd 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "online-3d-viewer", "description": "Online 3D Viewer", - "version": "0.7.7", + "version": "0.7.8", "repository": "github:kovacsv/Online3DViewer", "license": "MIT", "devDependencies": { From e9305ba33cf8496081b6ad3470e9ac14d9512f93 Mon Sep 17 00:00:00 2001 From: Viktor Kovacs Date: Sun, 11 Apr 2021 12:24:41 +0200 Subject: [PATCH 02/49] Export as png #39 --- source/viewer/viewer.js | 25 +++++------ website/o3dv/exportdialog.js | 82 +++++++++++++++++++++++------------- website/o3dv/utils.js | 10 ++++- website/o3dv/website.js | 2 +- 4 files changed, 75 insertions(+), 44 deletions(-) diff --git a/source/viewer/viewer.js b/source/viewer/viewer.js index e5acfe0..d607661 100644 --- a/source/viewer/viewer.js +++ b/source/viewer/viewer.js @@ -378,22 +378,23 @@ OV.Viewer = class this.scene.add (this.light); } + GetImageSize () + { + let originalSize = new THREE.Vector2 (); + this.renderer.getSize (originalSize); + return { + width : parseInt (originalSize.x, 10), + height : parseInt (originalSize.y, 10) + }; + } + GetImageAsDataUrl (width, height) { - let originalSize = null; - if (width && height) { - originalSize = new THREE.Vector2 (); - this.renderer.getSize (originalSize); - this.ResizeRenderer (width, height); - } + let originalSize = this.GetImageSize (); + this.ResizeRenderer (width, height); this.Render (); let url = this.renderer.domElement.toDataURL (); - if (originalSize !== null) { - this.ResizeRenderer ( - parseInt (originalSize.x, 10), - parseInt (originalSize.y, 10) - ); - } + this.ResizeRenderer (originalSize.width, originalSize.height); return url; } }; diff --git a/website/o3dv/exportdialog.js b/website/o3dv/exportdialog.js index 2f6832f..f7616b0 100644 --- a/website/o3dv/exportdialog.js +++ b/website/o3dv/exportdialog.js @@ -1,3 +1,9 @@ +OV.ExportType = +{ + Model : 1, + Image : 2 +}; + OV.ExportDialog = class { constructor (callbacks) @@ -8,34 +14,41 @@ OV.ExportDialog = class { name : 'obj', formats : [ - { name : 'text', format : OV.FileFormat.Text, extension : 'obj' } + { name : 'text', type: OV.ExportType.Model, format : OV.FileFormat.Text, extension : 'obj' } ] }, { name : 'stl', formats : [ - { name : 'text', format : OV.FileFormat.Text, extension : 'stl' }, - { name : 'binary', format : OV.FileFormat.Binary, extension : 'stl' } + { name : 'text', type: OV.ExportType.Model, format : OV.FileFormat.Text, extension : 'stl' }, + { name : 'binary', type: OV.ExportType.Model, format : OV.FileFormat.Binary, extension : 'stl' } ] }, { name : 'ply', formats : [ - { name : 'text', format : OV.FileFormat.Text, extension : 'ply' }, - { name : 'binary', format : OV.FileFormat.Binary, extension : 'ply' } + { name : 'text', type: OV.ExportType.Model, format : OV.FileFormat.Text, extension : 'ply' }, + { name : 'binary', type: OV.ExportType.Model, format : OV.FileFormat.Binary, extension : 'ply' } ] }, { name : 'gltf', formats : [ - { name : 'text', format : OV.FileFormat.Text, extension : 'gltf' }, - { name : 'binary', format : OV.FileFormat.Binary, extension : 'glb' } + { name : 'text', type: OV.ExportType.Model, format : OV.FileFormat.Text, extension : 'gltf' }, + { name : 'binary', type: OV.ExportType.Model, format : OV.FileFormat.Binary, extension : 'glb' } ] }, { name : 'off', formats : [ - { name : 'text', format : OV.FileFormat.Text, extension : 'off' } + { name : 'text', type: OV.ExportType.Model, format : OV.FileFormat.Text, extension : 'off' } + ] + }, + { + name : 'png', + formats : [ + { name : 'current size', type: OV.ExportType.Image, width : null, height : null, extension : 'png' }, + { name : 'fixed size (1920x1080)', type: OV.ExportType.Image, width : 1920, height : 1080, extension : 'png' } ] } ]; @@ -46,7 +59,7 @@ OV.ExportDialog = class }; } - Show (model) + Show (model, viewer) { if (model === null) { let messageDialog = OV.ShowMessageDialog ( @@ -76,7 +89,7 @@ OV.ExportDialog = class return; } mainDialog.Hide (); - obj.ExportFormat (model); + obj.ExportFormat (model, viewer); } } ]); @@ -131,30 +144,41 @@ OV.ExportDialog = class } } - ExportFormat (model) + ExportFormat (model, viewer) { - let format = this.formatParameters.selectedFormat; - if (format === null) { + let selectedFormat = this.formatParameters.selectedFormat; + if (selectedFormat === null) { return; } - let obj = this; - let progressDialog = new OV.ProgressDialog (); - progressDialog.Show ('Exporting Model'); - OV.RunTaskAsync (function () { - let exporter = new OV.Exporter (); - let files = exporter.Export (model, format.format, format.extension); - if (files.length === 0) { - progressDialog.Hide (); - } else if (files.length === 1) { - progressDialog.Hide (); - let file = files[0]; - OV.DownloadArrayBufferAsFile (file.GetContent (), file.GetName ()); - } else if (files.length > 1) { - progressDialog.Hide (); - obj.ShowExportedFiles (files); + if (selectedFormat.type === OV.ExportType.Model) { + let obj = this; + let progressDialog = new OV.ProgressDialog (); + progressDialog.Show ('Exporting Model'); + OV.RunTaskAsync (function () { + let exporter = new OV.Exporter (); + let files = exporter.Export (model, selectedFormat.format, selectedFormat.extension); + if (files.length === 0) { + progressDialog.Hide (); + } else if (files.length === 1) { + progressDialog.Hide (); + let file = files[0]; + OV.DownloadArrayBufferAsFile (file.GetContent (), file.GetName ()); + } else if (files.length > 1) { + progressDialog.Hide (); + obj.ShowExportedFiles (files); + } + }); + } else if (selectedFormat.type === OV.ExportType.Image) { + let url = null; + if (selectedFormat.width === null || selectedFormat.height === null) { + let size = viewer.GetImageSize (); + url = viewer.GetImageAsDataUrl (size.width, size.height); + } else { + url = viewer.GetImageAsDataUrl (selectedFormat.width, selectedFormat.height); } - }); + OV.DownloadUrlAsFile (url, 'model.' + selectedFormat.extension); + } } ShowExportedFiles (files) diff --git a/website/o3dv/utils.js b/website/o3dv/utils.js index f886182..b761302 100644 --- a/website/o3dv/utils.js +++ b/website/o3dv/utils.js @@ -100,16 +100,22 @@ OV.CopyToClipboard = function (text) document.body.removeChild (input); }; -OV.DownloadArrayBufferAsFile = function (arrayBuffer, fileName) +OV.DownloadUrlAsFile = function (url, fileName) { let link = document.createElement ('a'); - link.href = OV.CreateObjectUrl (arrayBuffer); + link.href = url; link.download = fileName; document.body.appendChild (link); link.click (); document.body.removeChild (link); }; +OV.DownloadArrayBufferAsFile = function (arrayBuffer, fileName) +{ + let url = OV.CreateObjectUrl (arrayBuffer); + OV.DownloadUrlAsFile (url, fileName); +}; + OV.CreateIconButton = function (iconName, hoverIconName, title, link) { let buttonLink = $(''); diff --git a/website/o3dv/website.js b/website/o3dv/website.js index d3629ef..54487ae 100644 --- a/website/o3dv/website.js +++ b/website/o3dv/website.js @@ -285,7 +285,7 @@ OV.Website = class obj.dialog = dialog; } }); - exportDialog.Show (obj.model); + exportDialog.Show (obj.model, obj.viewer); }); AddButton (this.toolbar, 'embed', 'Get embedding code', true, function () { obj.dialog = OV.ShowEmbeddingDialog (importer, obj.importSettings, obj.viewer.GetCamera ()); From a99730a95f048290135afd812c3071e3f54c9562 Mon Sep 17 00:00:00 2001 From: Viktor Kovacs Date: Wed, 14 Apr 2021 19:51:20 +0200 Subject: [PATCH 03/49] Copy sharing url. --- .../images/toolbar/{embed.svg => share.svg} | 0 website/info/index.html | 6 +- website/o3dv/dialogs.js | 129 ++++++++++++------ website/o3dv/exportdialog.js | 2 +- website/o3dv/website.css | 48 ++++++- website/o3dv/website.js | 4 +- 6 files changed, 140 insertions(+), 49 deletions(-) rename website/assets/images/toolbar/{embed.svg => share.svg} (100%) diff --git a/website/assets/images/toolbar/embed.svg b/website/assets/images/toolbar/share.svg similarity index 100% rename from website/assets/images/toolbar/embed.svg rename to website/assets/images/toolbar/share.svg diff --git a/website/info/index.html b/website/info/index.html index 5a994b3..33a567a 100644 --- a/website/info/index.html +++ b/website/info/index.html @@ -173,7 +173,7 @@

Embedding the viewer

The website allows you to embed a 3D model in your page. It works only if your models are hosted on a web server. - To get the embedding code, click on the embedding button () in the toolbar. + To get the embedding code, click on the share model button () in the toolbar.

Embedding models hosted on GitHub

@@ -191,7 +191,7 @@ https://github.com/kovacsv/Online3DViewer/blob/master/test/testfiles/3ds/texture.png -
  • Click on OK, and if the model is loaded, click on the embed button in the toolbar ().
  • +
  • Click on OK, and if the model is loaded, click on the share button in the toolbar ().
  • @@ -210,7 +210,7 @@ https://www.dropbox.com/s/6dfk1jveevbofxm/texture.png?dl=0 -
  • Click on OK, and if the model is loaded, click on the embed button in the toolbar ().
  • +
  • Click on OK, and if the model is loaded, click on the share button in the toolbar ().
  • diff --git a/website/o3dv/dialogs.js b/website/o3dv/dialogs.js index 2cb6822..426c1b7 100644 --- a/website/o3dv/dialogs.js +++ b/website/o3dv/dialogs.js @@ -77,18 +77,27 @@ OV.ShowOpenUrlDialog = function (onOk) return dialog; }; -OV.ShowEmbeddingDialog = function (importer, importSettings, camera) +OV.ShowSharingDialog = function (importer, importSettings, camera) { - function AddCheckboxLine (parentDiv, text, onChange) + function AddCheckboxLine (parentDiv, text, id, onChange) { let line = $('
    ').addClass ('ov_dialog_table_row').appendTo (parentDiv); - let check = $('').attr ('type', 'checkbox').attr ('checked', 'true').appendTo (line); - $('').html (text).appendTo (line); + let check = $('').attr ('type', 'checkbox').attr ('checked', 'true').addClass ('ov_dialog_checkradio').attr ('id', id).appendTo (line); + $('