last fixs

Author: Pamavoc

assets/fonts/Etna-Black.woff

@@ -591,13 +591,52 @@
             "trackIdByPropPath": {
               "[\"opacity\"]": "EEA-KN9xQI"
             }
+          },
+          "ui": {
+            "trackData": {
+              "t0fd9M9B7d": {
+                "type": "BasicKeyframedTrack",
+                "__debugName": "ui:[\"opacity\"]",
+                "keyframes": [
+                  {
+                    "id": "ux8sJyf5ag",
+                    "position": 0,
+                    "connectedRight": true,
+                    "handles": [
+                      0.5,
+                      1,
+                      0.5,
+                      0
+                    ],
+                    "value": 1
+                  },
+                  {
+                    "id": "28ga0n2rZA",
+                    "position": 0.967,
+                    "connectedRight": true,
+                    "handles": [
+                      0.5,
+                      1,
+                      0.5,
+                      0
+                    ],
+                    "value": 0
+                  }
+                ]
+              }
+            },
+            "trackIdByPropPath": {
+              "[\"opacity\"]": "t0fd9M9B7d"
+            }
           }
         }
       }
     }
   },
   "definitionVersion": "0.4.0",
   "revisionHistory": [
+    "2RseZ4TqifIQ1-BB",
+    "9nYHEVVuF_vCrI56",
     "YtatyU_sqwzZQIqJ",
     "m_dLPZhxi5jaweqY",
     "8AWtL__tW7L3zOTE",

assets/fonts/Etna-Black.woff2

@@ -296,6 +296,7 @@
   },
   "definitionVersion": "0.4.0",
   "revisionHistory": [
+    "wSrlM7_GBkCIwiNs",
     "BgfyjdFlCLTInP5l",
     "Xlscy6aMkb86m6hZ",
     "sTDvJIbJYbtnzNjB"

assets/fonts/Etna-BlackItalic.woff

@@ -0,0 +1,8 @@
+@font-face {
+    font-family: 'Matrix Code NFI';
+    src: url('@/assets/fonts/MatrixCodeNFI.woff2') format('woff2'),
+        url('@/assets/fonts/MatrixCodeNFI.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}

assets/fonts/Etna-BlackItalic.woff2

@@ -0,0 +1 @@
+@import './fonts.scss';

assets/fonts/Etna-Bold.woff

@@ -1,6 +1,7 @@
 import { getProject, types as t } from '@theatre/core'
 import { ObjectType } from '@/classes/interfaces/ObjectType';
 import introductionState from '@/assets/states-animations/Introduction.theatre-project-state.json'
+import microState from '@/assets/states-animations/Micro-anim.theatre-project-state.json'
 import studio from "@theatre/studio"
 
 export default class Animations {
@@ -11,11 +12,12 @@ export default class Animations {
   canvas: any
   ui: any
   uiParams: any
-  projects: Array<any>
+  btnParams: any
+  anims: Array<any>
 
   constructor() {
 
-    this.projects = []
+    this.anims = []
     this.studio = studio
     this.canvas = document.querySelector(".container-canvas canvas")
     this.ui = document.querySelector(".ui")
@@ -40,12 +42,17 @@ export default class Animations {
     };
 
 
-    this.uiParams = {
+    this.btnParams = {
       opacity: t.number(1, { range: [0, 1] }),
       width: t.number(100, { range: [0, 100] }),
       transform: { x:0, y:0 }
     }
 
+    this.uiParams = {
+      opacity: t.number(1, { range: [0, 1] }),
+      width: t.number(100, { range: [0, 100] }),
+   }
+
     this.studio.initialize()
 
     if(window.location.pathname === '/studio') {
@@ -55,9 +62,13 @@ export default class Animations {
     }
 
 
+
   }
 
-  
+  createAnimations(camera) {
+    this.createStartAnim()
+    this.createIntroduction(camera)
+  }
 
 
   createProject(project_name, project_state?: ObjectType) {
@@ -106,16 +117,16 @@ export default class Animations {
       sheet = this.createSheet(project, sheet_name)
     }
 
-    this.projects.push({ project_name, project, sheet })
+    this.anims.push({ project_name, project, sheet })
 
     return { project, sheet }
   }
 
 
-  createMicroInteraction() {
+  createStartAnim() {
     //const project = this.createProject('Micro-anim')
     //const sheet = this.createSheet(project, 'Button Animation')
-    const { sheet } = this.createProjectAndSheet('Micro-anim', 'Button Animation')
+    const { sheet } = this.createProjectAndSheet('Micro-anim', 'Button Animation', { state: microState })
 
 
     this.createTheatreObject(
@@ -125,33 +136,33 @@ export default class Animations {
           {
             name: "button p",
             type: "2d", // dom 
-            properties: this.uiParams,
+            properties: this.btnParams,
             real: this.ui.querySelector('.button-start p'),
           },
           {
             name: "border-bottom",
             type: "2d", // dom 
-            properties: this.uiParams,
+            properties: this.btnParams,
             real: this.ui.querySelector('.border-bottom'),
           },
           {
             name: "border-top",
             type: "2d", // dom 
-            properties: this.uiParams,
+            properties: this.btnParams,
             real: this.ui.querySelector('.border-top'),
           },
         ],
     })
 
-   // this.playAnimations(project, sheet, 1)
+  
   }
 
   createIntroduction(camera) {
    // const project = this.createProject('Introduction', { state:  introductionState })
     // const sheet = this.createSheet(project, 'Camera Animation', '/sounds/initialisation.mp3')
    // const sheet = this.createSheet(project, 'Camera Animation')
 
-    const { sheet, project } = this.createProjectAndSheet('Introduction', 'Camera Animation', { state:  introductionState })
+    const { sheet } = this.createProjectAndSheet('Introduction', 'Camera Animation', { state:  introductionState })
 
     this.createTheatreObject(
       {
@@ -179,9 +190,14 @@ export default class Animations {
       }
     )
 
-    this.playAnimations(project, sheet, 1)
+    //this.playAnimations(project, sheet, 1)
   }
 
+  play(name, iterationCount) {
+    const { project, sheet } = this.anims.find(anim => anim.project_name === name)
+    project.ready.then(() => sheet.sequence.play({ iterationCount: iterationCount }))
+  }
+  
 
 
   createEnding() {
@@ -259,7 +275,9 @@ export default class Animations {
   }
 
 
+
   playAnimations(project, sheet, iterationCount: number) {
+   
     project.ready.then(() => sheet.sequence.play({ iterationCount: iterationCount }))
   }
 }

assets/fonts/Etna-Bold.woff2

@@ -12,7 +12,6 @@ export default class Scene {
   webgl: any;
   uniforms: any;
   material: any;
-  debug: any
   params: any
   lights: any
   postProcess: any

assets/fonts/Etna-BoldItalic.woff

@@ -23,7 +23,7 @@ export default class Stats {
 		this.statsEl.showPanel(0);
         document.body.appendChild(this.statsEl.dom);
 		this.webglInfos = document.createElement('div');
-		this.webglInfos.classList.add('webgl-infos');
+		this.webglInfos.classList.add('webgl-infos txt_uppercase');
         document.querySelector('.ui').appendChild(this.webglInfos);
 
 	}

assets/fonts/Etna-BoldItalic.woff2

@@ -58,7 +58,7 @@ export default class WebGL {
     // MANAGERS
     this.cameraManager = new CameraManager({ webgl: this})
     this.animations = useAnimations()
-  
+    this.animations.createAnimations(this.camera)
 
     // RAYCASTER
     this.raycast = new Raycaster(
@@ -71,7 +71,7 @@ export default class WebGL {
     // MATERIALS
     this.materials = new Materials({ webgl: this })
     this.setEvents();
-    this.loadMap('trinity-2.glb')
+    this.loadMap('trinity-3.glb')
 
 
     if (/debug/.test(window.location.href)) {
@@ -101,7 +101,6 @@ export default class WebGL {
   }
 
 
-
   removeOldMap = async () => {
     const old_map = this.scene.instance.children.find(child => child.name === "Scene")
     this.scene.instance.remove(old_map)
@@ -120,30 +119,38 @@ export default class WebGL {
     })
 
 
+   
+
     this.emitter.on('audio_started', () => {
 
       // trigger anim webgl
       // const target = new THREE.Vector3(0, 1, 0)
       // const cube = this.scene.instance.getObjectByProperty('name', 'cube-base');
       // console.log(cube)
+      this.animations.play('Micro-anim')
 
-      this.animations.createMicroInteraction()
-      this.animations.createIntroduction(this.camera)
-      this.materials.playVideos()
-      this.audio_manager = useAudio(this.emitter)
-     
-      this.audio_manager.start( {
-           onBeat: ()=> {
-
-            const average = this.audio_manager.values.reduce((a, b) => a + b, 0) / this.audio_manager.values.length;
-            this.emitter.emit('beat_sent', average)
-           }, 
-           live: false,
-           playlist: ['/sounds/initialisation.mp3', '/sounds/megatron-ss.mp3', '/sounds/burningman-s.mp3']
-      })    
 
+    
+      setTimeout(() => {
+        // this.animations.createIntroduction(this.camera)
+        this.animations.play('Introduction')
+
+        this.materials.playVideos()
+        this.audio_manager = useAudio(this.emitter)
+       
+        this.audio_manager.start( {
+             onBeat: ()=> {
 
-      this.audio_started = true 
+              const average = this.audio_manager.values.reduce((a, b) => a + b, 0) / this.audio_manager.values.length;
+              this.emitter.emit('beat_sent', average)
+             }, 
+             live: false,
+             playlist: ['/sounds/initialisation.mp3', '/sounds/megatron-ss.mp3', '/sounds/burningman-s.mp3']
+        })    
+        this.audio_started = true 
+      }, 2300);
+    
+
       // window.audio = this.audio_manager
 
     })