@3driseai/3drise-viewer 0.1.1

package/dist/components/AnimatedObject.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { Object3D } from "three";
+import type { ThreeEvent } from "@react-three/fiber";
+import type { AnimatedTransform, AnchorSettings, CreatedObjectSettings } from "@3driseai/3drise-core";
+export interface AnimatedObjectProps {
+    stateKey: string;
+    transitionSettings: AnimatedTransform;
+    createdObject: CreatedObjectSettings;
+    speed?: number;
+    visible?: boolean;
+    children?: React.ReactNode;
+    parentRef?: React.RefObject<Object3D>;
+    handleObjectClick?: (createdObject: CreatedObjectSettings, ref: Object3D, event: ThreeEvent<MouseEvent>) => void;
+    onPointerEnter?: (e: ThreeEvent<PointerEvent>) => void;
+    onPointerLeave?: (e: ThreeEvent<PointerEvent>) => void;
+    anchor?: AnchorSettings | null;
+    hovered?: boolean;
+    animateMaterial?: boolean;
+}
+export declare const AnimatedObject: React.FC<AnimatedObjectProps>;
+export default AnimatedObject;
+//# sourceMappingURL=AnimatedObject.d.ts.map

package/dist/components/AnimatedObject.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedObject.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedObject.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACtG,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,iBAAiB,CAAC;IACtC,aAAa,EAAE,qBAAqB,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACtC,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACjH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACvD,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAGD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwDvD,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/dist/components/AnimatedObject.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback, memo } from 'react';
+import { usePathAnimation } from '../hooks/usePathAnimation.js';
+import EffectsGroup from './EffectsGroup.js';
+import { useObjectAnimation } from '../hooks/useObjectAnimation.js';
+import { hasHoverAnimation } from '../utils/hasHoverAnimation.js';
+export const AnimatedObject = memo(({ stateKey, transitionSettings, createdObject, 
+// speed = 1,
+visible = true, children, parentRef, handleObjectClick, onPointerEnter, onPointerLeave, anchor, hovered = false, animateMaterial = true,
+// isActive = false,
+ }) => {
+    const internalRef = useRef(null);
+    const groupRef = parentRef ?? internalRef;
+    const { position, scale, rotation, targetPosition, targetScale, targetRotation } = transitionSettings;
+    const animationStartTime = useRef(null);
+    const stepDuration = useRef(1);
+    const stepEase = useRef('linear');
+    const animProgress = useRef(0);
+    const hasHoverFunctionalities = hasHoverAnimation(createdObject.animations);
+    const hasMouseInteraction = (createdObject.actions?.length ?? 0) > 0;
+    const baseRef = useRef({ position: [...position], scale: [...scale], rotation: [...rotation] });
+    const targetRef = useRef({
+        position: targetPosition ? [...targetPosition] : [...position],
+        scale: targetScale ? [...targetScale] : [...scale],
+        rotation: targetRotation ? [...targetRotation] : [...rotation],
+    });
+    useObjectAnimation(createdObject, animateMaterial, {
+        enabled: createdObject.type !== 'gallery', // 
+        hovered,
+    });
+    const { startPathAnimation, updatePathAnimation, isAnimating: isPathAnimating } = usePathAnimation();
+    const syncTransform = useCallback(() => {
+        const obj = groupRef.current;
+        if (!obj)
+            return;
+        baseRef.current = { position: [...position], scale: [...scale], rotation: [...rotation] };
+        targetRef.current = {
+            position: targetPosition ? [...targetPosition] : [...position],
+            scale: targetScale ? [...targetScale] : [...scale],
+            rotation: targetRotation ? [...targetRotation] : [...rotation],
+        };
+        obj.position.set(...position);
+        obj.scale.set(...scale);
+        obj.rotation.set(...rotation);
+        if (targetPosition || targetScale || targetRotation)
+            animProgress.current = 0;
+    }, [position, scale, rotation, targetPosition, targetScale, targetRotation]);
+    useEffect(() => { syncTransform(); }, [position, scale, rotation, targetPosition, targetScale, targetRotation]);
+    const onClick = (e) => {
+        if (handleObjectClick && groupRef.current) {
+            e.stopPropagation();
+            handleObjectClick(createdObject, groupRef.current, e);
+        }
+    };
+    // console.log("AnimatedObject render", { name: createdObject.meshSettings.name, id: createdObject.id, hovered, hasHoverFunctionalities })
+    if (createdObject.type === 'particles' || createdObject.type === 'gallery' || (!hasHoverFunctionalities && !hasMouseInteraction)) {
+        return _jsx(_Fragment, { children: _jsxs("group", { ref: groupRef, position: position, scale: scale, rotation: rotation, visible: visible, onClick: onClick, 
+                // onPointerEnter={onPointerEnter}
+                // onPointerLeave={onPointerLeave}
+                name: createdObject.meshSettings.name, userData: { id: createdObject.id }, children: [children, _jsx(EffectsGroup, { createdObject: createdObject })] }) });
+    }
+    return (_jsx(_Fragment, { children: _jsxs("group", { ref: groupRef, position: position, scale: scale, rotation: rotation, visible: visible, onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, name: createdObject.meshSettings.name, userData: { id: createdObject.id }, children: [children, _jsx(EffectsGroup, { createdObject: createdObject })] }) }));
+});
+AnimatedObject.displayName = 'AnimatedObject';
+export default AnimatedObject;

package/dist/components/Bubbles.d.ts

@@ -0,0 +1,9 @@
+import type { BubblesConfig } from '@3driseai/3drise-core';
+import React from "react";
+export interface BubblesProps {
+    config: BubblesConfig;
+    boundingRadius?: number;
+}
+declare const Bubbles: React.FC<BubblesProps>;
+export default Bubbles;
+//# sourceMappingURL=Bubbles.d.ts.map

package/dist/components/Bubbles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bubbles.d.ts","sourceRoot":"","sources":["../../src/components/Bubbles.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,MAAM,WAAW,YAAY;IACzB,MAAM,EAAE,aAAa,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiGnC,CAAC;AACF,eAAe,OAAO,CAAC"}

package/dist/components/Bubbles.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { BubblesPointsMaterial } from '@3driseai/3drise-core';
+const MAX_BUBBLES = 256;
+const Bubbles = ({ config }) => {
+    const positions = useMemo(() => new Float32Array(MAX_BUBBLES * 3), []);
+    const velocities = useMemo(() => new Float32Array(MAX_BUBBLES * 3), []);
+    const ages = useMemo(() => new Float32Array(MAX_BUBBLES), []);
+    const lives = useMemo(() => new Float32Array(MAX_BUBBLES), []);
+    const baseSizes = useMemo(() => new Float32Array(MAX_BUBBLES), []);
+    const phases = useMemo(() => new Float32Array(MAX_BUBBLES), []);
+    const alive = useMemo(() => new Uint8Array(MAX_BUBBLES), []);
+    const geometry = useMemo(() => {
+        const g = new THREE.BufferGeometry();
+        g.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+        g.setAttribute('aAge', new THREE.BufferAttribute(ages, 1));
+        g.setAttribute('aLife', new THREE.BufferAttribute(lives, 1));
+        g.setAttribute('aBaseSize', new THREE.BufferAttribute(baseSizes, 1));
+        g.setAttribute('aPhase', new THREE.BufferAttribute(phases, 1));
+        for (let i = 0; i < MAX_BUBBLES; i++)
+            positions[i * 3 + 1] = -1e6;
+        return g;
+    }, [positions, ages, lives, baseSizes, phases]);
+    const material = useMemo(() => {
+        const m = new BubblesPointsMaterial();
+        m.transparent = true;
+        m.depthWrite = false;
+        m.blending = THREE.NormalBlending;
+        return m;
+    }, []);
+    useEffect(() => {
+        const u = material.uniforms;
+        const [cA, cB, cC] = config.colors ?? ['#aaccff', '#ffaadd', '#aaffcc'];
+        u.uColorA.value.set(cA);
+        u.uColorB.value.set(cB);
+        u.uColorC.value.set(cC);
+        u.uScale.value = (config.scale ?? 1) / 10;
+        u.uOpacity.value = config.opacity ?? 0.6;
+        u.uIridescence.value = config.iridescence ?? 0.7;
+        u.uSpeed.value = config.speed ?? 1;
+    }, [config.colors, config.scale, config.opacity, config.iridescence, config.speed, material]);
+    useEffect(() => () => { geometry.dispose(); material.dispose(); }, [geometry, material]);
+    const spawnAccum = useRef(0);
+    useFrame((state, delta) => {
+        material.uniforms.uTime.value = state.clock.getElapsedTime();
+        const scale = config.scale ?? 1;
+        const spawnRate = config.spawnRate ?? 8;
+        const floatSpeed = (config.floatSpeed ?? 0.5) * (config.speed ?? 1);
+        const lifetimeMs = config.lifetimeMs ?? 4000;
+        const speed = config.speed ?? 1;
+        spawnAccum.current += spawnRate * delta;
+        let toSpawn = Math.floor(spawnAccum.current);
+        spawnAccum.current -= toSpawn;
+        const dtMs = delta * 1000 * speed;
+        let scan = 0;
+        while (toSpawn > 0 && scan < MAX_BUBBLES) {
+            if (alive[scan] === 0) {
+                const base = scan * 3;
+                // Spawn at local origin with small lateral jitter — parent group's
+                // transform places the system in world space.
+                positions[base + 0] = (Math.random() - 0.5) * 0.2 * scale;
+                positions[base + 1] = (Math.random() - 0.5) * 0.1 * scale;
+                positions[base + 2] = (Math.random() - 0.5) * 0.2 * scale;
+                velocities[base + 0] = (Math.random() - 0.5) * 0.4;
+                velocities[base + 1] = floatSpeed * (0.7 + Math.random() * 0.6);
+                velocities[base + 2] = (Math.random() - 0.5) * 0.4;
+                ages[scan] = 0;
+                lives[scan] = lifetimeMs * (0.7 + Math.random() * 0.6);
+                baseSizes[scan] = (16 + Math.random() * 28) * (scale / 10);
+                phases[scan] = Math.random() * 100;
+                alive[scan] = 1;
+                toSpawn--;
+            }
+            scan++;
+        }
+        for (let j = 0; j < MAX_BUBBLES; j++) {
+            if (alive[j] === 0)
+                continue;
+            const base = j * 3;
+            ages[j] += dtMs;
+            if (ages[j] >= lives[j]) {
+                alive[j] = 0;
+                positions[base + 1] = -1e6;
+                continue;
+            }
+            velocities[base + 0] *= 0.99;
+            velocities[base + 2] *= 0.99;
+            const wobble = Math.sin(state.clock.getElapsedTime() * 1.3 * speed + phases[j]) * 0.05;
+            positions[base + 0] += velocities[base + 0] * delta + wobble * delta;
+            positions[base + 1] += velocities[base + 1] * delta;
+            positions[base + 2] += velocities[base + 2] * delta;
+        }
+        geometry.attributes.position.needsUpdate = true;
+        geometry.attributes.aAge.needsUpdate = true;
+        geometry.attributes.aLife.needsUpdate = true;
+        geometry.attributes.aBaseSize.needsUpdate = true;
+        geometry.attributes.aPhase.needsUpdate = true;
+    });
+    if (!config.enabled)
+        return null;
+    return _jsx("points", { geometry: geometry, material: material, frustumCulled: false });
+};
+export default Bubbles;

package/dist/components/CameraController.d.ts

@@ -0,0 +1,10 @@
+import type { CameraState } from "@3driseai/3drise-core";
+interface CameraControllerProps {
+    settings: CameraState;
+    enableAutoAnimation?: boolean;
+    animationDuration?: number;
+    animationEase?: string;
+}
+export declare const CameraController: React.FC<CameraControllerProps>;
+export default CameraController;
+//# sourceMappingURL=CameraController.d.ts.map

package/dist/components/CameraController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CameraController.d.ts","sourceRoot":"","sources":["../../src/components/CameraController.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,UAAU,qBAAqB;IAC3B,QAAQ,EAAE,WAAW,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAGD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoJ5D,CAAC;AACF,eAAe,gBAAgB,CAAC"}

package/dist/components/CameraController.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useCameraAnimation } from '../hooks/useCameraAnimation.js';
+import { cameraManager } from '../utils/CameraSingleton.js';
+import { useAnimationEvents } from '../hooks/useAnimationEvents.js';
+import { usePathAnimation } from '../hooks/usePathAnimation.js';
+import { OrbitControls } from "@react-three/drei";
+export const CameraController = ({ enableAutoAnimation = true, animationDuration = 1, animationEase = "power2.out", settings, }) => {
+    const { camera, set } = useThree();
+    const cameraRef = useRef(camera);
+    const transformAnimationProgress = useRef(0);
+    const controlsRef = useRef(null);
+    const { position, orientation, fov, near, far, controls } = settings;
+    const initialControls = useRef(controls);
+    const { startPathAnimation, updatePathAnimation, isAnimating: isPathAnimating, } = usePathAnimation();
+    // Use camera animation hook for animated transitions (via events)
+    const { animateCamera, animateHandlers, isAnimating } = useCameraAnimation({
+        autoAnimate: false,
+        defaultDuration: animationDuration,
+        defaultEase: animationEase
+    });
+    // Track if currently in an animated transition
+    const isInAnimatedTransition = useRef(false);
+    // Register camera with singleton on mount and when camera changes
+    useEffect(() => {
+        cameraRef.current = camera;
+        set({ camera: cameraRef.current });
+        cameraManager.setCamera(cameraRef.current);
+    }, [camera, set]);
+    // Sync camera position and orientation from state (only when not animating)
+    useEffect(() => {
+        if (isInAnimatedTransition.current || isAnimating())
+            return;
+        const cam = cameraRef.current;
+        if (!cam)
+            return;
+        // Check if camera is already synced
+        if (!cameraManager.isSynced(position, orientation)) {
+            cam.position.set(...position);
+            if (orientation.length === 4) {
+                cam.quaternion.set(...orientation);
+            }
+            else {
+                cam.rotation.set(orientation[0], orientation[1], orientation[2]);
+            }
+            console.log("CameraController: Synced position/orientation", position, orientation);
+        }
+    }, [position, orientation]);
+    // Sync controls config changes imperatively via ref (after initial mount)
+    useEffect(() => {
+        const orbitControls = controlsRef.current;
+        if (!orbitControls)
+            return;
+        orbitControls.enabled = controls.enabled;
+        orbitControls.target.set(controls.target[0], controls.target[1], controls.target[2]);
+        orbitControls.enablePan = controls.enablePan;
+        orbitControls.enableRotate = controls.enableRotate;
+        orbitControls.autoRotate = controls.autoRotate;
+        orbitControls.autoRotateSpeed = controls.autoRotateSpeed;
+        orbitControls.zoomSpeed = controls.zoomSpeed;
+        orbitControls.panSpeed = controls.panSpeed;
+        orbitControls.rotateSpeed = controls.rotateSpeed;
+        orbitControls.minDistance = controls.minDistance;
+        orbitControls.maxDistance = controls.maxDistance;
+        orbitControls.minPolarAngle = controls.minPolarAngle ?? -Infinity;
+        orbitControls.maxPolarAngle = controls.maxPolarAngle ?? Infinity;
+        orbitControls.minAzimuthAngle = controls.minAzimuthAngle ?? -Infinity;
+        orbitControls.maxAzimuthAngle = controls.maxAzimuthAngle ?? Infinity;
+    }, [controls]);
+    // Sync camera projection settings from state
+    useEffect(() => {
+        const cam = cameraRef.current;
+        if (!cam)
+            return;
+        let needsUpdate = false;
+        if (cam.fov !== fov) {
+            cam.fov = fov;
+            needsUpdate = true;
+        }
+        if (cam.near !== near) {
+            cam.near = near;
+            needsUpdate = true;
+        }
+        if (cam.far !== far) {
+            cam.far = far;
+            needsUpdate = true;
+        }
+        if (needsUpdate) {
+            cam.updateProjectionMatrix();
+        }
+    }, [fov, near, far]);
+    // Handle animation events (step-based animations)
+    useAnimationEvents({
+        onStepStart: (event) => {
+            // console.log('Camera controller - Step started:', event.step);
+            if (event.step?.transitions) {
+                const stepDuration = event.step.duration || 1;
+                event.step.transitions.forEach((transition) => {
+                    const { state, properties, pathId } = transition;
+                    if (state === 'camera') {
+                        console.log('Camera transition detected. Starting animation to new camera state:', properties);
+                        isInAnimatedTransition.current = true;
+                        if (pathId) {
+                            const offset = camera
+                                ? [camera.position.x, camera.position.y, camera.position.z]
+                                : [0, 0, 0];
+                            console.log(`Starting path animation with ID ${pathId} and offset`, offset);
+                            startPathAnimation(pathId, stepDuration, {
+                                offset,
+                                applyRotation: false
+                            });
+                            transformAnimationProgress.current = 0;
+                        }
+                        // console.log("Animating camera to:", targetSettings, "over duration:", stepDuration);
+                        const startSettings = properties.from ?
+                            {
+                                position: properties.from.position,
+                                // orientation: properties.from.orientation,
+                            } : {
+                            position: camera.position,
+                            // orientation: camera.rotation,
+                        };
+                        const targetSettings = properties.to;
+                        // console.log("Starting camera animation from:", startSettings);
+                        // startSettings.position && camera.position.set(startSettings.position[0], startSettings.position[1], startSettings.position[2]);
+                        // camera.rotation.set(startSettings.orientation[0], startSettings.orientation[1], startSettings.orientation[2]);
+                        animateCamera(targetSettings, stepDuration, event.step?.ease, properties.to.target)
+                            .then(() => {
+                            isInAnimatedTransition.current = false;
+                            if (properties.to.target) {
+                                controlsRef.current?.target.set(properties.to.target[0], properties.to.target[1], properties.to.target[2]);
+                            }
+                            ;
+                        });
+                    }
+                });
+            }
+        }
+    });
+    // Frame loop for path animations and mouse handlers
+    useFrame((state, delta) => {
+        if (isPathAnimating()) {
+            const stillAnimating = updatePathAnimation(delta, camera);
+            if (!stillAnimating) {
+                transformAnimationProgress.current = 1;
+            }
+        }
+        else {
+            animateHandlers(state.pointer);
+        }
+    });
+    const ic = initialControls.current;
+    return _jsx(OrbitControls, { ref: controlsRef, makeDefault: true, enabled: ic.enabled, 
+        // target={new Vector3(...ic.target)}
+        enablePan: ic.enablePan, enableRotate: ic.enableRotate, autoRotate: ic.autoRotate, autoRotateSpeed: ic.autoRotateSpeed, zoomSpeed: ic.zoomSpeed, panSpeed: ic.panSpeed, rotateSpeed: ic.rotateSpeed, minDistance: ic.minDistance, maxDistance: ic.maxDistance, minPolarAngle: ic.minPolarAngle ?? -Infinity, maxPolarAngle: ic.maxPolarAngle ?? Infinity, minAzimuthAngle: ic.minAzimuthAngle ?? -Infinity, maxAzimuthAngle: ic.maxAzimuthAngle ?? Infinity });
+};
+export default CameraController;

package/dist/components/Clouds.d.ts

@@ -0,0 +1,9 @@
+import type { TimeSettings, CreatedObjectSettings } from '@3driseai/3drise-core';
+import React from "react";
+export interface CloudsProps {
+    settings: CreatedObjectSettings;
+    timeSettings?: TimeSettings;
+}
+declare const Clouds: React.FC<CloudsProps>;
+export default Clouds;
+//# sourceMappingURL=Clouds.d.ts.map

package/dist/components/Clouds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clouds.d.ts","sourceRoot":"","sources":["../../src/components/Clouds.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACjF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,MAAM,WAAW,WAAW;IACxB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,YAAY,CAAC,EAAE,YAAY,CAAC;CAC/B;AAmFD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4LjC,CAAC;AACF,eAAe,MAAM,CAAC"}