From 74e130e8d6cce82b3faa4aab507af0fe695df08e Mon Sep 17 00:00:00 2001 From: Mathias Kanzler Date: Mon, 12 Aug 2024 16:48:45 +0200 Subject: [PATCH 01/10] Mobile user interface draft --- index.html | 614 ++++++++++++++++++++++++----------------------- src/ui/sass.scss | 3 +- 2 files changed, 311 insertions(+), 306 deletions(-) diff --git a/index.html b/index.html index a1de7704..6cc06867 100644 --- a/index.html +++ b/index.html @@ -86,9 +86,9 @@ - + -
+
No Canvas! @@ -97,329 +97,333 @@ @click="toggleFullscreen()" ref="fullscreenIcon" class="maximizeCanvasIcon" width="30px">
- -
- -
-
-
-
- - - -

- Drag and drop files here -

-

- Supported files: glTF, glb & hdr -

+
+
+ +
+ +
+
+
+ + + +

+ Drag and drop files here +

+

+ Supported files: glTF, glb & hdr +

+
-
- - - - + +
+ +

Models

+ + + + + + + + + + + + + + + + + + + - - - - -
- + + + + {{ item }} + + + + + + +
+ - - + +
+ +

Display

+ + Image Based + + Punctual + Lighting + + + + 0.01 + 1 + 100 + 10000 + + + + Environment + Map + Blur + + + + + + + + - - {{ environments[name].title }} - - + + + + + + + + + {{ environments[name].title }} + + + - -
- +
+ - - + +
+ +

Animation

+ + + + + + + + + {{ animation.title }} + + - -
- +
+ - - - -
- -

Model Credits

-
Copyright:
{{ assetCopyright }}
-
Generated by:
{{ assetGenerator }}
-

{{ xmp ? "XMP" : "" }}

- -
- - - - - - - -
- -

Advanced Controls

- - - - - - - - - - - - - 64 - 1 - 0.001 - 0 - - - - - - - - Skinning -
- Morphing - - - - - KHR_materials_clearcoat - - KHR_materials_sheen - - KHR_materials_transmission - - KHR_materials_diffuse_transmission - KHR_materials_volume - KHR_materials_ior - KHR_materials_specular - KHR_materials_emissive_strength - KHR_materials_iridescence - KHR_materials_anisotropy - KHR_materials_dispersion - - - - - -
- + - + +
diff --git a/src/ui/sass.scss b/src/ui/sass.scss index 9d2c2c95..43a817a4 100644 --- a/src/ui/sass.scss +++ b/src/ui/sass.scss @@ -331,8 +331,9 @@ button.button float: right; margin-top: -50px; padding-right: 20px; - overflow: overlay; + padding-left: 20px; z-index: 2; + position: absolute; } .canvasUIMaximize:hover { overflow: visible; From f8794f2bfc4c33137a953b6779f3ca6e6321cf73 Mon Sep 17 00:00:00 2001 From: Mathias Kanzler Date: Wed, 14 Aug 2024 11:32:44 +0200 Subject: [PATCH 02/10] Initialize user interface based on current screen size --- index.html | 7 ++++--- src/ui/ui.js | 30 +++++++++++++++--------------- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 6cc06867..119b79f1 100644 --- a/index.html +++ b/index.html @@ -98,9 +98,10 @@
-
- -
+ +
+
+
diff --git a/src/ui/ui.js b/src/ui/ui.js index 1423f775..66f30e76 100644 --- a/src/ui/ui.js +++ b/src/ui/ui.js @@ -100,11 +100,11 @@ const appCreated = createApp({ emissiveStrengthEnabled: true, activeTab: 0, - tabsHidden: false, + tabsHidden: true, loadingComponent: undefined, showDropDownOverlay: false, uploadedHDR: undefined, - uiVisible: true, + uiVisible: false, // these are handles for certain ui change related things @@ -117,6 +117,14 @@ const appCreated = createApp({ this.selectedAnimationsChanged.next(newValue); } }, + beforeMount: function(){ + // Definition of mobile: https://bulma.io/documentation/start/responsiveness/ + if(window.innerWidth > 768) { + this.uiVisible=true; + } else { + this.uiVisible=false; + } + }, mounted: function() { // remove input class from color picker (added by default by buefy) @@ -249,11 +257,9 @@ const appCreated = createApp({ const file = e.target.files[0]; this.addEnvironmentChanged.next(file); }, - hide() { - this.uiVisible = false; - }, - show() { - this.uiVisible = true; + + toggleUI() { + this.uiVisible = !this.uiVisible; }, } }); @@ -298,19 +304,13 @@ export const app = appCreated.mount('#app'); const canvasUI = createApp({ data() { return { - fullscreen: false, timer: null }; }, methods: { toggleFullscreen() { - if (this.fullscreen) { - app.show(); - } else { - app.hide(); - } - this.fullscreen = !this.fullscreen; + app.toggleUI(); }, mouseMove() { this.$refs.fullscreenIcon.style.display = "block"; @@ -319,7 +319,7 @@ const canvasUI = createApp({ setFullscreenIconTimer() { clearTimeout(this.timer); this.timer = window.setTimeout( () => { - this.$refs.fullscreenIcon.style.display = "none"; + // this.$refs.fullscreenIcon.style.display = "none"; }, 1000); } } From 4a72f0e0584cc7bd29b7c69682460fd2a38fb09e Mon Sep 17 00:00:00 2001 From: Mathias Kanzler Date: Wed, 14 Aug 2024 11:34:09 +0200 Subject: [PATCH 03/10] Update submodule --- glTF-Sample-Renderer | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/glTF-Sample-Renderer b/glTF-Sample-Renderer index 74ac6560..da7867b3 160000 --- a/glTF-Sample-Renderer +++ b/glTF-Sample-Renderer @@ -1 +1 @@ -Subproject commit 74ac656068acda7b5cd96b6c4d977e27466a8832 +Subproject commit da7867b3d6c30ec44781e7cf2bc5973b0018eeeb From 0efd7b9a81eade24219a552c8fd5d8b303809d06 Mon Sep 17 00:00:00 2001 From: Mathias Kanzler Date: Tue, 20 Aug 2024 12:47:55 +0200 Subject: [PATCH 04/10] Optimize control for various screen widths --- index.html | 126 ++++++++++++++++++++++++++++++----------------- src/ui/sass.scss | 2 +- src/ui/ui.js | 37 +++++++++----- 3 files changed, 107 insertions(+), 58 deletions(-) diff --git a/index.html b/index.html index 119b79f1..b09af8a1 100644 --- a/index.html +++ b/index.html @@ -89,18 +89,22 @@
-
- No - Canvas! -
- -
+
+ + + No Canvas! + +
+ +
+
-
-
+
+ +
- + + - - @@ -241,9 +225,9 @@

Models

@click="collapseActiveTab($event, 1)">

Display

- Image Based + Image Based - Punctual + Punctual Lighting @@ -256,15 +240,15 @@

Display

 - Environment + Environment Map - Blur - +