@canvas3/nuxt 0.1.34 → 0.1.36

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "canvas-nuxt-layout",
   "configKey": "canvas3Layout",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/runtime/directives/canvas3-scroll-action.js

@@ -26,6 +26,17 @@ export const vCanvas3ScrollAction = {
       );
     }
   },
+  updated(el, binding) {
+    if (!Canvas3.canvasInitiated.value) return;
+    const newScrollSpeedValue = binding.value?.scrollSpeedSetTo?.value;
+    if (newScrollSpeedValue !== void 0 && newScrollSpeedValue !== binding.oldValue?.scrollSpeedSetTo?.value) {
+      Canvas3.updateOnScrollActiveElement({
+        elNode: el,
+        options: binding.value,
+        arg: binding.arg
+      });
+    }
+  },
   unmounted(el) {
     Canvas3.removeScrollActiveElement(el);
   },

package/dist/runtime/layouts/canvas3-layout.vue

@@ -38,7 +38,8 @@ watch(
       );
       emit("canvas3-ready");
     }
-  }
+  },
+  { immediate: true }
 );
 </script>
 

package/dist/runtime/utils/canvas3/canvas3.d.ts

@@ -42,7 +42,12 @@ declare class Canvas3Class {
         xPrev: number;
         yPrev: number;
     };
+    frameCount: number;
+    lastFpsTime: number;
+    fps: number;
+    fpsUpdateInterval: number;
     init(canvasElement: HTMLElement, scrollableContent: HTMLElement, canvas3Options: Canvas3OptionsType): Promise<void>;
+    setScrollShaderByName(shaderName: string): void;
     setRenderDisabled(status: boolean): void;
     setCanvasAndCamera(): void;
     resizeOnChange(): void;
@@ -51,6 +56,7 @@ declare class Canvas3Class {
     meshUniformsUpdate(id: string, uniforms: MeshMaterialUniform | BaseUniform): void;
     activateMesh(meshId: string, isActive: boolean): void;
     addOnScrollActivateElement(binding: ScrollActionBinding): void;
+    updateOnScrollActiveElement(updatedBinding: ScrollActionBinding): void;
     removeScrollActiveElement(elNode: HTMLElement): void;
     removeMesh(id: string): void;
     addAnimationToRender(callBackName: string, callBackSetup: AnimationCallSetup): void;

package/dist/runtime/utils/canvas3/canvas3.js

@@ -53,6 +53,11 @@ class Canvas3Class {
   customPass = null;
   animations = /* @__PURE__ */ new Map();
   mouse = { x: 0, y: 0, movementX: 0, movementY: 0, xPrev: 0, yPrev: 0 };
+  // FPS tracking
+  frameCount = 0;
+  lastFpsTime = 0;
+  fps = 0;
+  fpsUpdateInterval = 500;
   async init(canvasElement, scrollableContent, canvas3Options) {
     this.options = canvas3Options;
     this.scene = new THREE.Scene();
@@ -96,6 +101,15 @@ class Canvas3Class {
     this.canvasInitiated.value = true;
     studio783log();
   }
+  setScrollShaderByName(shaderName) {
+    const newShader = this.options.shaders[shaderName];
+    if (!newShader || !this.customPass) return;
+    this.myEffect.vertexShader = newShader.vertexShader;
+    this.myEffect.fragmentShader = newShader.fragmentShader;
+    this.customPass.material.vertexShader = newShader.vertexShader;
+    this.customPass.material.fragmentShader = newShader.fragmentShader;
+    this.customPass.material.needsUpdate = true;
+  }
   setRenderDisabled(status) {
     if (!status && this.renderDisabled) {
       this.renderDisabled = false;
@@ -213,6 +227,19 @@ class Canvas3Class {
     const newBinding = generateBindingLogic(binding);
     this.scroll?.DOM.onScrollActivateElements.push(newBinding);
   }
+  updateOnScrollActiveElement(updatedBinding) {
+    if (!this.scroll) return;
+    for (const [
+      index,
+      item
+    ] of this.scroll.DOM.onScrollActivateElements.entries()) {
+      if (item.elNode.dataset.scrollActivateId === updatedBinding.elNode.dataset.scrollActivateId) {
+        const updatedBindingFormated = generateBindingLogic(updatedBinding);
+        console.log("updatedBindingFormated", updatedBindingFormated);
+        this.scroll.DOM.onScrollActivateElements[index] = updatedBindingFormated;
+      }
+    }
+  }
   removeScrollActiveElement(elNode) {
     if (!elNode || !this.scroll?.DOM.onScrollActivateElements || this.scroll?.DOM.onScrollActivateElements.length === 0)
       return;
@@ -427,11 +454,40 @@ class Canvas3Class {
       if (!this.lastTime) this.lastTime = timestamp;
       const delta = (timestamp - this.lastTime) / 1e3;
       this.lastTime = timestamp;
+      if (!this.lastFpsTime) this.lastFpsTime = timestamp;
+      this.frameCount++;
+      const elapsedSinceFpsStart = timestamp - this.lastFpsTime;
+      if (elapsedSinceFpsStart >= this.fpsUpdateInterval) {
+        this.fps = Math.round(
+          this.frameCount * 1e3 / elapsedSinceFpsStart
+        );
+        this.frameCount = 0;
+        this.lastFpsTime = timestamp;
+      }
       this.render(delta);
       this.rafId = requestAnimationFrame(loop);
     };
     this.rafId = requestAnimationFrame(loop);
   }
+  // startRenderLoop() {
+  //   if (this.rafId !== null) return
+  //
+  //   const loop = (timestamp: number) => {
+  //     this.rafId = null
+  //
+  //     if (!this.documentVisibility || this.renderDisabled) return
+  //
+  //     if (!this.lastTime) this.lastTime = timestamp
+  //     const delta = (timestamp - this.lastTime) / 1000
+  //     this.lastTime = timestamp
+  //
+  //     this.render(delta)
+  //
+  //     this.rafId = requestAnimationFrame(loop)
+  //   }
+  //
+  //   this.rafId = requestAnimationFrame(loop)
+  // }
   stopRenderLoop() {
     if (this.rafId !== null) {
       cancelAnimationFrame(this.rafId);

package/dist/runtime/utils/exports.d.ts

@@ -22,4 +22,5 @@ export declare const Canvas3: {
     getCamera: () => import("three").PerspectiveCamera | null;
     getRenderer: () => import("three").WebGLRenderer | null;
     getScene: () => import("three").Scene;
+    setScrollShaderByName: (shaderName: string) => void;
 };

package/dist/runtime/utils/exports.js

@@ -31,5 +31,6 @@ export const Canvas3 = {
   },
   getCamera: () => mainClass.camera,
   getRenderer: () => mainClass.renderer,
-  getScene: () => mainClass.scene
+  getScene: () => mainClass.scene,
+  setScrollShaderByName: mainClass.setScrollShaderByName.bind(mainClass)
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvas3/nuxt",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "publishConfig": {
     "access": "public"
   },