@canvas3/nuxt 0.0.1 → 0.0.4

package/dist/module.json

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

package/dist/runtime/components/canvas3-image.vue

@@ -16,20 +16,17 @@
 import { ref, computed, watch, onMounted, nextTick, onBeforeUnmount } from "vue";
 import { Canvas3 } from "#canvas3-nuxt/utils/canvas3/canvas3";
 const props = defineProps({
-  options: {
-    type: Object,
-    default: () => ({
-      alt: "",
-      src: "",
-      loadStrategy: "lazy",
-      shaderName: void 0,
-      uniforms: {},
-      activateMeshUniforms: {}
-    })
-  }
+  options: { type: Object, required: true, default: () => ({
+    alt: "",
+    src: "",
+    loadStrategy: "lazy",
+    shaderName: void 0,
+    uniforms: {},
+    activateMeshUniforms: {}
+  }) }
 });
 const reducedMotion = computed(() => Canvas3.options?.disabled ?? null);
-const image = ref(null);
+const image = ref();
 const generatedMeshId = "image_" + crypto.randomUUID();
 const imgAddedToCanvas = ref(false);
 const addImageToCanvas = async () => {
@@ -37,7 +34,7 @@ const addImageToCanvas = async () => {
   if (!image.value || Canvas3.canvasInitiated.value === false || Canvas3.options?.disabled || imgAddedToCanvas.value) return;
   if (image.value.naturalWidth === 0) return;
   image.value.dataset.meshId = generatedMeshId;
-  Canvas3.addImageAsMesh(
+  await Canvas3.addImageAsMesh(
     image.value,
     props.options.shaderName,
     generatedMeshId,

package/dist/runtime/components/canvas3-image.vue.d.ts

@@ -1,5 +1,8 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    options: Record<string, any>;
-    $props: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+import type { Canvas3ImageBindType } from '#canvas3-nuxt/types/types';
+type __VLS_Props = {
+    options: Canvas3ImageBindType;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    options: Canvas3ImageBindType;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/canvas3-text.vue.d.ts

@@ -1,11 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_component: import("vue").DefineComponent<{}, {
-    $props: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: ((props: {}) => any) | undefined;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };

package/dist/runtime/constants/studio783Log.d.ts

@@ -0,0 +1 @@
+export declare const studio783log: () => void;

package/dist/runtime/constants/studio783Log.js

@@ -0,0 +1,22 @@
+export const studio783log = () => {
+  console.log(`
+Animation package Canvas3 developed by
+
+ \u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588 \u2588     \u2588 \u2588\u2588\u2588\u2588  \u2588\u2588\u2588  \u2588\u2588\u2588\u2588
+\u2588       \u2588   \u2588     \u2588 \u2588   \u2588  \u2588  \u2588    \u2588
+ \u2588\u2588\u2588\u2588   \u2588   \u2588     \u2588 \u2588    \u2588 \u2588 \u2588      \u2588
+     \u2588  \u2588    \u2588   \u2588  \u2588   \u2588  \u2588  \u2588    \u2588
+ \u2588\u2588\u2588\u2588   \u2588     \u2588\u2588\u2588   \u2588\u2588\u2588\u2588  \u2588\u2588\u2588  \u2588\u2588\u2588\u2588
+
+  \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588   \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588     \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588
+ \u2591\u2588\u2588\u2588\u2591\u2591\u2591\u2591\u2588\u2588\u2588  \u2588\u2588\u2588\u2591\u2591\u2591\u2591\u2588\u2588\u2588   \u2588\u2588\u2588\u2591\u2591\u2591\u2591\u2588\u2588\u2588
+ \u2591\u2591\u2591    \u2588\u2588\u2588  \u2591\u2588\u2588\u2588   \u2591\u2588\u2588\u2588  \u2591\u2591\u2591    \u2591\u2588\u2588\u2588
+       \u2588\u2588\u2588   \u2591\u2591\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588      \u2588\u2588\u2588\u2588\u2588\u2588\u2591
+      \u2588\u2588\u2588     \u2588\u2588\u2588\u2591\u2591\u2591\u2591\u2588\u2588\u2588    \u2591\u2591\u2591\u2591\u2591\u2591\u2588\u2588\u2588
+     \u2588\u2588\u2588     \u2591\u2588\u2588\u2588   \u2591\u2588\u2588\u2588   \u2588\u2588\u2588   \u2591\u2588\u2588\u2588
+    \u2588\u2588\u2588      \u2591\u2591\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588   \u2591\u2591\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588
+   \u2591\u2591\u2591        \u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591     \u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591
+
+  `);
+  console.log("%chttps://783studio.com", "font-size:20px; font-weight:600;");
+};

package/dist/runtime/directives/canvas3-image.client.d.ts

@@ -0,0 +1,3 @@
+import type { Directive } from 'vue';
+import type { Canvas3ImageBinding } from '~/src/runtime/types/types';
+export declare const vCanvas3Image: Directive<HTMLImageElement, Canvas3ImageBinding>;

package/dist/runtime/directives/{canvas3-image-directive.client.js → canvas3-image.client.js}

@@ -23,9 +23,9 @@ async function tryAdd(el, options) {
     meshIdMap.set(el, meshId);
     el.dataset.meshId = meshId;
   }
-  Canvas3.addImageAsMesh(
+  await Canvas3.addImageAsMesh(
     el,
-    options?.shaderName,
+    options.shaderName ?? null,
     meshId,
     options?.uniforms ?? {},
     options?.activateMeshUniforms ?? {}
@@ -33,6 +33,7 @@ async function tryAdd(el, options) {
   addedMap.set(el, true);
   srcMap.set(el, getImgSrc(el));
   el.classList.add("webgl-img");
+  el.style.opacity = "0";
 }
 function remove(el) {
   const meshId = meshIdMap.get(el);
@@ -53,7 +54,7 @@ export const vCanvas3Image = {
     if (el.tagName !== "IMG") {
       return;
     }
-    const options = binding.value || {};
+    const options = binding.value ?? {};
     const stop = watch(
       () => Canvas3.canvasInitiated.value,
       (ready) => {
@@ -70,7 +71,7 @@ export const vCanvas3Image = {
     }
   },
   updated(el, binding) {
-    const options = binding.value || {};
+    const options = binding.value ?? {};
     const meshId = meshIdMap.get(el);
     if (meshId && options?.uniforms) {
       Canvas3.meshUniformsUpdate(meshId, options.uniforms);

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

@@ -1,11 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_component: import("vue").DefineComponent<{}, {
-    $emit: (event: "canvas3-ready", ...args: any[]) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: ((props: {}) => any) | undefined;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };

package/dist/runtime/plugins/directives.js

@@ -1,6 +1,6 @@
 import { vOnScrollActivate } from "../directives/action-on-scroll.js";
 import { vSetDataAttribute } from "../directives/set-data-attributes.js";
-import { vCanvas3Image } from "../directives/canvas3-image-directive.client.js";
+import { vCanvas3Image } from "../directives/canvas3-image.client.js";
 import { defineNuxtPlugin } from "#app";
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.directive("action-on-scroll", vOnScrollActivate);

package/dist/runtime/types/types.d.ts

@@ -1,12 +1,5 @@
-import type { Mesh } from 'three';
-import type { DirectiveBinding } from 'vue';
-export type AnimationCallback = () => void;
-export type AnimationCallbacks = Map<string, AnimationCallback>;
-export type MeshMaterialUniform = Record<string, {
-    duration: number;
-    ease: string;
-    value: number;
-}>;
+import type { Mesh, Vector2 } from 'three';
+import type { DirectiveBinding, ObjectDirective } from 'vue';
 type Shader = {
     fragmentShader: string;
     vertexShader: string;
@@ -25,6 +18,18 @@ type MeshAnimation = {
     duration: number;
     ease: string;
 };
+export type AnimationCallback = () => void;
+export type AnimationCallbacks = Map<string, AnimationCallback>;
+export type MeshMaterialUniform = Record<string, {
+    duration: number;
+    ease: string | null | undefined;
+    value: number;
+}>;
+export type BaseUniform = Record<string, {
+    value: Vector2 | number | null;
+    duration?: number;
+    ease?: string | null | undefined;
+}>;
 export type Canvas3OptionsType = {
     font: Font;
     shaders: Shaders;
@@ -48,17 +53,39 @@ export type MeshType = {
     width: number;
     height: number;
 };
+export type scrollActionBindOptionType = {
+    activateOnce?: boolean;
+    trackOnly?: boolean;
+    fixToParent?: {
+        containerId: string;
+        fixPosition: number;
+        margin: number;
+    };
+    scrollSpeed?: {
+        value: number;
+    };
+    scrollSpeedSetTo?: {
+        value: number;
+        duration: number;
+    };
+    activateCallback?: (item: ScrollActionType) => void;
+    onScrollCallback?: (item: ScrollActionType, scrollSpeed: number, currentPosition: number) => void;
+    activeRangeMargin?: number;
+    activeRangeOrigin?: number;
+    activeRange?: number;
+    bidirectionalActivation?: boolean;
+};
 export type ScrollActionBinding = {
     elNode: HTMLElement;
-    options: DirectiveBinding['value'];
+    options: scrollActionBindOptionType;
     arg: DirectiveBinding['arg'];
 };
 export type ScrollActionType = {
     elNode: HTMLElement;
-    options: DirectiveBinding['value'];
+    options: scrollActionBindOptionType;
     arg: DirectiveBinding['arg'];
     containedMeshIds?: string[];
-    bounds: DOMRect;
+    bounds?: DOMRect;
     containerId?: string;
     fixPosition?: number;
     containerEl?: HTMLElement;
@@ -68,4 +95,27 @@ export type ScrollActionType = {
     containerBottom?: number;
     trackOnly?: boolean;
 };
+export type myEffectType = {
+    uniforms: BaseUniform;
+    vertexShader: string;
+    fragmentShader: string;
+};
+export type Canvas3ImageBinding = {
+    shaderName?: string;
+    uniforms?: MeshMaterialUniform;
+    activateMeshUniforms?: MeshMaterialUniform;
+};
+export type Canvas3ImageBindType = {
+    alt: string;
+    src: string;
+    loadStrategy?: 'lazy' | 'eager' | undefined;
+    shaderName?: string;
+    uniforms?: MeshMaterialUniform;
+    activateMeshUniforms: MeshMaterialUniform;
+};
+declare module 'vue' {
+    interface GlobalDirectives {
+        'canvas3-image': ObjectDirective<HTMLImageElement, Canvas3ImageBinding>;
+    }
+}
 export {};

package/dist/runtime/types/types.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/types/vue-directives.d.ts

@@ -0,0 +1,10 @@
+import type { ObjectDirective } from 'vue'
+import type { Canvas3ImageBinding } from '~/src/runtime/types/types'
+
+declare module 'vue' {
+  export interface GlobalDirectives {
+    'canvas3-image': ObjectDirective<HTMLImageElement, Canvas3ImageBinding>
+  }
+}
+
+export {}

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

@@ -2,9 +2,9 @@ import * as THREE from 'three';
 import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 import type { Pass } from 'three/addons/postprocessing/Pass.js';
 import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-import type { ShaderMaterial } from 'three';
+import type { ShaderMaterial, WebGLRenderer } from 'three';
 import Scroll from '#canvas3-nuxt/utils/canvas3/scroll';
-import type { AnimationCallback, AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType } from '#canvas3-nuxt/types/types';
+import type { AnimationCallback, AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType, myEffectType } from '#canvas3-nuxt/types/types';
 declare class Canvas3Class {
     canvasInitiated: import("vue").Ref<boolean, boolean>;
     animateImageMesh: boolean;
@@ -12,11 +12,8 @@ declare class Canvas3Class {
     scrollableContent: HTMLElement | null;
     time: number;
     scene: THREE.Scene;
-    MSDFTextGeometryAtlas: any;
-    MSDFTextGeometryFont: any;
     materials: ShaderMaterial[];
     imageStore: MeshType[];
-    textStore: MeshType[];
     activateMeshUniformMap: Map<string, MeshMaterialUniform>;
     scroll: Scroll | null;
     currentScroll: number;
@@ -26,8 +23,8 @@ declare class Canvas3Class {
     camera: THREE.PerspectiveCamera | null;
     composer: EffectComposer | null;
     renderPass: Pass | null;
-    renderer: any;
-    myEffect: any;
+    renderer: WebGLRenderer | null;
+    myEffect: myEffectType;
     customPass: ShaderPass | null;
     animations: AnimationCallbacks;
     mouse: {
@@ -42,9 +39,7 @@ declare class Canvas3Class {
     setCanvasAndCamera(): void;
     resizeOnChange(): void;
     resizeImageStore(): void;
-    resizeTextStore(): void;
     setImageMeshPositions(): void;
-    setTextMeshPositions(): void;
     meshUniformsUpdate(id: string, uniforms: MeshMaterialUniform): void;
     activateMesh(meshId: string, isActive: boolean): void;
     addOnScrollActivateElement(binding: ScrollActionBinding): void;
@@ -52,7 +47,7 @@ declare class Canvas3Class {
     removeScrollActiveElement(elNode: HTMLElement): void;
     removeMesh(id: string): void;
     addAnimationToRender(callBackName: string, callBackFunction: AnimationCallback): void;
-    addImageAsMesh(imgHtmlEl: HTMLImageElement, shaderName: string, meshId: string, meshUniforms: MeshMaterialUniform, activateMeshUniforms: MeshMaterialUniform): Promise<void>;
+    addImageAsMesh(imgHtmlEl: HTMLImageElement, shaderName: string | null, meshId: string, meshUniforms: MeshMaterialUniform, activateMeshUniforms: MeshMaterialUniform): Promise<void>;
     composerPass(): void;
     setSize(): void;
     scrollToTop(delay?: number): void;

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

@@ -6,12 +6,11 @@ import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
 import { gsap } from "gsap";
 import {
   generateBindingLogic,
-  getMSDFFontMeshScales,
-  heightPositionCoef,
-  loadTexture
+  getShaderMaterial
 } from "./helpers.js";
 import Scroll from "#canvas3-nuxt/utils/canvas3/scroll";
 import { defaultCanvas3Options } from "#canvas3-nuxt/constants/default-canvas3-options";
+import { studio783log } from "#canvas3-nuxt/constants/studio783Log";
 const canvasInitiated = ref(false);
 class Canvas3Class {
   canvasInitiated = canvasInitiated;
@@ -20,11 +19,11 @@ class Canvas3Class {
   scrollableContent = null;
   time = 0;
   scene = new THREE.Scene();
-  MSDFTextGeometryAtlas;
-  MSDFTextGeometryFont;
+  // MSDFTextGeometryAtlas: any
+  // MSDFTextGeometryFont: any
   materials = [];
   imageStore = [];
-  textStore = [];
+  // textStore: MeshType[] = []
   activateMeshUniformMap = /* @__PURE__ */ new Map();
   scroll = null;
   currentScroll = 0;
@@ -34,15 +33,18 @@ class Canvas3Class {
   camera = null;
   composer = null;
   renderPass = null;
-  renderer;
-  myEffect;
+  renderer = null;
+  myEffect = {
+    uniforms: {
+      tDiffuse: { value: null },
+      scrollSpeed: { value: null }
+    },
+    vertexShader: "",
+    fragmentShader: ""
+  };
   customPass = null;
   animations = /* @__PURE__ */ new Map();
   mouse = { x: 0, y: 0, movementX: 0, movementY: 0, xPrev: 0, yPrev: 0 };
-  // triggerSectionPositions= {};
-  // constructor({ canvasOptions }) {
-  //   this.options = canvasOptions;
-  // }
   async init(canvasElement, scrollableContent, canvas3Options) {
     this.options = canvas3Options;
     this.scene = new THREE.Scene();
@@ -69,6 +71,7 @@ class Canvas3Class {
       }
     });
     this.canvasInitiated.value = true;
+    studio783log();
   }
   setCanvasAndCamera() {
     this.width = this.canvasContainer?.offsetWidth ?? 0;
@@ -87,33 +90,9 @@ class Canvas3Class {
     this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
     this.canvasContainer?.appendChild(this.renderer.domElement);
   }
-  // async loadFontMSDF() {
-  //   const loadFontAtlas = (path: string) => {
-  //     return new Promise((resolve) => {
-  //       const loader = new THREE.TextureLoader()
-  //       loader.load(path, resolve)
-  //     })
-  //   }
-  //   const loadFont = (path: string) => {
-  //     return new Promise((resolve) => {
-  //       const loader = new FontLoader()
-  //       loader.load(path, resolve)
-  //     })
-  //   }
-  //   await Promise.all([
-  //     loadFontAtlas(this.options.font.atlas),
-  //     loadFont(this.options.font.fnt),
-  //   ]).then(([atlas, font]) => {
-  //     if (atlas)
-  //       this.MSDFTextGeometryAtlas = atlas
-  //     if (font)
-  //       this.MSDFTextGeometryFont = font
-  //   })
-  // }
   resizeOnChange() {
     this.setSize();
     this.resizeImageStore();
-    this.resizeTextStore();
     this.scroll?.resizeMobileBreakEvents();
     this.scroll?.setSize();
   }
@@ -123,29 +102,27 @@ class Canvas3Class {
         const bounds = item.htmlEl.getBoundingClientRect();
         if (!bounds) return;
         item.mesh.scale.set(bounds.width, bounds.height, 1);
-        item.mesh.material.uniforms.uMeshSize.value.set(
-          bounds.width ?? 0,
-          bounds.height ?? 0
-        );
+        const material = getShaderMaterial(item.mesh);
+        material.uniforms.uMeshSize?.value.set(bounds.width ?? 0, bounds.height ?? 0);
         item.width = bounds.width;
         item.height = bounds.height;
       }
     }
     this.setImageMeshPositions();
   }
-  resizeTextStore() {
-    for (const item of this.textStore) {
-      const bounds = item.htmlEl.getBoundingClientRect();
-      const { scaleX, scaleY } = getMSDFFontMeshScales(
-        bounds.width,
-        item.mesh.geometry?._layout?._width
-      );
-      item.mesh.scale.set(scaleX, scaleY, 1);
-      item.width = bounds.width;
-      item.height = bounds.height * heightPositionCoef;
-    }
-    this.setTextMeshPositions();
-  }
+  // resizeTextStore() {
+  //   for (const item of this.textStore) {
+  //     const bounds = item.htmlEl.getBoundingClientRect()
+  //     const { scaleX, scaleY } = getMSDFFontMeshScales(
+  //       bounds.width,
+  //       item.mesh.geometry?._layout?._width,
+  //     )
+  //     item.mesh.scale.set(scaleX, scaleY, 1)
+  //     item.width = bounds.width
+  //     item.height = bounds.height * heightPositionCoef
+  //   }
+  //   this.setTextMeshPositions()
+  // }
   setImageMeshPositions() {
     if (this.imageStore.length === 0) return;
     for (const item of this.imageStore) {
@@ -153,24 +130,28 @@ class Canvas3Class {
       item.mesh.position.y = -item.htmlEl.getBoundingClientRect().top + this.height / 2 - item.height / 2;
     }
   }
-  setTextMeshPositions() {
-    if (this.textStore.length === 0) return;
-    for (const item of this.textStore) {
-      item.mesh.position.x = item.htmlEl.getBoundingClientRect().left - this.width / 2;
-      item.mesh.position.y = -item.htmlEl.getBoundingClientRect().top + this.height / 2 - item.height / 2;
-    }
-  }
+  // setTextMeshPositions() {
+  //   if (this.textStore.length === 0) return
+  //   for (const item of this.textStore) {
+  //     item.mesh.position.x
+  //       = item.htmlEl.getBoundingClientRect().left - this.width / 2
+  //     item.mesh.position.y
+  //       = -item.htmlEl.getBoundingClientRect().top
+  //         + this.height / 2
+  //         - item.height / 2
+  //   }
+  // }
   meshUniformsUpdate(id, uniforms) {
     const mesh = this.scene.getObjectByName(id);
     if (!mesh) return;
+    const material = getShaderMaterial(mesh);
     for (const uniKey in uniforms) {
       if (uniforms[uniKey]) {
-        if (!mesh.material.uniforms[uniKey])
-          mesh.material.uniforms[uniKey] = {
-            value: uniforms[uniKey].value,
-            duration: 0
+        if (!material.uniforms[uniKey])
+          material.uniforms[uniKey] = {
+            value: uniforms[uniKey].value
           };
-        gsap.to(mesh.material.uniforms[uniKey], {
+        gsap.to(material.uniforms[uniKey], {
           duration: uniforms[uniKey].duration,
           value: uniforms[uniKey].value,
           ease: uniforms[uniKey].ease ?? "power1.inOut"
@@ -184,15 +165,16 @@ class Canvas3Class {
       console.error("no Mesh found with ID: " + meshId);
       return;
     }
-    if (mesh.material.uniforms.uAniInImage && this.options.activateMeshOptions.image.uAniInImage) {
-      gsap.to(mesh.material.uniforms.uAniInImage, {
+    const material = getShaderMaterial(mesh);
+    if (material.uniforms.uAniInImage && this.options.activateMeshOptions.image.uAniInImage) {
+      gsap.to(material.uniforms.uAniInImage, {
         duration: this.options.activateMeshOptions.image.uAniInImage.duration,
         value: isActive ? 1 : 0,
         ease: this.options.activateMeshOptions.image.uAniInImage.ease
       });
     }
-    if (mesh.material.uniforms.uAniInText && this.options.activateMeshOptions.text.uAniInText) {
-      gsap.to(mesh.material.uniforms.uAniInText, {
+    if (material.uniforms.uAniInText && this.options.activateMeshOptions.text.uAniInText) {
+      gsap.to(material.uniforms.uAniInText, {
         duration: this.options.activateMeshOptions.text.uAniInText.duration,
         value: isActive ? 1 : 0,
         ease: this.options.activateMeshOptions.text.uAniInText.ease
@@ -201,8 +183,9 @@ class Canvas3Class {
     const activateMeshUniforms = this.activateMeshUniformMap.get(meshId) ?? null;
     if (activateMeshUniforms) {
       for (const [key, value] of Object.entries(activateMeshUniforms)) {
-        if (mesh.material.uniforms[key]) {
-          gsap.to(mesh.material.uniforms[key], {
+        const material2 = getShaderMaterial(mesh);
+        if (material2.uniforms[key]) {
+          gsap.to(material2.uniforms[key], {
             duration: value.duration,
             value: isActive ? 1 : 0,
             ease: value.ease ?? "power1.inOut"
@@ -240,11 +223,12 @@ class Canvas3Class {
     }
   }
   removeMesh(id) {
-    const toRemove = this.scene.getObjectByName(id);
-    if (!toRemove) return;
-    this.scene.remove(toRemove);
-    toRemove.geometry.dispose();
-    toRemove.material.dispose();
+    const meshToRemove = this.scene.getObjectByName(id);
+    if (!meshToRemove) return;
+    this.scene.remove(meshToRemove);
+    meshToRemove.geometry.dispose();
+    const material = getShaderMaterial(meshToRemove);
+    material.dispose();
     for (const [index, item] of this.imageStore.entries()) {
       if (item.name === id) {
         this.imageStore.splice(index, 1);
@@ -367,7 +351,8 @@ class Canvas3Class {
     const position = { top: bounds.top, left: bounds.left };
     position.top += this.currentScroll;
     const geometry = new THREE.PlaneGeometry(1, 1);
-    const texture = await loadTexture(imgHtmlEl.src);
+    const bitmap = await createImageBitmap(imgHtmlEl, { imageOrientation: "flipY" });
+    const texture = new THREE.Texture(bitmap);
     texture.needsUpdate = true;
     const material = new THREE.ShaderMaterial({
       uniforms: {
@@ -417,7 +402,7 @@ class Canvas3Class {
     this.setImageMeshPositions();
   }
   composerPass() {
-    if (!this.options.shaders.scroll) return;
+    if (!this.options.shaders.scroll || !this.renderer) return;
     this.composer = new EffectComposer(this.renderer);
     if (this.camera)
       this.renderPass = new RenderPass(this.scene, this.camera);
@@ -442,9 +427,11 @@ class Canvas3Class {
       this.camera.aspect = this.width / this.height;
       this.camera.updateProjectionMatrix();
     }
-    this.renderer.setSize(this.width, this.height);
-    this.renderer.setPixelRatio(window.devicePixelRatio);
-    this.renderer.render(this.scene, this.camera);
+    if (this.renderer) {
+      this.renderer.setSize(this.width, this.height);
+      this.renderer.setPixelRatio(window.devicePixelRatio);
+      this.renderer.render(this.scene, this.camera);
+    }
   }
   scrollToTop(delay = 0) {
     setTimeout(() => {
@@ -474,11 +461,9 @@ class Canvas3Class {
       if (this.customPass && this.customPass.uniforms.scrollSpeed)
         this.customPass.uniforms.scrollSpeed.value = this.scroll?.speedTarget;
       this.setImageMeshPositions();
-      this.setTextMeshPositions();
     }
     if (this.animateImageMesh) {
       this.resizeImageStore();
-      this.resizeTextStore();
     }
     for (const material of this.materials) {
       if (material.uniforms.uTime)

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

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

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

@@ -38,7 +38,7 @@ export function generateBindingLogic(newBindingData) {
       duration: newBindingData.options.scrollSpeedSetTo.duration,
       value: newBindingData.options.scrollSpeedSetTo.value,
       onComplete: () => {
-        binding.elNode.dataset.scrollSpeed = newBindingData.options.scrollSpeedSetTo.value;
+        binding.elNode.dataset.scrollSpeed = newBindingData.options.scrollSpeedSetTo?.value.toString() ?? "0";
       }
     });
   }
@@ -62,14 +62,11 @@ export function findMeshIDs(elParent) {
 export function loadTexture(src) {
   return new Promise((resolve, reject) => {
     const loader = new THREE.TextureLoader();
-    loader.load(
+    return loader.load(
       src,
       (texture) => resolve(texture),
-      // On success
       void 0,
-      // On progress (optional)
       (err) => reject(err)
-      // On error
     );
   });
 }
@@ -94,3 +91,6 @@ export function elementNearViewport(bounds, margin = 200) {
   return bounds.top >= -margin && bounds.top <= windowHeight || bounds.bottom >= -margin && bounds.bottom <= windowHeight || bounds.top <= -margin && bounds.bottom >= windowHeight;
 }
 export const lerp = (a, b, n) => (1 - n) * a + n * b;
+export function getShaderMaterial(mesh) {
+  return mesh.material;
+}

package/package.json

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

package/dist/runtime/directives/canvas3-image-directive.client.d.ts

@@ -1,6 +0,0 @@
-import type { Directive } from 'vue';
-export declare const vCanvas3Image: Directive<HTMLImageElement, {
-    shaderName?: string;
-    uniforms?: Record<string, any>;
-    activateMeshUniforms?: Record<string, any>;
-}>;

package/dist/runtime/plugin.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugin.js

@@ -1,3 +0,0 @@
-import { defineNuxtPlugin } from "#app";
-export default defineNuxtPlugin((_nuxtApp) => {
-});

package/dist/runtime/types/three-msdf-text-utils.d.ts

@@ -1,36 +0,0 @@
-declare module 'three-msdf-text-utils' {
-  import * as THREE from 'three'
-
-  export interface GlyphGeometryOptions {
-    flipY?: boolean
-    negate?: boolean
-    multipage?: boolean
-  }
-
-  export class GlyphGeometry extends THREE.BufferGeometry {
-    constructor(text: string, font: any, options?: GlyphGeometryOptions)
-    layout: any
-    update(text: string): void
-  }
-
-  export interface MSDFShaderOptions {
-    map?: THREE.Texture
-    color?: THREE.Color | string | number
-    opacity?: number
-    alphaTest?: number
-    negate?: boolean
-    precision?: string
-    multipage?: boolean
-    side?: THREE.Side
-    transparent?: boolean
-    defines?: { [key: string]: any }
-    uniforms?: { [key: string]: any }
-  }
-
-  export function createMSDFShader(options?: MSDFShaderOptions): {
-    uniforms: { [key: string]: THREE.IUniform }
-    vertexShader: string
-    fragmentShader: string
-    defines: { [key: string]: any }
-  }
-}

package/dist/runtime/utils/MSDFFont/MSDFTextGeometry/TextLayout.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/runtime/utils/MSDFFont/MSDFTextGeometry/createIndices.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/runtime/utils/MSDFFont/MSDFTextGeometry/index.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/runtime/utils/MSDFFont/MSDFTextGeometry/utils.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/runtime/utils/MSDFFont/MSDFTextGeometry/vertices.d.ts

@@ -1 +0,0 @@
-export {};