@canvas3/nuxt 0.1.33 → 0.1.35

package/dist/module.json

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

package/dist/runtime/directives/canvas3-image.client.js

@@ -93,13 +93,13 @@ export const vCanvas3Image = {
       const stop = watch(
         () => Canvas3.canvasInitiated.value,
         (ready) => {
-          if (ready) tryAdd(el, options);
+          if (ready) tryAdd(el, options).then();
         },
         { immediate: true }
       );
       stopMap.set(el, stop);
       if (el.complete) {
-        tryAdd(el, options);
+        tryAdd(el, options).then();
       } else {
         const onLoad = () => tryAdd(el, options);
         el.addEventListener("load", onLoad, { once: true });

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

@@ -2,8 +2,7 @@ import { watch } from "vue";
 import { Canvas3 } from "#canvas3-nuxt/utils/canvas3/canvas3";
 export const vCanvas3ScrollAction = {
   mounted(el, binding) {
-    const id = crypto.randomUUID();
-    el.dataset.scrollActivateId = id;
+    el.dataset.scrollActivateId = crypto.randomUUID();
     if (binding.value?.scrollSpeedSetTo?.value) {
       el.dataset.scrollSpeed = binding.value?.scrollSpeedSetTo?.value;
     }
@@ -27,24 +26,6 @@ export const vCanvas3ScrollAction = {
       );
     }
   },
-  //* ************************
-  // DEACTIVATE UPDATES - no need as uniforms are reference based and do not need updates
-  // updated(el, binding) {
-  // const existingElement = Canvas3.getScrollActiveElement(el.dataset.scrollActivateId)
-  // if (existingElement) {
-  //   const oldBinding = existingElement.options
-  //
-  //   const isSame = shallowEqualObject(binding.value, oldBinding)
-  //   if (!isSame) {
-  //     console.log('isSame', isSame, el.dataset.scrollActivateId)
-  //     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/types/types.d.ts

@@ -1,5 +1,6 @@
 import type { Mesh, Vector2 } from 'three';
 import type { DirectiveBinding } from 'vue';
+import type * as THREE from 'three';
 type Shader = {
     fragmentShader: string;
     vertexShader: string;
@@ -37,7 +38,7 @@ export type MeshMaterialUniform = Record<string, {
     value: number;
 }>;
 export type BaseUniform = Record<string, {
-    value: Vector2 | number | null;
+    value: Vector2 | THREE.Texture | number | null;
     duration?: number;
     ease?: string | null | undefined;
 }>;
@@ -54,6 +55,7 @@ export type Canvas3OptionsType = {
     prefersReducedMotion: boolean;
     isMobile: boolean;
     disabled: boolean;
+    mouseTrackingEnabled?: boolean;
 };
 export type MeshType = {
     name: string;
@@ -113,15 +115,7 @@ export type myEffectType = {
 };
 export type Canvas3ImageBinding = {
     shaderName?: string;
-    uniforms?: MeshMaterialUniform;
-    activateMeshUniforms?: MeshMaterialUniform;
-};
-export type Canvas3ImageBindType = {
-    alt: string;
-    src: string;
-    loadStrategy?: 'lazy' | 'eager' | undefined;
-    shaderName?: string;
-    uniforms?: MeshMaterialUniform | undefined;
+    uniforms?: MeshMaterialUniform | BaseUniform;
     activateMeshUniforms?: MeshMaterialUniform;
 };
 export type AttrsType = Record<string, number | string>;

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

@@ -4,7 +4,7 @@ import type { Pass } from 'three/addons/postprocessing/Pass.js';
 import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 import type { ShaderMaterial, WebGLRenderer } from 'three';
 import Scroll from '#canvas3-nuxt/utils/canvas3/scroll';
-import type { AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType, myEffectType, AnimationCallSetup, ScrollActionType } from '#canvas3-nuxt/types/types';
+import type { AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType, myEffectType, AnimationCallSetup, BaseUniform } from '#canvas3-nuxt/types/types';
 declare class Canvas3Class {
     canvasInitiated: import("vue").Ref<boolean, boolean>;
     renderDisabled: boolean;
@@ -43,21 +43,20 @@ declare class Canvas3Class {
         yPrev: number;
     };
     init(canvasElement: HTMLElement, scrollableContent: HTMLElement, canvas3Options: Canvas3OptionsType): Promise<void>;
+    setScrollShaderByName(shaderName: string): void;
     setRenderDisabled(status: boolean): void;
     setCanvasAndCamera(): void;
     resizeOnChange(): void;
     resizeImageStore(): void;
     setImageMeshPositions(): void;
-    meshUniformsUpdate(id: string, uniforms: MeshMaterialUniform): void;
+    meshUniformsUpdate(id: string, uniforms: MeshMaterialUniform | BaseUniform): void;
     activateMesh(meshId: string, isActive: boolean): void;
     addOnScrollActivateElement(binding: ScrollActionBinding): void;
-    getScrollActiveElement(scrollActiveElementId: string): ScrollActionType | undefined;
-    updateOnScrollActiveElement(updatedBinding: ScrollActionBinding): void;
     removeScrollActiveElement(elNode: HTMLElement): void;
     removeMesh(id: string): void;
     addAnimationToRender(callBackName: string, callBackSetup: AnimationCallSetup): void;
     removeAnimationFromRender(callBackName: string): void;
-    addImageAsMesh(imgHtmlEl: HTMLImageElement, shaderName: string | null, meshId: string, meshUniforms: MeshMaterialUniform, activateMeshUniforms: MeshMaterialUniform): Promise<void>;
+    addImageAsMesh(imgHtmlEl: HTMLImageElement, shaderName: string | null, meshId: string, meshUniforms: MeshMaterialUniform | BaseUniform, activateMeshUniforms: MeshMaterialUniform): Promise<void>;
     composerPass(): void;
     setSize(): void;
     scrollToTop(delay?: number): void;

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

@@ -66,22 +66,24 @@ class Canvas3Class {
     this.setSize();
     this.composerPass();
     this.startRenderLoop();
-    window.addEventListener("mousemove", (event) => {
-      this.mouseMoveInProgress = true;
-      this.mouse.x = event.clientX / this.width;
-      this.mouse.y = event.clientY / this.height;
-      setTimeout(() => {
-        this.mouse.movementX = event.clientX / this.width;
-        this.mouse.movementY = event.clientY / this.height;
-      }, 70);
-      if (this.mouse.movementX === 0 && this.mouse.movementY === 0) {
-        this.mouse.movementX = this.mouse.x;
-        this.mouse.movementY = this.mouse.y;
-      }
-      setTimeout(() => {
-        this.mouseMoveInProgress = false;
-      }, 0);
-    });
+    if (canvas3Options.mouseTrackingEnabled) {
+      window.addEventListener("mousemove", (event) => {
+        this.mouseMoveInProgress = true;
+        this.mouse.x = event.clientX / this.width;
+        this.mouse.y = event.clientY / this.height;
+        setTimeout(() => {
+          this.mouse.movementX = event.clientX / this.width;
+          this.mouse.movementY = event.clientY / this.height;
+        }, 70);
+        if (this.mouse.movementX === 0 && this.mouse.movementY === 0) {
+          this.mouse.movementX = this.mouse.x;
+          this.mouse.movementY = this.mouse.y;
+        }
+        setTimeout(() => {
+          this.mouseMoveInProgress = false;
+        }, 0);
+      });
+    }
     document.addEventListener("visibilitychange", () => {
       if (document.hidden) {
         this.documentVisibility = false;
@@ -94,6 +96,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;
@@ -162,7 +173,7 @@ class Canvas3Class {
             value: uniforms[uniKey].value
           };
         gsap.to(material.uniforms[uniKey], {
-          duration: uniforms[uniKey].duration,
+          duration: uniforms[uniKey].duration ?? 0,
           value: uniforms[uniKey].value,
           ease: uniforms[uniKey].ease ?? "power1.inOut"
         });
@@ -211,30 +222,6 @@ class Canvas3Class {
     const newBinding = generateBindingLogic(binding);
     this.scroll?.DOM.onScrollActivateElements.push(newBinding);
   }
-  getScrollActiveElement(scrollActiveElementId) {
-    if (!this.scroll) return;
-    let scrollActiveElement;
-    for (const [
-      index,
-      item
-    ] of this.scroll.DOM.onScrollActivateElements.entries()) {
-      if (item.elNode.dataset.scrollActivateId === scrollActiveElementId) {
-        scrollActiveElement = this.scroll.DOM.onScrollActivateElements[index];
-      }
-    }
-    return scrollActiveElement;
-  }
-  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) {
-        this.scroll.DOM.onScrollActivateElements[index] = generateBindingLogic(updatedBinding);
-      }
-    }
-  }
   removeScrollActiveElement(elNode) {
     if (!elNode || !this.scroll?.DOM.onScrollActivateElements || this.scroll?.DOM.onScrollActivateElements.length === 0)
       return;
@@ -476,6 +463,9 @@ class Canvas3Class {
       this.externalAnimationsRender();
     if (this.materials.length > 0) {
       for (const material of this.materials) {
+        if (!material.uniforms) {
+          continue;
+        }
         if (material.uniforms.uTime)
           material.uniforms.uTime.value = this.time;
         if (this.mouseMoveInProgress) {

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

@@ -1,13 +1,7 @@
 import type { ScrollActionBinding, ScrollActionType } from '#canvas3-nuxt/types/types';
-import type { Mesh, ShaderMaterial, Texture } from 'three';
+import type { Mesh, ShaderMaterial } from 'three';
 export declare function generateBindingLogic(newBindingData: ScrollActionBinding): ScrollActionType;
 export declare function findMeshIDs(elParent: HTMLElement): false | string[];
-export declare function loadTexture(src: string): Promise<Texture>;
-export declare const heightPositionCoef = 1.38;
-export declare function getMSDFFontMeshScales(boundsWidth: number, geometryWidth: number): {
-    scaleX: number;
-    scaleY: number;
-};
 export declare function setScrollActiveElements(elNode: HTMLElement, meshIds: string[], state: string): void;
 export declare function elementNearViewport(bounds: DOMRect, activeRangeInPx: number): boolean;
 export declare const lerp: (a: number, b: number, n: number) => number;

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

@@ -1,4 +1,3 @@
-import * as THREE from "three";
 import { gsap } from "gsap";
 export function generateBindingLogic(newBindingData) {
   const binding = { ...newBindingData, isInView: false };
@@ -59,24 +58,6 @@ export function findMeshIDs(elParent) {
   }
   return meshIds;
 }
-export function loadTexture(src) {
-  return new Promise((resolve, reject) => {
-    const loader = new THREE.TextureLoader();
-    return loader.load(
-      src,
-      (texture) => resolve(texture),
-      void 0,
-      (err) => reject(err)
-    );
-  });
-}
-const heightSizeCoef = 1;
-export const heightPositionCoef = 1.38;
-export function getMSDFFontMeshScales(boundsWidth, geometryWidth) {
-  const scaleX = boundsWidth / geometryWidth * heightSizeCoef;
-  const scaleY = -1 * scaleX * heightSizeCoef;
-  return { scaleX, scaleY };
-}
 export function setScrollActiveElements(elNode, meshIds, state) {
   if (!meshIds || meshIds.length === 0) return;
   for (const id of meshIds) {

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

@@ -1,11 +1,12 @@
-import type { Mesh } from 'three';
+import type { Mesh, ShaderMaterial } from 'three';
 import { getShaderMaterial } from '#canvas3-nuxt/utils/canvas3/helpers';
 export declare const Canvas3: {
     addMeshToScene: (mesh: Mesh) => void;
     getMeshFromSceneByName: (meshName: string) => import("three").Object3D<import("three").Object3DEventMap> | undefined;
+    addMaterialForGlobalUniformUpdates: (material: ShaderMaterial) => void;
     addAnimationToRender: (callBackName: string, callBackSetup: import("../types/types.js").AnimationCallSetup) => void;
     removeAnimationFromRender: (callBackName: string) => void;
-    addImageAsMesh: (imgHtmlEl: HTMLImageElement, shaderName: string | null, meshId: string, meshUniforms: import("../types/types.js").MeshMaterialUniform, activateMeshUniforms: import("../types/types.js").MeshMaterialUniform) => Promise<void>;
+    addImageAsMesh: (imgHtmlEl: HTMLImageElement, shaderName: string | null, meshId: string, meshUniforms: import("../types/types.js").MeshMaterialUniform | import("../types/types.js").BaseUniform, activateMeshUniforms: import("../types/types.js").MeshMaterialUniform) => Promise<void>;
     getShaderMaterial: typeof getShaderMaterial;
     removeMesh: (id: string) => void;
     setAnimationsToRender: (state: boolean) => void;
@@ -21,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

@@ -7,6 +7,9 @@ export const Canvas3 = {
   getMeshFromSceneByName: (meshName) => {
     return mainClass.scene.getObjectByName(meshName);
   },
+  addMaterialForGlobalUniformUpdates: (material) => {
+    mainClass.materials.push(material);
+  },
   addAnimationToRender: mainClass.addAnimationToRender.bind(mainClass),
   removeAnimationFromRender: mainClass.removeAnimationFromRender.bind(mainClass),
   addImageAsMesh: mainClass.addImageAsMesh.bind(mainClass),
@@ -28,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.33",
+  "version": "0.1.35",
   "publishConfig": {
     "access": "public"
   },