From b3c6ba01380cdcc917295607ad24649bd1753791 Mon Sep 17 00:00:00 2001 From: jackmcintosh Date: Thu, 18 Jul 2019 13:13:59 +0200 Subject: [PATCH 1/8] added speed test information when downloading glb files --- src/index.js | 29 +++++++++++++++++++++++++---- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 6564a32..cfbf6c1 100644 --- a/src/index.js +++ b/src/index.js @@ -73,7 +73,7 @@ module.exports = class Face3D { // Create loader this.loader = createThreeDotLoader() - this.loader.style.cssText = "position: absolute; pointer-events: none; bottom: 25%; left: calc(50% - 35px); width: 70px; background-color: rgba(255, 255, 255, 0.95); border-radius: 4px; " + this.loader.style.cssText = "position: absolute; pointer-events: none; bottom: 84px; left: calc(50% - 50px); width: 100px; background-color: rgba(255, 255, 255, 0.95); border-radius: 4px; font-size:12px " this.element.appendChild(this.loader) // Prepare 3D @@ -169,12 +169,16 @@ module.exports = class Face3D { var scenePromise = isGLB ? this.loadGLTFScene(resourceURL) : V3DLoader.load(resourceURL).then(scene => ({ scene })) + // Load file scenePromise.then(({ scene, animations }) => { + + + // Hide loader and placeholder image if (this.placeholderImg.parentNode) this.placeholderImg.parentNode.removeChild(this.placeholderImg) @@ -313,18 +317,35 @@ module.exports = class Face3D { /** @private Called to load a GLTF scene */ loadGLTFScene(url) { - + let speedDisplay = document.createElement('div') + speedDisplay.innerText = 'Speed test in here' + speedDisplay.style.cssText = 'width: 300px; height: 300px; background-color: #000; color:#fff; z-index: 2000; margin: 0 auto; position:absolute; bottom: 100px' + this.element.append(this.loader) + let startTime = Date.now() + // Return promise return new Promise((onSuccess, onFail) => { - + // Load scene var ldr = new THREE.GLTFLoader() - ldr.load(url, onSuccess, null, onFail) + ldr.load(url, onSuccess, (e) => { + let kbps = (e.loaded / ((Date.now() - startTime) / 1000) / 1000).toFixed(2) + + let mbps = (kbps / 1000).toFixed(2) + let percent = (e.loaded / e.total) * 100 + this.loader.style.padding = '2px' + this.loader.innerHTML = `Loading: ${Math.floor(percent)}%
${(kbps > 999) ? mbps + ' mb/s' : kbps + ' kb/s'}` + + }, onFail) + + }) } + + /** @private @override Called when the face is removed */ onUnload() { From 41b768e6e8f974c78287e05941cd41af37213c91 Mon Sep 17 00:00:00 2001 From: jackmcintosh Date: Thu, 18 Jul 2019 13:18:11 +0200 Subject: [PATCH 2/8] removed unused div --- src/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index cfbf6c1..bf5edb4 100644 --- a/src/index.js +++ b/src/index.js @@ -317,9 +317,8 @@ module.exports = class Face3D { /** @private Called to load a GLTF scene */ loadGLTFScene(url) { - let speedDisplay = document.createElement('div') - speedDisplay.innerText = 'Speed test in here' - speedDisplay.style.cssText = 'width: 300px; height: 300px; background-color: #000; color:#fff; z-index: 2000; margin: 0 auto; position:absolute; bottom: 100px' + + this.element.append(this.loader) let startTime = Date.now() From 250d6296f7f558e93b6ebe9e92a2b7da3241c55c Mon Sep 17 00:00:00 2001 From: jackmcintosh Date: Thu, 18 Jul 2019 15:47:21 +0200 Subject: [PATCH 3/8] added time and average keys --- src/index.js | 32 ++++++++++++++++++++++---------- 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/src/index.js b/src/index.js index bf5edb4..4753f4b 100644 --- a/src/index.js +++ b/src/index.js @@ -73,7 +73,7 @@ module.exports = class Face3D { // Create loader this.loader = createThreeDotLoader() - this.loader.style.cssText = "position: absolute; pointer-events: none; bottom: 84px; left: calc(50% - 50px); width: 100px; background-color: rgba(255, 255, 255, 0.95); border-radius: 4px; font-size:12px " + this.loader.style.cssText = "position: absolute; pointer-events: none; bottom: 64px; left: calc(50% - 75px); width: 150px; background-color: rgba(255, 255, 255, 0.95); border-radius: 4px; font-size:12px " this.element.appendChild(this.loader) // Prepare 3D @@ -182,8 +182,10 @@ module.exports = class Face3D { // Hide loader and placeholder image if (this.placeholderImg.parentNode) this.placeholderImg.parentNode.removeChild(this.placeholderImg) - if (this.loader.parentNode) this.loader.parentNode.removeChild(this.loader) - + if (this.loader.parentNode) { + setTimeout(() => {this.loader.parentNode.removeChild(this.loader)}, 5000) + } + // Display scene this.scene = scene @@ -316,31 +318,41 @@ module.exports = class Face3D { } /** @private Called to load a GLTF scene */ - loadGLTFScene(url) { + loadGLTFScene(url) { this.element.append(this.loader) let startTime = Date.now() - + let speeds = [] + // Return promise return new Promise((onSuccess, onFail) => { + // Load scene var ldr = new THREE.GLTFLoader() - ldr.load(url, onSuccess, (e) => { + ldr.load(url, onSuccess, (e) => { let kbps = (e.loaded / ((Date.now() - startTime) / 1000) / 1000).toFixed(2) - + if(kbps !== 0) + speeds.push(kbps) let mbps = (kbps / 1000).toFixed(2) let percent = (e.loaded / e.total) * 100 this.loader.style.padding = '2px' - this.loader.innerHTML = `Loading: ${Math.floor(percent)}%
${(kbps > 999) ? mbps + ' mb/s' : kbps + ' kb/s'}` - + let time = new Date(null) + time.setSeconds(Math.abs((Date.now() - startTime) / 1000).toFixed(0)) + let timeSeconds = (time.getSeconds() < 10 ) ? '0'+time.getSeconds() : time.getSeconds() + let timeMinutes = (time.getMinutes() < 10 ) ? '0'+time.getMinutes() : time.getMinutes() + // add to the loader text + this.loader.innerHTML = `Loading: ${Math.floor(percent)}%
Average: ${(kbps > 999) ? mbps + ' mb/s' : kbps + ' kb/s'}
Total Time: ${timeMinutes+':'+timeSeconds}` + }, onFail) + + }) - + } From f67db75da841b869a9d2a138983350bf330faaaa Mon Sep 17 00:00:00 2001 From: jackmcintosh Date: Fri, 19 Jul 2019 13:51:22 +0200 Subject: [PATCH 4/8] added milliseconds and total file size to download display --- src/index.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index aa6a81d..88e15b0 100644 --- a/src/index.js +++ b/src/index.js @@ -325,14 +325,19 @@ module.exports = class Face3D { speeds.push(kbps) let mbps = (kbps / 1000).toFixed(2) let percent = (e.loaded / e.total) * 100 + let total = (e.total / 1000 / 1000).toFixed(2) this.loader.style.padding = '2px' let time = new Date(null) - time.setSeconds(Math.abs((Date.now() - startTime) / 1000).toFixed(0)) + time.setSeconds(Math.abs((Date.now() - startTime) / 1000)) + + let seconds = Math.abs((Date.now() - startTime) / 1000) + let timeMilliseconds = Math.floor((seconds % 1) * 1000).toString().padStart(3, '0') let timeSeconds = (time.getSeconds() < 10 ) ? '0'+time.getSeconds() : time.getSeconds() let timeMinutes = (time.getMinutes() < 10 ) ? '0'+time.getMinutes() : time.getMinutes() + // add to the loader text - this.loader.innerHTML = `Loading: ${Math.floor(percent)}%
Average: ${(kbps > 999) ? mbps + ' mb/s' : kbps + ' kb/s'}
Total Time: ${timeMinutes+':'+timeSeconds}` - + this.loader.innerHTML = `Loading: ${Math.floor(percent)}% of ${total} mb
Average: ${(kbps > 999) ? mbps + ' mb/s' : kbps + ' kb/s'}
Total Time: ${timeMinutes}:${timeSeconds}.${timeMilliseconds}` + }, onFail) From 866b8e46871f47114c83642ea7315503bef77072 Mon Sep 17 00:00:00 2001 From: jackmcintosh Date: Wed, 24 Jul 2019 11:57:57 +0200 Subject: [PATCH 5/8] removed timeout of speed stats --- src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 88e15b0..045f5cd 100644 --- a/src/index.js +++ b/src/index.js @@ -170,9 +170,9 @@ module.exports = class Face3D { // Hide loader and placeholder image if (this.placeholderImg.parentNode) this.placeholderImg.parentNode.removeChild(this.placeholderImg) - if (this.loader.parentNode) { - setTimeout(() => {this.loader.parentNode.removeChild(this.loader)}, 5000) - } + // if (this.loader.parentNode) { + // setTimeout(() => {this.loader.parentNode.removeChild(this.loader)}, 5000) + // } // Display scene this.scene = scene From e7ab29869bdd780a6123a2ef71c2d9d7da423b0e Mon Sep 17 00:00:00 2001 From: kevinvz Date: Wed, 4 Dec 2019 13:26:51 +0200 Subject: [PATCH 6/8] added fade animation to activated image --- src/index.js | 55 +++++++++++++++++++++++++++------------------------- 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/src/index.js b/src/index.js index 045f5cd..086a91d 100644 --- a/src/index.js +++ b/src/index.js @@ -18,7 +18,7 @@ const CAMERA_DISTANCE_MULTIPLIER = 1 module.exports = class Face3D { - constructor (vatomView, vatom, face) { + constructor(vatomView, vatom, face) { // Store info this.vatomView = vatomView @@ -62,7 +62,7 @@ module.exports = class Face3D { // Create placeholder image this.placeholderImg = document.createElement("div") - this.placeholderImg.style.cssText = "position: absolute; pointer-events: none; top: 0px; left: 0px; width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; " + this.placeholderImg.style.cssText = "transition: opacity .5s ease-out; opacity: 1; position: absolute; pointer-events: none; top: 0px; left: 0px; width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; " this.element.appendChild(this.placeholderImg) // Find correct image resource to display @@ -162,18 +162,21 @@ module.exports = class Face3D { var isGLB = (resource.value.value || '').toLowerCase().indexOf(".v3d") == -1 // Load scene - Promise.resolve(this.vatomView.blockv.UserManager.encodeAssetProvider(resource.value.value || '')).then(resourceURL => - isGLB - ? this.loadGLTFScene(resourceURL) + Promise.resolve(this.vatomView.blockv.UserManager.encodeAssetProvider(resource.value.value || '')).then(resourceURL => + isGLB + ? this.loadGLTFScene(resourceURL) : V3DLoader.load(resourceURL).then(scene => ({ scene })) - ).then(({ scene, animations }) => { + ).then(async ({ scene, animations }) => { + // Fade out animation for activated image + const setTimeoutPromise = ms => new Promise(resolve => setTimeout(resolve, ms)) + await setTimeoutPromise(500).then(this.placeholderImg.style.cssText += "opacity: 0") // Hide loader and placeholder image if (this.placeholderImg.parentNode) this.placeholderImg.parentNode.removeChild(this.placeholderImg) // if (this.loader.parentNode) { // setTimeout(() => {this.loader.parentNode.removeChild(this.loader)}, 5000) // } - + // Display scene this.scene = scene @@ -306,49 +309,49 @@ module.exports = class Face3D { } /** @private Called to load a GLTF scene */ - loadGLTFScene(url) { - - + loadGLTFScene(url) { + + this.element.append(this.loader) let startTime = Date.now() let speeds = [] // Return promise return new Promise((onSuccess, onFail) => { - + // Load scene var ldr = new THREE.GLTFLoader() - ldr.load(url, onSuccess, (e) => { + ldr.load(url, onSuccess, (e) => { let kbps = (e.loaded / ((Date.now() - startTime) / 1000) / 1000).toFixed(2) - if(kbps !== 0) - speeds.push(kbps) + if (kbps !== 0) + speeds.push(kbps) let mbps = (kbps / 1000).toFixed(2) let percent = (e.loaded / e.total) * 100 let total = (e.total / 1000 / 1000).toFixed(2) this.loader.style.padding = '2px' let time = new Date(null) time.setSeconds(Math.abs((Date.now() - startTime) / 1000)) - + let seconds = Math.abs((Date.now() - startTime) / 1000) let timeMilliseconds = Math.floor((seconds % 1) * 1000).toString().padStart(3, '0') - let timeSeconds = (time.getSeconds() < 10 ) ? '0'+time.getSeconds() : time.getSeconds() - let timeMinutes = (time.getMinutes() < 10 ) ? '0'+time.getMinutes() : time.getMinutes() - + let timeSeconds = (time.getSeconds() < 10) ? '0' + time.getSeconds() : time.getSeconds() + let timeMinutes = (time.getMinutes() < 10) ? '0' + time.getMinutes() : time.getMinutes() + // add to the loader text - this.loader.innerHTML = `Loading: ${Math.floor(percent)}% of ${total} mb
Average: ${(kbps > 999) ? mbps + ' mb/s' : kbps + ' kb/s'}
Total Time: ${timeMinutes}:${timeSeconds}.${timeMilliseconds}` - + //this.loader.innerHTML = `Loading: ${Math.floor(percent)}% of ${total} mb
Average: ${(kbps > 999) ? mbps + ' mb/s' : kbps + ' kb/s'}
Total Time: ${timeMinutes}:${timeSeconds}.${timeMilliseconds}` + }, onFail) - - - + + + }) - + } - + /** @private @override Called when the face is removed */ onUnload() { @@ -416,7 +419,7 @@ module.exports = class Face3D { this.animation && this.animation.update(delta) // Do render - + this.renderer.render(this.scene, this.camera) From 46616fd34947b9ba06ea361aa3ea79200a09c68d Mon Sep 17 00:00:00 2001 From: kevinvz Date: Wed, 4 Dec 2019 14:26:44 +0200 Subject: [PATCH 7/8] conflicts resolved --- src/index.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index c42a78b..8fe3389 100644 --- a/src/index.js +++ b/src/index.js @@ -161,15 +161,9 @@ module.exports = class Face3D { var isGLB = (resource.value.value || '').toLowerCase().indexOf(".v3d") == -1 // Load scene -<<<<<<< HEAD Promise.resolve(this.vatomView.blockv.UserManager.encodeAssetProvider(resource.value.value || '')).then(resourceURL => isGLB ? this.loadGLTFScene(resourceURL) -======= - return Promise.resolve(this.vatomView.blockv.UserManager.encodeAssetProvider(resource.value.value || '')).then(resourceURL => - isGLB - ? this.loadGLTFScene(resourceURL) ->>>>>>> dev : V3DLoader.load(resourceURL).then(scene => ({ scene })) ).then(async ({ scene, animations }) => { // Fade out animation for activated image @@ -285,7 +279,7 @@ module.exports = class Face3D { // Create animation manager this.animation = new AnimationManager(this.scene, animations, this.options.animation_rules, this.vatom.payload) - }).then ( e => { this.render() }) + }).then(e => { this.render() }) } From 5568ae86314ddf4d53cd27359966dee585a295fa Mon Sep 17 00:00:00 2001 From: kevinvz Date: Thu, 5 Dec 2019 10:47:03 +0200 Subject: [PATCH 8/8] added return statement as suggested in previous PR --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 8fe3389..08672ac 100644 --- a/src/index.js +++ b/src/index.js @@ -161,7 +161,7 @@ module.exports = class Face3D { var isGLB = (resource.value.value || '').toLowerCase().indexOf(".v3d") == -1 // Load scene - Promise.resolve(this.vatomView.blockv.UserManager.encodeAssetProvider(resource.value.value || '')).then(resourceURL => + return Promise.resolve(this.vatomView.blockv.UserManager.encodeAssetProvider(resource.value.value || '')).then(resourceURL => isGLB ? this.loadGLTFScene(resourceURL) : V3DLoader.load(resourceURL).then(scene => ({ scene }))