@3driseai/3drise-viewer 0.1.1

package/dist/hooks/useGsapAnimation.d.ts

@@ -0,0 +1,122 @@
+/**
+ * Animation presets for common 3D animations
+ */
+export declare const ANIMATION_PRESETS: {
+    fadeIn: {
+        duration: number;
+        ease: string;
+        scale: number[];
+        delay: number;
+    };
+    fadeOut: {
+        duration: number;
+        ease: string;
+        scale: number[];
+        delay: number;
+    };
+    slideUp: {
+        duration: number;
+        ease: string;
+        position: number[];
+        delay: number;
+    };
+    slideDown: {
+        duration: number;
+        ease: string;
+        position: number[];
+        delay: number;
+    };
+    spin: {
+        duration: number;
+        ease: string;
+        rotation: number[];
+        delay: number;
+    };
+    bounce: {
+        duration: number;
+        ease: string;
+        scale: number[];
+        delay: number;
+    };
+    elastic: {
+        duration: number;
+        ease: string;
+        scale: number[];
+        delay: number;
+    };
+};
+/**
+ * Custom hook for GSAP animations in 3D scenes
+ * Provides context-safe animation functions for Three.js objects
+ */
+export declare const useGsapAnimation: (dependencies?: any[]) => {
+    containerRef: import("react").RefObject<any>;
+    contextSafe: import("@gsap/react").ContextSafeFunc;
+    animateObjects: (objects: any, settings?: {
+        duration: number;
+        ease: string;
+        position: number[];
+        rotation: number[];
+        scale: number[];
+        delay: number;
+    }) => void;
+    animateWithPreset: (objects: any, preset: any, overrides?: {}) => void;
+    animateEntrance: (objects: any, settings?: {}) => void;
+    animateExit: (objects: any, settings?: {}) => void;
+    animatePulse: (objects: any, settings?: {}) => void;
+    animateRotation: (objects: any, settings?: {}) => void;
+    animateWave: (objects: any, amplitude?: number, frequency?: number, settings?: {}) => void;
+    createTimeline: () => () => any;
+    stopAnimations: (objects: any) => void;
+    pauseTimeline: () => void;
+    resumeTimeline: () => void;
+    killTimeline: () => void;
+    animateSettings: (currentValues: any, endValues: any, duration: any, onComplete: any, onUpdate: any) => void;
+    timeline: any;
+    presets: {
+        fadeIn: {
+            duration: number;
+            ease: string;
+            scale: number[];
+            delay: number;
+        };
+        fadeOut: {
+            duration: number;
+            ease: string;
+            scale: number[];
+            delay: number;
+        };
+        slideUp: {
+            duration: number;
+            ease: string;
+            position: number[];
+            delay: number;
+        };
+        slideDown: {
+            duration: number;
+            ease: string;
+            position: number[];
+            delay: number;
+        };
+        spin: {
+            duration: number;
+            ease: string;
+            rotation: number[];
+            delay: number;
+        };
+        bounce: {
+            duration: number;
+            ease: string;
+            scale: number[];
+            delay: number;
+        };
+        elastic: {
+            duration: number;
+            ease: string;
+            scale: number[];
+            delay: number;
+        };
+    };
+};
+export default useGsapAnimation;
+//# sourceMappingURL=useGsapAnimation.d.ts.map

package/dist/hooks/useGsapAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGsapAnimation.d.ts","sourceRoot":"","sources":["../../src/hooks/useGsapAnimation.ts"],"names":[],"mappings":"AA2BA;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2C7B,CAAC;AACF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,eAAc,GAAG,EAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwPxD,CAAC;AACF,eAAe,gBAAgB,CAAC"}

package/dist/hooks/useGsapAnimation.js

@@ -0,0 +1,316 @@
+import { useRef, useCallback } from 'react';
+import { gsap } from 'gsap';
+import { useGSAP } from '@gsap/react';
+import * as THREE from 'three';
+/**
+ * Default animation settings
+ */
+const DEFAULT_SETTINGS = {
+    duration: 1,
+    ease: "power2.out",
+    position: [0, 0, 0],
+    rotation: [0, 0, 0],
+    scale: [1, 1, 1],
+    delay: 0
+};
+/**
+ * Animation presets for common 3D animations
+ */
+export const ANIMATION_PRESETS = {
+    fadeIn: {
+        duration: 0.8,
+        ease: "power2.out",
+        scale: [1, 1, 1],
+        delay: 0
+    },
+    fadeOut: {
+        duration: 0.5,
+        ease: "power2.in",
+        scale: [0, 0, 0],
+        delay: 0
+    },
+    slideUp: {
+        duration: 1,
+        ease: "back.out(1.7)",
+        position: [0, 2, 0],
+        delay: 0
+    },
+    slideDown: {
+        duration: 1,
+        ease: "power2.out",
+        position: [0, -2, 0],
+        delay: 0
+    },
+    spin: {
+        duration: 2,
+        ease: "power1.inOut",
+        rotation: [0, Math.PI * 2, 0],
+        delay: 0
+    },
+    bounce: {
+        duration: 0.6,
+        ease: "bounce.out",
+        scale: [1.2, 1.2, 1.2],
+        delay: 0
+    },
+    elastic: {
+        duration: 1.5,
+        ease: "elastic.out(1, 0.3)",
+        scale: [1, 1, 1],
+        delay: 0
+    }
+};
+/**
+ * Custom hook for GSAP animations in 3D scenes
+ * Provides context-safe animation functions for Three.js objects
+ */
+export const useGsapAnimation = (dependencies = []) => {
+    const containerRef = useRef(null);
+    const timelineRef = useRef(null);
+    const { contextSafe } = useGSAP({
+        scope: containerRef,
+        dependencies
+    });
+    /**
+     * Animates multiple 3D objects with the given settings
+     */
+    const animateObjects = (objects, settings = DEFAULT_SETTINGS) => {
+        console.log("Animating objects with settings:", settings, objects);
+        const finalSettings = { ...DEFAULT_SETTINGS, ...settings };
+        objects.forEach((object, index) => {
+            const targetPosition = new THREE.Vector3(...(finalSettings.position || [0, 0, 0]));
+            const targetRotation = new THREE.Euler(...(finalSettings.rotation || [0, 0, 0]), "XYZ");
+            const targetScale = new THREE.Vector3(...(finalSettings.scale || [1, 1, 1]));
+            const delay = (finalSettings.delay || 0) + (index * 0.1); // Stagger effect
+            if (finalSettings.position) {
+                gsap.to(object.position, {
+                    x: targetPosition.x,
+                    y: targetPosition.y,
+                    z: targetPosition.z,
+                    duration: finalSettings.duration,
+                    ease: finalSettings.ease,
+                    delay,
+                    onStart: index === 0 ? finalSettings.onStart : undefined,
+                    onUpdate: finalSettings.onUpdate,
+                    onComplete: index === objects.length - 1 ? finalSettings.onComplete : undefined
+                });
+            }
+            // Animate rotation
+            if (finalSettings.rotation) {
+                gsap.to(object.rotation, {
+                    x: targetRotation.x,
+                    y: targetRotation.y,
+                    z: targetRotation.z,
+                    duration: finalSettings.duration,
+                    ease: finalSettings.ease,
+                    delay
+                });
+            }
+            // Animate scale
+            if (finalSettings.scale) {
+                gsap.to(object.scale, {
+                    x: targetScale.x,
+                    y: targetScale.y,
+                    z: targetScale.z,
+                    duration: finalSettings.duration,
+                    ease: finalSettings.ease,
+                    delay
+                });
+            }
+        });
+    };
+    const animateSettings = (currentValues, endValues, duration, onComplete, onUpdate) => {
+        // Create a proxy object that will hold all values during animation
+        const proxy = { ...currentValues };
+        // Create the animation object with all the end values as direct properties
+        const animationProps = {
+            duration,
+            ease: "power2.out",
+            onUpdate: () => {
+                // Create a fresh object with current values to avoid reference issues
+                const updatedSettings = { ...currentValues };
+                // Copy all animated values from proxy to updatedSettings
+                Object.keys(endValues).forEach(key => {
+                    updatedSettings[key] = proxy[key];
+                });
+                onUpdate && onUpdate(updatedSettings);
+            },
+            onComplete: () => {
+                // Create a clean object with final values for the callback
+                const finalSettings = { ...endValues };
+                onComplete && onComplete(finalSettings);
+            },
+        };
+        // Add all the end values as properties to animate
+        Object.keys(endValues).forEach(key => {
+            animationProps[key] = endValues[key];
+        });
+        // Run the animation on our proxy object
+        gsap.to(proxy, animationProps);
+    };
+    // const animateColorCycle = () => {
+    //     const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffa726'];
+    //     objectsIds.forEach((objectId, index) => {
+    //       const color = colors[index % colors.length];
+    //       animateObject(objectId, {
+    //         color: new Color(color)
+    //       }, 1000, {
+    //         animationName: 'colorCycle',
+    //         delay: index * 150,
+    //         yoyo: true,
+    //         loop: true,
+    //         ease: 'power2.inOut'
+    //       });
+    //     });
+    //   };
+    /**
+     * Animates a single object with preset animations
+     */
+    const animateWithPreset = useCallback((objects, preset, overrides = {}) => {
+        const presetSettings = ANIMATION_PRESETS[preset];
+        const finalSettings = { ...presetSettings, ...overrides };
+        animateObjects(objects, finalSettings);
+    }, [animateObjects]);
+    /**
+     * Creates a timeline for complex sequential animations
+     */
+    const createTimeline = useCallback(() => {
+        return contextSafe(() => {
+            timelineRef.current = gsap.timeline();
+            return timelineRef.current;
+        });
+    }, [contextSafe]);
+    /**
+     * Animates object entrance (fade in from below)
+     */
+    const animateEntrance = useCallback((objects, settings = {}) => {
+        objects.forEach((object) => {
+            // Set initial state
+            const originalY = object.position.y;
+            object.position.y -= 2;
+            object.scale.setScalar(0);
+            // Animate to final state
+            animateObjects([object], {
+                duration: 0.8,
+                ease: "back.out(1.7)",
+                position: [object.position.x, originalY, object.position.z],
+                scale: [1, 1, 1],
+                ...settings
+            });
+        });
+    }, [animateObjects]);
+    /**
+     * Animates object exit (fade out and scale down)
+     */
+    const animateExit = useCallback((objects, settings = {}) => {
+        objects.forEach((object) => {
+            animateObjects([object], {
+                duration: 0.5,
+                ease: "power2.in",
+                scale: [0, 0, 0],
+                position: [object.position.x, object.position.y - 1, object.position.z],
+                ...settings
+            });
+        });
+    }, [animateObjects]);
+    /**
+     * Pulses objects (scale up and down)
+     */
+    const animatePulse = useCallback((objects, settings = {}) => {
+        console.log("Animating pulse for objects", objects, "with settings", settings);
+        objects.forEach((object, index) => {
+            const delay = (settings.delay || 0) + (index * 0.1);
+            console.log("Animating pulse for object", object, "with delay", delay);
+            gsap.to(object.scale, {
+                x: 2.2,
+                y: 2.2,
+                z: 2.2,
+                duration: 0.3,
+                ease: "power2.out",
+                delay,
+                yoyo: true,
+                repeat: 1,
+                onComplete: settings.onComplete
+            });
+        });
+    }, []);
+    /**
+     * Rotates objects continuously
+     */
+    const animateRotation = useCallback((objects, settings = {}) => {
+        objects.forEach((object) => {
+            gsap.to(object.rotation, {
+                y: object.rotation.y + Math.PI * 2,
+                duration: settings.duration || 2,
+                ease: settings.ease || "none",
+                repeat: -1,
+                delay: settings.delay || 0
+            });
+        });
+    }, []);
+    /**
+     * Animates objects in a wave pattern
+     */
+    const animateWave = useCallback((objects, amplitude = 1, frequency = 1, settings = {}) => {
+        objects.forEach((object, index) => {
+            const delay = index * 0.1;
+            gsap.to(object.position, {
+                y: object.position.y + amplitude * Math.sin(frequency * index),
+                duration: settings.duration || 1,
+                ease: settings.ease || "sine.inOut",
+                delay,
+                yoyo: true,
+                repeat: -1
+            });
+        });
+    }, []);
+    /**
+     * Stops all animations on the given objects
+     */
+    const stopAnimations = useCallback((objects) => {
+        objects.forEach((object) => {
+            gsap.killTweensOf(object.position);
+            gsap.killTweensOf(object.rotation);
+            gsap.killTweensOf(object.scale);
+        });
+    }, []);
+    /**
+     * Pauses the current timeline
+     */
+    const pauseTimeline = useCallback(() => {
+        timelineRef.current?.pause();
+    }, []);
+    /**
+     * Resumes the current timeline
+     */
+    const resumeTimeline = useCallback(() => {
+        timelineRef.current?.resume();
+    }, []);
+    /**
+     * Kills the current timeline
+     */
+    const killTimeline = useCallback(() => {
+        timelineRef.current?.kill();
+        timelineRef.current = null;
+    }, []);
+    return {
+        containerRef,
+        contextSafe,
+        animateObjects,
+        animateWithPreset,
+        animateEntrance,
+        animateExit,
+        animatePulse,
+        animateRotation,
+        animateWave,
+        createTimeline,
+        stopAnimations,
+        pauseTimeline,
+        resumeTimeline,
+        killTimeline,
+        animateSettings,
+        timeline: timelineRef.current,
+        presets: ANIMATION_PRESETS
+    };
+};
+export default useGsapAnimation;

package/dist/hooks/useInteraction.d.ts

@@ -0,0 +1,12 @@
+import type { AnimationSequence, CameraState } from '@3driseai/3drise-core';
+export declare function useInteraction({ cameraSettings, sequences, }: {
+    cameraSettings: CameraState;
+    sequences: AnimationSequence[];
+}): {
+    executeInteraction: (params: any) => void;
+    currentAnimatedRef: import("react").RefObject<any>;
+    glowingObjects: import("react").MutableRefObject<Set<string>>;
+    vanishedObjects: import("react").MutableRefObject<Set<string>>;
+};
+export default useInteraction;
+//# sourceMappingURL=useInteraction.d.ts.map

package/dist/hooks/useInteraction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInteraction.d.ts","sourceRoot":"","sources":["../../src/hooks/useInteraction.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAA4B,MAAM,uBAAuB,CAAC;AAatG,wBAAgB,cAAc,CAAC,EAE/B,cAAc,EAAE,SAAS,GAAG,EAAE;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,SAAS,EAAE,iBAAiB,EAAE,CAAC;CAClC;;;;;EAwPR;AACD,eAAe,cAAc,CAAC"}