new branch

Author: Pamavoc

assets/glsl/transitions/camera.frag

@@ -0,0 +1,5 @@
+uniform float uAlpha;
+
+void main() {
+  gl_FragColor = vec4(0.0, 0.0, 0.0, uAlpha);
+}

assets/glsl/transitions/camera.vert

@@ -0,0 +1,5 @@
+void main() {
+  vec3 nPos = position;
+  nPos.z = -1.;
+  gl_Position = vec4(nPos, 1.0);
+}

classes/Animations.ts

@@ -1,45 +1,72 @@
-//import { getProject } from '@theatre/core';
+import { getProject, types as t } from '@theatre/core'
+import { ObjectType } from '@/classes/interfaces/ObjectType';
+
 //import studio from '@theatre/studio';
 import gsap from 'gsap'
 
 
 export default class Animations {
-  constructor() {
 
+  webgl: any
+  vector3D: any
 
+  constructor(webgl) {
+
+    this.webgl = webgl
+
+    
+    const nudgableNumber = (defaultValue) => t.number(defaultValue, { nudgeMultiplier: 0.01 });
+
+    this.vector3D = {
+      x: nudgableNumber(0),
+      y: nudgableNumber(0),
+      z: nudgableNumber(0)
+    };
 
-   // studio.initialize();
-   // console.log(studio);
+    if(window.location.pathname === "/studio") {
 
-    //const project = this.createProject('THREE.js x Theatre.js');
-    //const sheet = this.createSheet(project, 'Animated scene');
+      import('@theatre/studio').then(studio => {
+        studio.default.initialize() //.initialize()  
+      });
+     
+      
+    }
+   
   }
 
+
+  // gsap shit
   createTimeline() {
     const tl = gsap.timeline({ onUpdate: this.onUpdate })
     return tl;
   }
 
+
+
+
   start(camera, target) {
-    const tl = gsap.timeline({ 
-      onUpdate: ()=> {
-       camera.lookAt(target)
-    } 
-   })
 
 
-    tl.to('.button-start', { y: -10, opacity: 0, duration: 0.4})
-    tl.to('canvas', { opacity: 1, duration: 0.8, ease: 'power4.inOut'})
 
-    tl.to(camera.position, { x: 12, y: 0.5, z: -6, ease: 'power2.inOut', duration: 5 })
-    tl.to(camera.position, { x: 11, y: 3, z: 8, ease: 'power2.out', duration: 10 }, 7)
-    tl.to(camera.position, { z: "-=5", ease: 'power2.out', duration: 4 }, 18)
-    tl.to(camera.position, { z: "+=5", ease: 'power2.out', duration: 4 }, 22)
-    tl.to(camera.position, { x: 12, y: 0.5, z: -6, ease: 'power2.out', duration: 4 }, 24)
-    tl.to(camera.position, { x: 10, y: 1, z: -3, ease: 'power2.out', duration: 4 }, 26)
-    //tl.to(camera.rotation, { x: 0.612, y: 1.41, z: 0.60,  ease: 'power4.inOut', duration: 4}) 
-    // tl.to(camera.quaternion, { x: 0.612, y: 1.41, z: 0.60, w: 0  ease: 'power4.inOut', duration: 4}) 
-    tl.to('.ui', { display: 'none'}, 2)
+  //   const tl = gsap.timeline({ 
+  //     onUpdate: ()=> {
+  //      camera.lookAt(target)
+  //   } 
+  //  })
+
+
+    // tl.to('.button-start', { y: -10, opacity: 0, duration: 0.4})
+    // tl.to('canvas', { opacity: 1, duration: 0.8, ease: 'power4.inOut'})
+
+    // tl.to(camera.position, { x: 12, y: 0.5, z: -6, ease: 'power2.inOut', duration: 5 })
+    // tl.to(camera.position, { x: 11, y: 3, z: 8, ease: 'power2.out', duration: 10 }, 7)
+    // tl.to(camera.position, { z: "-=5", ease: 'power2.out', duration: 4 }, 18)
+    // tl.to(camera.position, { z: "+=5", ease: 'power2.out', duration: 4 }, 22)
+    // tl.to(camera.position, { x: 12, y: 0.5, z: -6, ease: 'power2.out', duration: 4 }, 24)
+    // tl.to(camera.position, { x: 10, y: 1, z: -3, ease: 'power2.out', duration: 4 }, 26)
+    // //tl.to(camera.rotation, { x: 0.612, y: 1.41, z: 0.60,  ease: 'power4.inOut', duration: 4}) 
+    // // tl.to(camera.quaternion, { x: 0.612, y: 1.41, z: 0.60, w: 0  ease: 'power4.inOut', duration: 4}) 
+    // tl.to('.ui', { display: 'none'}, 2)
 
 
 
@@ -59,32 +86,96 @@ export default class Animations {
 
     if(audio_number === 1) {
 
-      tl.to(camera.position, { z: "+=11",  y: "+=1", x: "-=3", ease: 'power2.inOut', duration: 5 }, 0)
-      tl.to(camera.position, { z: "-=11", y: "+=2",  x: "+=3", ease: 'power2.out', duration: 5 }, 5)
-      tl.to(camera.position, {  x: 7.7231, y: 1.294, z: -2.2, ease: 'power2.out', duration: 5}, 10)
-      tl.to(camera.position, {  z: "-=4.2", y: 1.2, ease: 'power2.out', duration: 5}, 15)
-      tl.to(camera.position, {  x:7.98, y: 1.981, z:1, ease: 'power2.out', duration: 3}, 20)
+      // tl.to(camera.position, { z: "+=11",  y: "+=1", x: "-=3", ease: 'power2.inOut', duration: 5 }, 0)
+      // tl.to(camera.position, { z: "-=11", y: "+=2",  x: "+=3", ease: 'power2.out', duration: 5 }, 5)
+      // tl.to(camera.position, {  x: 7.7231, y: 1.294, z: -2.2, ease: 'power2.out', duration: 5}, 10)
+      // tl.to(camera.position, {  z: "-=4.2", y: 1.2, ease: 'power2.out', duration: 5}, 15)
+      // tl.to(camera.position, {  x:7.98, y: 1.981, z:1, ease: 'power2.out', duration: 3}, 20)
 
     }
 
     if(audio_number === 2) {
-      tl.to(camera.position, { x: 6.762, y: 1.2, z: 4.3,  ease: 'power2.inOut', duration: 4})
-      tl.to(camera.position, { x: 12, y: 4.3, z: 0.5,  ease: 'power2.inOut', duration: 12}, 4)
+      // tl.to(camera.position, { x: 6.762, y: 1.2, z: 4.3,  ease: 'power2.inOut', duration: 4})
+      // tl.to(camera.position, { x: 12, y: 4.3, z: 0.5,  ease: 'power2.inOut', duration: 12}, 4)
       // tl.to(camera.position, { x: 4.6, y: 1.2, z: 0.95,  ease: 'power2.inOut', duration: 4})      
     }
   }
 
 
 
   createProject(project_name) {
-    // Create a project for the animation
-   // const project = getProject(project_name);
-
-    //return project;
+   // Create a project for the animation
+    const project = getProject(project_name);
+    return project;
   }
 
-  createSheet(project, sheet_name) {
+  createSheet(project, sheet_name, audio) {
     // Create a sheet
-    //const sheet = project.sheet(sheet_name);
+    const sheet = project.sheet(sheet_name);
+
+    if(audio) {
+      this.attachAudio(sheet, audio)
+    }
+    return sheet;
+  }
+
+  createIntroduction() {
+    const project = this.createProject('Introduction')
+    const sheet = this.createSheet(project, 'Camera Animation', '/sounds/initialisation.mp3')
+     
+    this.createTheatreObject(sheet, "camera", this.webgl.camera.instance, {
+
+        transforms: {
+          position: this.vector3D,
+          rotation: this.vector3D
+        },
+        
+        target: {
+          position: {x: 0, y: 2, z: 1},
+        }
+      })
+  }
+
+  createTheatreObject(sheet, object_name, mesh, object_properties) {
+
+    const object = sheet.object(object_name, object_properties)
+
+    this.attachOnValueChange(object, object_name, mesh)
+  }
+
+  attachOnValueChange(object, object_name, mesh) {
+    
+
+    object.onValuesChange((values) => {
+     
+      // position // rotation
+      for (const [transform, value] of Object.entries(values.transforms)) {
+        //@ts-ignore
+        mesh[transform].set(value.x, value.y, value.z);
+      }
+
+      if(object_name === "camera")  {
+        for (const [transform, value] of Object.entries(values.target)) {
+           //@ts-ignore
+          mesh.lookAt(value.x, value.y, value.z);
+        }  
+      }
+    })
+  }
+
+
+  attachAudio(sheet, source) {
+
+    sheet.sequence.attachAudio({
+      source: source
+    }).then(() => {
+       sheet.sequence.play({ iterationCount: 1})
+    });
+  
+  }
+  
+
+  playAnimations(project, sheet, iterationCount: number) {
+    project.ready.then(() => sheet.sequence.play({ iterationCount: iterationCount }))
   }
 }

classes/Camera.ts

@@ -13,6 +13,7 @@ export default class Camera {
   coordinates: any
   lookTarget: any
   controls: any
+  
 
   constructor(fov: number, width: number, near: number, far: number, height?: number) {
     this.instance = new PerspectiveCamera(fov, width, near, far);
@@ -21,13 +22,13 @@ export default class Camera {
     this.instance.position.z =  0
 
     //this.instance = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 0, 10000 );
-    //this.animations = useAnimations()
-
-    
   }
 
+  resize(cam) {
+    cam.aspect = window.innerWidth / window.innerHeight;
+    cam.updateProjectionMatrix();
+  }
 
-
   tweak() {
     const debug = useDebug();
 
@@ -36,10 +37,9 @@ export default class Camera {
       expanded: false,
     });
 
-
     camera_page.addInput(this.instance, 'position')
+    camera_page.addInput(this.instance, 'rotation')
 
-   
   }
 
 

classes/Cameras.ts

@@ -19,6 +19,7 @@ export default class PostProcess {
         this.webgl = scene.webgl;
         this.camera = scene.camera;
         this.composer = new EffectComposer(this.renderer)    
+        
         this.params = {
             blendFunction: BlendFunction.ADD,
             blendFunctionNoise: BlendFunction.COLOR_BURN, // substract // MULTIPLY // Overlay
@@ -48,7 +49,8 @@ export default class PostProcess {
         const smaa = new SMAAEffect()
 
 		this.effect.inverted = true;
-		//const effectPass = new EffectPass(this.camera, this.effect);
+
+        //const effectPass = new EffectPass(this.camera, this.effect);
 		//this.composer.addPass(effectPass);
         this.composer.addPass(new EffectPass(this.camera, smaa, this.effect, noise));
 

classes/PostProcessing.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
-import Controls from './Controls';
+import Controls from '@/classes/Controls';
 import PostProcess from '@/classes/PostProcessing';
-import Smoke from '@/classes/Smoke';
+import TransitionCamera from '@/classes/managers/TransitionCamera';
 
 export default class Scene {
   renderer: any;
@@ -19,7 +19,7 @@ export default class Scene {
   lights: any
   postProcess: any
   clock: any
-  smoke: any
+  transition: any
 
   constructor(webgl) {
 
@@ -36,13 +36,12 @@ export default class Scene {
     this.camera = webgl.camera.instance;
     this.webgl = webgl;
 
-    //  this.smoke = new Smoke({ webgl: this.webgl, scene: this })
-
     this.clock = new THREE.Clock();
     this.postProcess = new PostProcess({ scene: this })
 
     this.createFog();
     this.controls = new Controls(this.camera, this.renderer);
+    this.transition = new TransitionCamera({ webgl: this.webgl, scene: this })
     console.log(this.controls)
 
     // this.changeFog('green')
@@ -105,15 +104,12 @@ export default class Scene {
 
     const camera_h = this.camera.position.y * 0.8;
     // console.log(camera_h)
-
     // console.log(this.camera.position)
-
-    // this.smoke.update()
-
     this.instance.fog.near = camera_h + 4;
     this.instance.fog.far = camera_h * 0.6 + 24;
 
     this.webgl.materials.update(elapsedTime);
+    this.transition.update()
 
    // console.log(this.camera.position.x, this.camera.position.y, this.camera.position.z)
     // this.controls.update();