index.js

import {animate} from "animejs";

const styleSheetType = {
    ["sectionId"]: {
        ["meshName"]: {
            rotation: (mesh) => { return [0, 0, 0]; },
            position: (mesh) => { return [0, 0, 0] },
            scale:(mesh)=>{return [1,1,1]},
            customStyle: (mesh, params) => {
                //a plain object with proper keynames is expected
                return params
            }
        }
    }
}


/**
 * Defines the structure of a scroll-triggered style sheet for Three.js meshes when an html element is in-viewport .
 * Each section ID maps to mesh names, and each mesh name maps to animation functions.
 * @typedef {Object} ScrollStyleSheet
 * @property {Object.<string, MeshStyleConfig>} [sectionId] - HTML section ID (e.g., "three-scroll-step-1")
 */

/**
 * Configuration object for a specific mesh's scroll-triggered animations.
 * @typedef {Object} MeshStyleConfig
 * @property {function(THREE.Mesh): [number, number, number]} [position] - Returns target [x, y, z] position.
 * @property {function(THREE.Mesh): [number, number, number]} [rotation] - Returns target [x, y, z] rotation (in radians or degrees, depending on your setup).
 * @property {function(THREE.Mesh): [number, number, number]} [scale] - Returns target [x, y, z] scale.
 * @property {function(THREE.Mesh, any): Object} [customStyle] - Custom logic to apply (e.g., material changes). Returns optional params object.
 */

/**
 * Creates scroll-triggered animations for Three.js meshes based on viewport intersection.
 * When an HTML section (by ID) enters the viewport, matching meshes animate to defined styles.
 *
 * @param {THREE.Mesh[]} [meshes=[]] - Array of Three.js meshes. Each must have `userData.name` set to match stylesheet keys.
 * @param {ScrollStyleSheet} [styleSheet={}] - Declarative style mapping: sectionId → meshName → style functions.
 * @param {number} [threshold=0.5] - IntersectionObserver threshold (0 to 1). Animation triggers when this % of the section is visible.
 * @returns {{
 *   observers: IntersectionObserver[],
 *   elements: Element[]
 * }} Object containing active observers and observed DOM elements for cleanup or debugging.
 *
 * @example
 * const boxes = Array.from({ length: 5 }, (_, i) => {
 *   const mesh = new THREE.Mesh(geometry, material);
 *   mesh.userData.name = "box1";
 *   scene.add(mesh);
 *   return mesh;
 * });
 *
 * const styleSheet = {
 *   "three-scroll-step-1": {
 *     box1: {
 *       position: (m) => [1, -1, -5],
 *       rotation: (m) => [Math.PI/4, 0, 0],
 *       scale: (m) => [2, 2, 2],
 *       customStyle: (m) => {
 *         m.material.color.set("dodgerblue");
 *       }
 *     }
 *   }
 * };
 *
 * const sheet = createScrollSheet(boxes, styleSheet, 0.5);
 * // Later, to cleanup:
 * // sheet.observers.forEach(o => o.disconnect());
 */
export const createScrollSheet = (meshes = [], styleSheet = {}, threshold = 0.5) => {
    let keys = Object.keys(styleSheet);
    let elements = keys.map((identifierId) => {
        let ele = document.querySelector(`#${identifierId}`);
        return ele;
    })?.filter((ele) => ele);

    /**
     * Callback for IntersectionObserver — triggers animations when section enters viewport.
     * @param {IntersectionObserverEntry[]} entries
     */
    const observerCallback = (entries) => {
        const entry = entries?.[0];
        if (!entry?.isIntersecting) return;

        const sectionId = entry.target.id;
        const style = styleSheet[sectionId];
        if (!style) {
            console.warn("Could not find style for section:", sectionId, entry);
            return;
        }

        const meshNamesInStyle = Object.keys(style);
        const targetMeshes = meshes?.filter((mesh) =>
            mesh?.userData?.name && meshNamesInStyle.includes(mesh.userData.name)
        );

        targetMeshes?.forEach((mesh) => {
            const meshStyle = style[mesh.userData.name];

            const expected = {
                position: meshStyle?.position?.(mesh) || [mesh.position.x, mesh.position.y, mesh.position.z],
                rotation: meshStyle?.rotation?.(mesh) || [mesh.rotation.x, mesh.rotation.y, mesh.rotation.z],
                scale: meshStyle?.scale?.(mesh) || [mesh.scale.x, mesh.scale.y, mesh.scale.z],
                customObj: meshStyle?.customStyle?.(mesh) || {}
            };

            // Animate position
            const pos = { x: mesh.position.x, y: mesh.position.y, z: mesh.position.z };
            animate(pos, {
                x: expected.position[0],
                y: expected.position[1],
                z: expected.position[2],
                duration: 1000,
                easing: "linear",
                onUpdate: () => mesh.position.set(pos.x, pos.y, pos.z)
            });

            // Animate rotation
            const rot = { x: mesh.rotation.x, y: mesh.rotation.y, z: mesh.rotation.z };
            animate(rot, {
                x: expected.rotation[0],
                y: expected.rotation[1],
                z: expected.rotation[2],
                duration: 1000,
                easing: "linear",
                onUpdate: () => mesh.rotation.set(rot.x, rot.y, rot.z)
            });

            // Animate scale — FIXED: was incorrectly using rotation.set
            const scl = { x: mesh.scale.x, y: mesh.scale.y, z: mesh.scale.z };
            if (expected?.scale) {
                animate(scl, {
                    x: expected.scale[0],
                    y: expected.scale[1],
                    z: expected.scale[2],
                    duration: 1000,
                    easing: "linear",
                    onUpdate: () => mesh.scale.set(scl.x, scl.y, scl.z) // ✅ Fixed!
                });
            }
        });
    };

    const observers = elements.map((ele) => {
        const observer = new IntersectionObserver(observerCallback, { threshold });
        observer.observe(ele);
        return observer;
    });

    return { observers, elements };
};