@canvas3/nuxt 0.0.1

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

@@ -0,0 +1,191 @@
+import {
+  elementNearViewport,
+  lerp,
+  setScrollActiveElements
+} from "./helpers.js";
+export default class Scroll {
+  activateMeshCallback;
+  fixScrollTo;
+  // null | {ref: htmlRef, margin: Number}
+  scrollToRender;
+  scrollRendered;
+  current;
+  scrollInProgress;
+  ease;
+  speed;
+  speedTarget;
+  scrollSpeedBottomMargin;
+  DOM;
+  constructor(options) {
+    this.DOM = {
+      scrollable: options.dom,
+      onScrollActivateElements: []
+    };
+    this.activateMeshCallback = options.activateMeshCallback;
+    this.fixScrollTo = { htmlRef: null, margin: 0 };
+    this.scrollToRender = 0;
+    this.scrollRendered = 0;
+    this.current = 0;
+    this.scrollInProgress = false;
+    this.ease = 0.1;
+    this.speed = 0;
+    this.speedTarget = 0;
+    this.scrollSpeedBottomMargin = 250;
+    this.setSize();
+    this.getScroll();
+    this.init();
+    this.initEvents();
+  }
+  init() {
+    this.getScroll();
+    this.scrollToRender = this.current;
+    this.move();
+  }
+  getScroll() {
+    this.current = window.scrollY || document.documentElement.scrollTop;
+  }
+  resizeMobileBreakEvents() {
+    if (window.innerWidth < 768) {
+      for (const item of this.DOM.onScrollActivateElements) {
+        if (item.options.fixToParent && item.containerEl) {
+          item.bounds = item.elNode.getBoundingClientRect();
+          item.containerBottom = item.containerEl.getBoundingClientRect().bottom;
+        } else {
+          item.elNode.style.transform = `translate3d(0,0px,0)`;
+        }
+      }
+    }
+  }
+  initEvents() {
+    window.addEventListener("scroll", () => {
+      this.getScroll();
+    });
+  }
+  setSize() {
+    document.body.style.height = this.DOM.scrollable.scrollHeight > window.innerHeight ? `${this.DOM.scrollable.scrollHeight}px` : `${window.innerHeight}px`;
+  }
+  setElementActive(item, isActive) {
+    if (!item.containedMeshIds) return;
+    if (isActive) {
+      item.elNode.dataset.activeScroll = "true";
+      setScrollActiveElements(item.elNode, item.containedMeshIds, "true");
+      item.elNode.classList.add("active");
+      if (item.options.activateCallback) {
+        item.options.activateCallback(item);
+      }
+    } else {
+      item.elNode.dataset.activeScroll = "false";
+      setScrollActiveElements(item.elNode, item.containedMeshIds, "false");
+      if (!item.trackOnly) item.elNode.classList.remove("active");
+    }
+    if (item.containedMeshIds.length > 0 && !item.trackOnly) {
+      for (const meshId of item.containedMeshIds) {
+        this.activateMeshCallback(meshId, isActive);
+      }
+    }
+  }
+  setElementsScrollPositions() {
+    if (this.DOM.onScrollActivateElements.length === 0) return;
+    for (const item of this.DOM.onScrollActivateElements) {
+      const bounds = item.elNode.getBoundingClientRect();
+      const itemRangeMargin = item.options.activeRangeMargin ?? 0;
+      const elementTrack = elementNearViewport(bounds, 200 + itemRangeMargin);
+      if (elementTrack) {
+        const activeRange = item.options.activeRange ?? 1;
+        const activeRangeOrigin = item.options.activeRangeOrigin ?? 1;
+        const activeRangeOriginPx = activeRangeOrigin * window.innerHeight;
+        const activeRangeInPx = (1 - activeRange) * activeRangeOriginPx;
+        const itemRangeMargin2 = item.options.activeRangeMargin ?? 0;
+        const activeFromTop = bounds.top - itemRangeMargin2 <= activeRangeOriginPx - activeRangeInPx;
+        const activeFromBottom = !item.options.bidirectionalActivation || bounds.bottom - itemRangeMargin2 >= activeRangeInPx + activeRangeOriginPx;
+        if (activeFromTop && activeFromBottom) {
+          if (item.options.onScrollCallback && this.scrollInProgress)
+            item.options.onScrollCallback(item, this.speed, this.current);
+          if (item.elNode.dataset.activeScroll !== "true") {
+            this.setElementActive(item, true);
+          }
+        } else {
+          if (item.elNode.dataset.activeScroll === "true" && !item.options.activateOnce) {
+            this.setElementActive(item, false);
+          }
+        }
+      }
+      if (typeof item.options.scrollSpeed?.value === "number") {
+        item.elNode.style.transition = `linear translate3d 0s`;
+        if (item.options.fixToParent && item.containerEl && item.childElBounds) {
+          const containerBounds = item.containerEl.getBoundingClientRect();
+          const fixToOrigin = item.options.fixToParent.fixPosition ?? 0;
+          const itemMargin = item.options.fixToParent.margin ?? 0;
+          const fixToOriginPx = window.innerHeight * fixToOrigin;
+          if (item.childEl && bounds.top < itemMargin + fixToOriginPx && containerBounds.bottom > itemMargin + fixToOriginPx + item.childElBounds.height) {
+            const fixedPositionPx = itemMargin - bounds.top + fixToOriginPx;
+            item.childEl.style.transform = `translate3d(0,${fixedPositionPx}px,0)`;
+          } else if (item.childEl && bounds.top > itemMargin + fixToOriginPx && item.childEl.style.transform !== `translate3d(0px, 0px, 0px)`) {
+            item.childEl.style.transform = `translate3d(0px, 0px, 0px)`;
+          }
+        } else {
+          const speedTrack = elementNearViewport(
+            bounds,
+            window.innerHeight * 0.75 + itemRangeMargin
+            // 0.75 = maximum amount of project VH bottom
+          );
+          if (speedTrack) {
+            const speed = (window.innerHeight - bounds.top) * item.options.scrollSpeed.value;
+            item.elNode.style.transform = `translate3d(0,${speed}px,0)`;
+          }
+        }
+      } else {
+        item.elNode.style.transition = `linear translate3d 0.3s`;
+        item.elNode.style.transform = `translate3d(0,0,0)`;
+      }
+    }
+  }
+  setScrollPosition() {
+    if (Math.round(this.scrollToRender) !== Math.round(this.current) || this.scrollToRender < 10) {
+      this.DOM.scrollable.style.transform = `translate3d(0,${-1 * this.scrollToRender}px,0)`;
+    }
+  }
+  scrollRenderToFluid(scrollTo) {
+    window.scrollBy(0, scrollTo);
+    document.documentElement.scrollTop = scrollTo;
+  }
+  scrollRenderTo(scrollTo) {
+    this.scrollToRender = scrollTo;
+    window.scrollTo({
+      left: 0,
+      top: scrollTo,
+      behavior: "instant"
+    });
+    document.documentElement.scrollTop = scrollTo;
+  }
+  calculateScrollSpeed() {
+    this.speed = Math.min(Math.abs(this.current - this.scrollToRender), 200) / 200;
+    this.speedTarget += (this.speed - this.speedTarget) * 0.2;
+  }
+  move() {
+    this.setScrollPosition();
+    this.setElementsScrollPositions();
+  }
+  render(scrollTo, fluid) {
+    this.setSize();
+    if (this.fixScrollTo.htmlRef) {
+      const refPosition = this.fixScrollTo.htmlRef.getBoundingClientRect().top;
+      const fixScrollToPosition = Math.round(
+        this.scrollToRender + refPosition - this.fixScrollTo.margin
+      );
+      this.scrollRenderTo(fixScrollToPosition);
+    } else if (scrollTo !== null && fluid) {
+      this.scrollRenderToFluid(scrollTo);
+    } else if (scrollTo !== null && !fluid) {
+      this.scrollRenderTo(scrollTo);
+    } else {
+      this.scrollToRender = Math.round(
+        lerp(this.scrollToRender, this.current, this.ease)
+      );
+      this.scrollInProgress = this.scrollToRender !== this.scrollRendered;
+      this.scrollRendered = this.scrollToRender;
+    }
+    this.calculateScrollSpeed();
+    this.move();
+  }
+}

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

@@ -0,0 +1,10 @@
+import type { Mesh } from 'three';
+export declare const Canvas3: {
+    addAnimationToRender: (callBackName: string, callBackFunction: import("../types/types.js").AnimationCallback) => void;
+    resizeOnChange: () => void;
+    scrollToElBySelector: (elQuerySelector: string, delay?: number) => void;
+    setMeshPositionsUpdate: (state: boolean) => void;
+    scrollToTop: (delay?: number) => void;
+    addMeshToScene: (mesh: Mesh) => void;
+    getMeshFromSceneByName: (meshName: string) => import("three").Object3D<import("three").Object3DEventMap> | undefined;
+};

package/dist/runtime/utils/exports.js

@@ -0,0 +1,14 @@
+import { Canvas3 as mainClass } from "#canvas3-nuxt/utils/canvas3/canvas3";
+export const Canvas3 = {
+  addAnimationToRender: mainClass.addAnimationToRender.bind(mainClass),
+  resizeOnChange: mainClass.resizeOnChange.bind(mainClass),
+  scrollToElBySelector: mainClass.scrollToElBySelector.bind(mainClass),
+  setMeshPositionsUpdate: mainClass.setMeshPositionsUpdate.bind(mainClass),
+  scrollToTop: mainClass.scrollToTop.bind(mainClass),
+  addMeshToScene: (mesh) => {
+    mainClass.scene.add(mesh);
+  },
+  getMeshFromSceneByName: (meshName) => {
+    return mainClass.scene.getObjectByName(meshName);
+  }
+};

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.mjs'

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@canvas3/nuxt",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Module for ThreeJS",
+  "repository": "https://github.com/kmettom/Canvas3Nuxt",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "runtime"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "npm run dev:prepare && nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "release-public": "npm run prepack && changelogen --release && npm publish --access public && git push --follow-tags",
+    "lint": "eslint .",
+    "lint-fix": "eslint --fix ; exit 0",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.0.0",
+    "gsap": "^3.13.0",
+    "three": "^0.178.0",
+    "vite-plugin-glsl": "^1.5.1",
+    "vue": "^3.5.18"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^2.6.2",
+    "@nuxt/eslint-config": "^1.2.0",
+    "@nuxt/module-builder": "^1.0.1",
+    "@nuxt/schema": "^4.0.0",
+    "@nuxt/test-utils": "^3.19.2",
+    "@types/node": "latest",
+    "@types/three": "^0.178.1",
+    "changelogen": "^0.6.2",
+    "eslint": "^9.30.1",
+    "nuxt": "^4.0.0",
+    "typescript": "~5.8.3",
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.0.1"
+  }
+}