bz-slidepane OK + console started + intro loader

app/assets/sfx/intro.js

@@ -23,7 +23,7 @@ class Intro{
             new Promise((resolve, reject) => {
                 new RGBELoader()
                     .setPath('/app/assets/images/')
-                    .load('kloofendal_48d_partly_cloudy_puresky_2k.hdr', resolve, this.hdrProgress, reject)
+                    .load('kloofendal_48d_partly_cloudy_puresky_2k.hdr', resolve, null, reject)
             })
 
         const loadTexture1 = () => 
@@ -45,15 +45,6 @@ class Intro{
         this.Xcorrection = -0.02
     }
 
-    hdrProgress(xhr){
-        const pb = document.querySelector('div.progress')
-        if (xhr.lengthComputable) {
-            const percent = (xhr.loaded / xhr.total) * 100
-            pb.style.width = percent.toFixed(0)
-            if(percent.toFixed(0)>=99) pb.style.display = 'none'
-        } 
-    }
-
     initScene(LoadersResults){ console.log('initScene')
         let hdrTexture
         const [hdrResult, texResultP42, texResultEE] = LoadersResults
@@ -182,11 +173,13 @@ class Intro{
         }) 
 
         this.renderer.render(this.scene, this.camera)
+        document.querySelector('div.loading').style.display = 'none'
         this.canvas.classList.add('ready')
 
     }
 
     launch3DAnim(){ console.log('CSs finished, launching 3D anim')
+        document.getElementById('startbtn').style.display = 'block'
         this.nextAnim = Date.now()
         this.animate()
     }
@@ -228,7 +221,7 @@ class Intro{
         }    
         if (!this.planeEE) {
             const geo = new THREE.PlaneGeometry(planeWidth, planeHeight)
-            this.matEE = new THREE.MeshBasicMaterial({ map: this.backgroundTextureEE, transparent: false, alphaTest: 0.01, depthWrite:true, depthTest:true })
+            this.matEE = new THREE.MeshBasicMaterial({ map: this.backgroundTextureEE, transparent: false, alphaTest: 0.001, depthWrite:true, depthTest:true })
             this.matEE.defines = this.matEE.defines || {}
             this.matEE.defines.USE_UV = ""
             this.matEE.onBeforeCompile = shader => {

app/assets/styles/intro.css

@@ -1,3 +1,5 @@
+@import '/app/assets/styles/icons.css';
+
 body {
     display: flex; 
     justify-content: center;
@@ -36,14 +38,20 @@ canvas.intro3d.ready{
     40%   { opacity: 0.8; }
     100% { opacity: 1;   }
 }
-.progress{
-  position: absolute;
-  width: 100px;
-  height: 2px;
-  background: white;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+@keyframes spin {
+  0% { transform: rotate(0deg) ; }
+  100% { transform: rotate(360deg) ; }
+}
+.loading{
+    animation: spin 1s infinite linear;
+    font-family: 'glyphs';
+    color: #7E6;
+    font-size: 4em;;
+    z-index: 99999;  
+    position:absolute;
+    left:50%;
+    top:50%;
+    transform: translateX(-50%) translateY(-50%);
 }
 
 #startbtn{
@@ -59,8 +67,8 @@ canvas.intro3d.ready{
     box-shadow: 2px 2px 10px #BAFFEF, -2px -2px 10px #BAFFEF, -2px 0 10px #BAFFEF, 0 -2px 10px #BAFFEF;
     animation: startbtnanim 5s ease-out forwards;
     z-index: 99;
+    display: none;
 }
-
 #startbtn[disabled]{
     filter: brightness(.3);
 }