diff --git a/src/index.js b/src/index.js
index 6bb290f..08672ac 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
@@ -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: 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
@@ -161,15 +161,20 @@ module.exports = class Face3D {
var isGLB = (resource.value.value || '').toLowerCase().indexOf(".v3d") == -1
// Load scene
- return 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)
: 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) this.loader.parentNode.removeChild(this.loader)
+ // if (this.loader.parentNode) {
+ // setTimeout(() => {this.loader.parentNode.removeChild(this.loader)}, 5000)
+ // }
// Display scene
this.scene = scene
@@ -274,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() })
}
@@ -305,17 +310,48 @@ module.exports = class Face3D {
/** @private Called to load a GLTF scene */
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, null, onFail)
+ 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
+ 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()
+
+ // 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}`
+
+ }, onFail)
+
+
+
+
})
}
+
+
/** @private @override Called when the face is removed */
onUnload() {
@@ -382,7 +418,7 @@ module.exports = class Face3D {
this.animation && this.animation.update(delta)
// Do render
-
+
this.renderer.render(this.scene, this.camera)