@ntalmagor/3drize-viewer 0.1.16 → 0.1.18

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

@@ -1 +1 @@
-{"version":3,"file":"AnimatedObject.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,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,wBAAwB,CAAC;AAQvG,MAAM,WAAW,mBAAmB;IAClC,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;CAE3B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+JvD,CAAC;AAGH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AnimatedObject.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,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,wBAAwB,CAAC;AAMvG,MAAM,WAAW,mBAAmB;IAClC,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;CAE3B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuGvD,CAAC;AAGH,eAAe,cAAc,CAAC"}

package/dist/components/AnimatedObject.js

@@ -3,6 +3,7 @@ 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,
@@ -15,6 +16,8 @@ visible = true, children, parentRef, handleObjectClick, onPointerEnter, onPointe
     const stepDuration = useRef(1);
     const stepEase = useRef('linear');
     const animProgress = useRef(0);
+    const hasHoverFunctionalities = hasHoverAnimation(createdObject.animations);
+    const hasMouseInteraction = createdObject.interactions && createdObject.interactions.actions.length > 0;
     const baseRef = useRef({ position: [...position], scale: [...scale], rotation: [...rotation] });
     const targetRef = useRef({
         position: targetPosition ? [...targetPosition] : [...position],
@@ -43,85 +46,20 @@ visible = true, children, parentRef, handleObjectClick, onPointerEnter, onPointe
             animProgress.current = 0;
     }, [position, scale, rotation, targetPosition, targetScale, targetRotation]);
     useEffect(() => { syncTransform(); }, [position, scale, rotation, targetPosition, targetScale, targetRotation]);
-    // useAnimationEvents({
-    //   onStepStart: (event) => {
-    //     console.log('Received animation event:', event);
-    //     if (!event.step?.transitions) return;
-    //     const d = event.step.duration || 1;
-    //     for (const { state, properties, pathId } of event.step.transitions) {
-    //       console.log(`Animation event for state: ${state}, object stateKey: ${stateKey}`);
-    //       if (state !== stateKey) continue;
-    //       if (properties.to.visible === false) {
-    //         if (groupRef.current) groupRef.current.visible = false;
-    //       } else {
-    //         if (groupRef.current) groupRef.current.visible = true;
-    //         stepDuration.current = d;
-    //         stepEase.current = event.step.ease || 'linear';
-    //         animationStartTime.current = performance.now();
-    //         animProgress.current = 0;
-    //         if (pathId) {
-    //           startPathAnimation(pathId, d, { ease: stepEase.current });
-    //         } else {
-    //           const cur = targetRef.current;
-    //           baseRef.current   = {
-    //             position: (properties.from?.position ? [...properties.from.position] : cur.position) as [number, number, number],
-    //             rotation: (properties.from?.rotation ? [...properties.from.rotation] : cur.rotation) as [number, number, number],
-    //             scale:    (properties.from?.scale    ? [...properties.from.scale]    : cur.scale)    as [number, number, number],
-    //           };
-    //           targetRef.current = {
-    //             position: (properties.to?.position ? [...properties.to.position] : cur.position) as [number, number, number],
-    //             rotation: (properties.to?.rotation ? [...properties.to.rotation] : cur.rotation) as [number, number, number],
-    //             scale:    (properties.to?.scale    ? [...properties.to.scale]    : cur.scale)    as [number, number, number],
-    //           };
-    //         }
-    //       }
-    //     }
-    //   },
-    // });
-    // const applyTransformProgress = useCallback(() => {
-    //   const obj = groupRef.current;
-    //   if (!obj || animationStartTime.current === null) return;
-    //   const p = AnimationsManager.getProgressFromTime(
-    //     animationStartTime.current,
-    //     stepDuration.current,
-    //     stepEase.current,
-    //   );
-    //   animProgress.current = p;
-    //   const b = baseRef.current, t = targetRef.current;
-    //   obj.position.set(
-    //     b.position[0] + (t.position[0] - b.position[0]) * p,
-    //     b.position[1] + (t.position[1] - b.position[1]) * p,
-    //     b.position[2] + (t.position[2] - b.position[2]) * p,
-    //   );
-    //   obj.scale.set(
-    //     b.scale[0] + (t.scale[0] - b.scale[0]) * p,
-    //     b.scale[1] + (t.scale[1] - b.scale[1]) * p,
-    //     b.scale[2] + (t.scale[2] - b.scale[2]) * p,
-    //   );
-    //   obj.rotation.set(
-    //     b.rotation[0] + (t.rotation[0] - b.rotation[0]) * p,
-    //     b.rotation[1] + (t.rotation[1] - b.rotation[1]) * p,
-    //     b.rotation[2] + (t.rotation[2] - b.rotation[2]) * p,
-    //   );
-    // }, []);
-    // useFrame((_state, delta) => {
-    //   if (!visible || !groupRef.current) return;
-    //   if (animProgress.current < 1) {
-    //     if (isPathAnimating()) {
-    //       const still = updatePathAnimation(delta, groupRef.current);
-    //       if (!still) { animProgress.current = 1; animationStartTime.current = null; }
-    //     } else if (animationStartTime.current !== null) {
-    //       applyTransformProgress();
-    //     }
-    //   }
-    //   if (anchor) applyAnchorSettings(anchor, groupRef.current, rotation);
-    // });
     const onClick = (e) => {
         if (handleObjectClick && groupRef.current) {
+            e.stopPropagation();
             handleObjectClick(createdObject, groupRef.current, e);
         }
     };
-    return (_jsx(_Fragment, { children: _jsxs("group", { ref: groupRef, position: position, scale: scale, rotation: rotation, visible: visible, onClick: (e) => { e.stopPropagation(); onClick?.(e); }, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, name: createdObject.meshSettings.name, userData: { id: createdObject.id }, children: [children, _jsx(EffectsGroup, { createdObject: createdObject })] }) }));
+    // 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/CameraController.d.ts

@@ -1,9 +1,9 @@
 import type { CameraState } from '@ntalmagor/3drize-core';
 interface CameraControllerProps {
+    settings: CameraState;
     enableAutoAnimation?: boolean;
     animationDuration?: number;
     animationEase?: string;
-    settings: CameraState;
 }
 export declare const CameraController: React.FC<CameraControllerProps>;
 export default CameraController;

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

@@ -1 +1 @@
-{"version":3,"file":"CameraController.d.ts","sourceRoot":"","sources":["../../src/components/CameraController.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAiC,MAAM,wBAAwB,CAAC;AAGzF,UAAU,qBAAqB;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,WAAW,CAAA;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2I5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CameraController.d.ts","sourceRoot":"","sources":["../../src/components/CameraController.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAiD,MAAM,wBAAwB,CAAC;AAIzG,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,WAAW,CAAA;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsM5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/CameraController.js

@@ -1,14 +1,18 @@
+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';
-export const CameraController = ({ enableAutoAnimation = true, animationDuration = 1, animationEase = "power2.out", settings }) => {
+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 { position, orientation, fov, near, far } = settings;
+    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({
@@ -43,6 +47,27 @@ export const CameraController = ({ enableAutoAnimation = true, animationDuration
             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;
@@ -68,22 +93,15 @@ export const CameraController = ({ enableAutoAnimation = true, animationDuration
     // Handle animation events (step-based animations)
     useAnimationEvents({
         onStepStart: (event) => {
-            console.log('Camera controller - Step started:', event.step);
+            // 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;
-                        const targetSettings = {
-                            fov: properties.to.fov,
-                            near: properties.to.near,
-                            far: properties.to.far,
-                        };
-                        if (!pathId) {
-                            targetSettings.position = properties.to.position;
-                        }
-                        else {
+                        if (pathId) {
                             const offset = camera
                                 ? [camera.position.x, camera.position.y, camera.position.z]
                                 : [0, 0, 0];
@@ -94,15 +112,31 @@ export const CameraController = ({ enableAutoAnimation = true, animationDuration
                             });
                             transformAnimationProgress.current = 0;
                         }
-                        console.log("Animating camera to:", targetSettings, "over duration:", stepDuration);
+                        // 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) => {
@@ -116,6 +150,9 @@ export const CameraController = ({ enableAutoAnimation = true, animationDuration
             animateHandlers(state.pointer);
         }
     });
-    return null;
+    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

@@ -1,12 +1,7 @@
 import React from 'react';
-import type { MaterialSettings } from '@ntalmagor/3drize-core';
-import type { TimeSettings } from '@ntalmagor/3drize-core';
+import type { CloudsSettings, TimeSettings } from '@ntalmagor/3drize-core';
 export interface CloudsProps {
-    visible?: boolean;
-    scale?: number;
-    height?: number;
-    speed?: number;
-    materialSettings?: MaterialSettings;
+    settings: CloudsSettings;
     timeSettings: TimeSettings;
 }
 declare const Clouds: React.FC<CloudsProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Clouds.d.ts","sourceRoot":"","sources":["../../src/components/Clouds.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAkB3D,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwGjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Clouds.d.ts","sourceRoot":"","sources":["../../src/components/Clouds.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,OAAO,KAAK,EAAE,cAAc,EAAoB,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAoB7F,MAAM,WAAW,WAAW;IAE1B,QAAQ,EAAE,cAAc,CAAA;IACxB,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmLjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Clouds.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useState, useCallback } from 'react';
+import { useRef, useCallback } from 'react';
 import * as THREE from 'three';
 import { useThree, useFrame } from '@react-three/fiber';
 import { useMaterialApplication } from '../hooks/useMaterialApplication.js';
 import { useSkySystem } from '../hooks/useSkySystem.js';
+import { useAnimationEvents } from '../hooks/useAnimationEvents.js';
+import { useNumericAnimation } from '../hooks/useNumericAnimation.js';
+import { applySingleProperty } from '@ntalmagor/3drize-core';
+import { useMouseHandlers } from '../hooks/useMouseHandlers.js';
 const CLOUD_COLORS = {
     night: new THREE.Color(0.1, 0.1, 0.2),
     sunrise: new THREE.Color(0.8, 0.4, 0.4),
@@ -18,17 +22,20 @@ const DEFAULT_MATERIAL = {
     u_cameraPos: [0, 0, 0],
     u_cloudColor: [1.0, 1.0, 1.0],
 };
-const Clouds = ({ visible = true, scale = 1, height = 400, speed = 1, materialSettings, timeSettings, }) => {
-    const [meshNode, setMeshNode] = useState(null);
+const Clouds = ({ settings, timeSettings, }) => {
+    const { visible = true, position = [0, 400, 0], scale = 15000, speed = 1, materialSettings = DEFAULT_MATERIAL, handlers } = settings;
+    const height = position?.[1] ?? 400;
+    const meshRef = useRef(null);
     const cloudAnimTime = useRef(0);
     const { camera } = useThree();
+    const { interpolateProperty } = useMouseHandlers();
     const cloudColorRef = useRef(new THREE.Color(1, 1, 1));
     const targetCloudColorRef = useRef(new THREE.Color(1, 1, 1));
-    const meshRefCallback = useCallback((node) => {
-        setMeshNode(node);
-    }, []);
+    const numericOverrideRef = useRef(null);
+    const mouseOverrideRef = useRef({});
+    const { animateNumeric } = useNumericAnimation();
     const effectiveMaterialSettings = materialSettings ?? DEFAULT_MATERIAL;
-    useMaterialApplication(meshNode, effectiveMaterialSettings, true);
+    useMaterialApplication(meshRef.current, effectiveMaterialSettings, true);
     const handleTimeUpdate = useCallback((state) => {
         const { normalizedTime, isDaytime, delta } = state;
         if (isDaytime) {
@@ -59,14 +66,78 @@ const Clouds = ({ visible = true, scale = 1, height = 400, speed = 1, materialSe
         onTimeUpdate: handleTimeUpdate,
         enabled: visible,
     });
-    useFrame(() => {
-        if (!visible || !meshNode?.material)
+    useAnimationEvents({
+        onStepStart: (event) => {
+            if (!event.step?.transitions)
+                return;
+            for (const transition of event.step.transitions) {
+                if (transition.state !== 'clouds' || !meshRef.current)
+                    continue;
+                const toProps = transition.properties.to || {};
+                const fromProps = transition.properties.from || {};
+                // visible — immediate boolean switch on the Three.js mesh
+                if (toProps.visible !== undefined) {
+                    meshRef.current.visible = toProps.visible;
+                }
+                // numeric: speed, scale
+                const CLOUDS_NUMERIC_KEYS = ['speed', 'scale'];
+                const from = {};
+                const to = {};
+                for (const key of CLOUDS_NUMERIC_KEYS) {
+                    const toVal = toProps[key];
+                    if (toVal === undefined)
+                        continue;
+                    to[key] = toVal;
+                    from[key] = fromProps[key] ?? settings[key] ?? toVal;
+                }
+                if (Object.keys(to).length > 0) {
+                    animateNumeric(from, to, (updated) => {
+                        numericOverrideRef.current = { ...numericOverrideRef.current, ...updated };
+                    }, () => {
+                        numericOverrideRef.current = null;
+                    }, event.step?.duration);
+                }
+            }
+        },
+    });
+    const handleMouseMove = (mouse) => {
+        if (!handlers?.onMouseMove?.enabled)
+            return;
+        if (!handlers.onMouseMove.properties.length)
             return;
-        const material = meshNode.material;
+        if (!meshRef.current)
+            return;
+        handlers.onMouseMove.properties.forEach((cfg) => {
+            const { property, propertySettings } = cfg;
+            const { min: minValue, max: maxValue, axis, sensitivity = 1, inverted = false } = propertySettings;
+            if (property === 'speed' || property === 'scale') {
+                const key = property;
+                const baseValue = settings[key];
+                if (baseValue === undefined)
+                    return;
+                const interpolated = interpolateProperty(baseValue, minValue, maxValue, mouse, axis, sensitivity, inverted);
+                mouseOverrideRef.current[key] = interpolated;
+                return;
+            }
+            const baseValue = settings.materialSettings?.[property];
+            if (baseValue === undefined)
+                return;
+            const interpolated = interpolateProperty(baseValue, minValue, maxValue, mouse, axis, sensitivity, inverted);
+            applySingleProperty(meshRef.current.material, property, interpolated);
+        });
+    };
+    useFrame((state) => {
+        if ((meshRef.current && !meshRef.current.visible) || !meshRef.current?.material)
+            return;
+        const material = meshRef.current.material;
         const uniforms = material?.uniforms;
         if (!uniforms)
             return;
-        cloudAnimTime.current += 0.02 * speed;
+        const effectiveSpeed = numericOverrideRef.current?.speed
+            ?? mouseOverrideRef.current.speed
+            ?? speed;
+        cloudAnimTime.current += 0.02 * effectiveSpeed;
+        const mouse = state.pointer;
         if (uniforms.u_time)
             uniforms.u_time.value = cloudAnimTime.current;
         if (uniforms.u_cameraPos) {
@@ -89,9 +160,14 @@ const Clouds = ({ visible = true, scale = 1, height = 400, speed = 1, materialSe
                 ? uniforms.u_sunPosition.value.copy(sunDirection)
                 : (uniforms.u_sunPosition.value = sunDirection.clone());
         }
+        handleMouseMove(mouse);
+        const effectiveScale = numericOverrideRef.current?.scale
+            ?? mouseOverrideRef.current.scale;
+        if (effectiveScale !== undefined) {
+            meshRef.current.scale.setScalar(effectiveScale);
+        }
     });
-    if (!visible)
-        return null;
-    return (_jsx("mesh", { ref: meshRefCallback, name: "SkyClouds", userData: { id: '3drise-clouds' }, position: [0, height, 0], rotation: [Math.PI / 2, 0, 0], scale: scale, renderOrder: -1, frustumCulled: false, children: _jsx("planeGeometry", { args: [2, 2] }) }));
+    // if (!visible) return null;
+    return (_jsx("mesh", { ref: meshRef, name: "SkyClouds", userData: { id: '3drise-clouds' }, position: [0, height, 0], rotation: [Math.PI / 2, 0, 0], scale: scale, renderOrder: -1, frustumCulled: false, visible: visible, children: _jsx("planeGeometry", { args: [2, 2] }) }));
 };
 export default Clouds;

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

@@ -1 +1 @@
-{"version":3,"file":"CreatedObject.d.ts","sourceRoot":"","sources":["../../src/components/CreatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAG,qBAAqB,EAAkC,MAAM,wBAAwB,CAAC;AAOrG,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAWrD,UAAU,kBAAkB;IAC1B,aAAa,EAAE,qBAAqB,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAElH;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiK9C,CAAC;AAIH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CreatedObject.d.ts","sourceRoot":"","sources":["../../src/components/CreatedObject.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAG,qBAAqB,EAAkC,MAAM,wBAAwB,CAAC;AAOrG,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAWrD,UAAU,kBAAkB;IAC1B,aAAa,EAAE,qBAAqB,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAElH;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwJ9C,CAAC;AAIH,eAAe,aAAa,CAAC"}

package/dist/components/CreatedObject.js

@@ -60,14 +60,17 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
     // Check if this should use the new MaterialLibrary system for Drei materials
     // console.log(object)
     const handleObjectEnter = (e) => {
-        // console.log(e.eventObject)
+        // console.log(e)
         // Only handle if this is the actual mesh group, not a child
         if (e.eventObject !== meshRef.current)
             return;
         if (createdObject.type === 'particles' || createdObject.type === 'gallery')
             return;
-        e.stopPropagation();
+        // e.stopPropagation();
         handlePointerEnter(e);
+        if (createdObject.interactions) {
+            document.body.style.cursor = 'pointer';
+        }
     };
     const handleObjectLeave = (e) => {
         // Only handle if this is the actual mesh group, not a child
@@ -76,21 +79,9 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
         if (createdObject.type === 'particles' || createdObject.type === 'gallery')
             return;
         handlePointerLeave();
+        document.body.style.cursor = 'auto';
         e.stopPropagation();
     };
-    const onClick = (e) => {
-        console.log('[1] CreatedObject.handleObjectClick:', createdObject.id, createdObject.meshSettings?.name);
-        // if (createdObject.type === 'gallery') {
-        //   e.stopPropagation();
-        //   return
-        // }
-        // contextHandleObjectClick(
-        //   createdObject,
-        //   meshRef.current,
-        //   [0, 0, 0],
-        //   e
-        // );
-    };
     const anchorEnabled = createdObject.meshSettings.anchor && createdObject.meshSettings.anchor.enabled;
     // console.log("createdObject.meshSettings", createdObject.meshSettings)
     // console.log("Rendered CreatedObject:", createdObject.rigidBodySettings);
@@ -105,7 +96,7 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
             position: anchorEnabled ? [anchoredPosition.x, anchoredPosition.y, anchoredPosition.z] : animatedTransform.position
         }, createdObject: createdObject, 
         // animateMaterial={!useDreiMaterials}
-        parentRef: meshRef, visible: createdObject.meshSettings.visible, handleObjectClick: handleObjectClick, onPointerEnter: handleObjectEnter, onPointerLeave: e => handleObjectLeave(e), children: createdObject.rigidBodySettings?.enabled ? (_jsx(RigidBody, { type: createdObject.rigidBodySettings?.type || 'dynamic', mass: createdObject.rigidBodySettings?.mass || 1, colliders: createdObject.userData?.type === 'plane'
+        parentRef: meshRef, visible: createdObject.meshSettings.visible, handleObjectClick: handleObjectClick, onPointerEnter: handleObjectEnter, onPointerLeave: e => handleObjectLeave(e), hovered: hovered, children: createdObject.rigidBodySettings?.enabled ? (_jsx(RigidBody, { type: createdObject.rigidBodySettings?.type || 'dynamic', mass: createdObject.rigidBodySettings?.mass || 1, colliders: createdObject.userData?.type === 'plane'
                 ? 'cuboid' // Force box collider for planes
                 : undefined // Auto-detect for others
             , friction: createdObject.rigidBodySettings?.friction, restitution: createdObject.rigidBodySettings?.restitution, gravityScale: createdObject.rigidBodySettings?.gravityScale ?? 1, linearDamping: createdObject.rigidBodySettings?.linearDamping ?? 0.01, angularDamping: createdObject.rigidBodySettings?.angularDamping ?? 0.01, children: children })) : (children) }));

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

@@ -1 +1 @@
-{"version":3,"file":"CustomPrimitive.d.ts","sourceRoot":"","sources":["../../src/components/CustomPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAoB,KAAK,qBAAqB,EAI5B,MAAM,wBAAwB,CAAC;AAIxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOrD,UAAU,oBAAoB;IAC5B,aAAa,EAAE,qBAAqB,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAClH;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqHlD,CAAC;AAIH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CustomPrimitive.d.ts","sourceRoot":"","sources":["../../src/components/CustomPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAoB,KAAK,qBAAqB,EAI5B,MAAM,wBAAwB,CAAC;AAIxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOrD,UAAU,oBAAoB;IAC5B,aAAa,EAAE,qBAAqB,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAClH;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6ElD,CAAC;AAIH,eAAe,eAAe,CAAC"}

package/dist/components/CustomPrimitive.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useRef, useEffect, memo, useState } from "react";
-import { ObjectManager, createDefaultEffectState, applyTransformEffects } from "@ntalmagor/3drize-core";
+import { ObjectManager } from "@ntalmagor/3drize-core";
 // import ObjectManager from "~/utils/ObjectManager";
 import { useMaterialApplication } from "../hooks/useMaterialApplication.js";
-import { useFrame } from "@react-three/fiber";
 import MaterialLibrary from "./MaterialLibrary.js";
 // import type { AnimatedTransform } from "~/types/mesh";
 import CreatedObject from "./CreatedObject.js";
-import { useFrameEffects } from "../hooks/useFrameEffects.js";
 const CustomPrimitive = memo(({ createdObject, onObjectReady, handleObjectClick, }) => {
     // const { handleObjectClick } = useSceneClick();
     // console.log("Rendering CustomPrimitive with settings:", createdObject.name, createdObject);
@@ -19,7 +17,7 @@ const CustomPrimitive = memo(({ createdObject, onObjectReady, handleObjectClick,
         scale: createdObject.meshSettings.scale,
     });
     // Initialize transform controls
-    const { handlePointerEnter, handlePointerLeave, hovered } = useFrameEffects(true);
+    // const { handlePointerEnter, handlePointerLeave, hovered } = useFrameEffects(true);
     useEffect(() => {
         setAnimatedTransform({
             position: createdObject.meshSettings.position,
@@ -27,45 +25,16 @@ const CustomPrimitive = memo(({ createdObject, onObjectReady, handleObjectClick,
             scale: createdObject.meshSettings.scale,
         });
     }, [createdObject.meshSettings.position, createdObject.meshSettings.rotation, createdObject.meshSettings.scale]);
-    // Derive material flags before any early return so hooks are always called in the same order
     const useDreiMaterials = createdObject.materialSettings.materialType === "advanced";
     const apply3driseMaterials = !useDreiMaterials;
-    // Hide the model until the 3drise material is applied to prevent a flash of original GLTF materials.
-    // If no 3drise material variant is set, or Drei materials are used, show immediately.
     const willApplyMaterial = apply3driseMaterials && !!createdObject.materialSettings.materialVariant;
     const [materialReady, setMaterialReady] = useState(!willApplyMaterial);
-    // Get the actual Three.js object from ObjectManager
     const obj = ObjectManager.getObject(createdObject.id);
-    // console.log("CustomPrimitive - Retrieved object from ObjectManager:", obj);
-    // Apply material directly to obj.object (always non-null when obj exists, available before the
-    // outer group ref is committed) so the material is ready on the first visible frame.
     useMaterialApplication(obj?.object ?? null, createdObject.materialSettings, apply3driseMaterials, () => setMaterialReady(true));
     if (!obj) {
         // console.warn(`CustomPrimitive - Object with ID ${createdObject.id} not found.`);
         return null;
     }
-    // const { sensitivity = 0.5, applyToChildren = false } = createdObject.interactions. || {};
-    const sensitivity = 0.5;
-    const applyToChildren = false;
-    const clicked = false;
-    const transformEffects = createdObject.animations?.transform?.effects || []; // Array of effects from transform domain
-    const enabledTransformEffects = transformEffects.filter(e => e.enabled);
-    // console.log(isSelected)
-    useFrame((state, dt) => {
-        if (!meshRef.current || !applyToChildren)
-            return;
-        const time = state.clock.elapsedTime;
-        // Initialize effect state if needed
-        if (!effectStateRef.current && meshRef.current) {
-            effectStateRef.current = createDefaultEffectState(meshRef.current);
-        }
-        // Apply transform effects from new continuous structure (multiple effects)
-        if (enabledTransformEffects.length > 0 && effectStateRef.current) {
-            applyTransformEffects(meshRef.current, enabledTransformEffects, // Pass array of enabled effects
-            time, dt, effectStateRef.current, hovered, clicked, sensitivity);
-        }
-    });
-    const geometry = obj.object.geometry;
     return (
     // <Select enabled={isSelected}>
     _jsx(CreatedObject, { createdObject: createdObject, shouldApply3driseMaterial: false, handleObjectClick: handleObjectClick, onObjectReady: (object, ref) => {

package/dist/components/EnvironmentManager.d.ts

@@ -1,7 +1,7 @@
 import { type SkySystemRef, type SkySystemProps } from './SkySystem';
-import type { HdrSettings } from '@ntalmagor/3drize-core';
+import type { EnvironmentConfig } from '@ntalmagor/3drize-core';
 export interface EnvironmentManagerProps extends SkySystemProps {
-    hdrSettings?: HdrSettings;
+    environment?: EnvironmentConfig;
     cubeCameraResolution?: number;
 }
 declare const EnvironmentManager: import("react").ForwardRefExoticComponent<EnvironmentManagerProps & import("react").RefAttributes<SkySystemRef>>;

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

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentManager.d.ts","sourceRoot":"","sources":["../../src/components/EnvironmentManager.tsx"],"names":[],"mappings":"AAGA,OAAkB,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAG1D,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC7D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,QAAA,MAAM,kBAAkB,kHAoGtB,CAAC;AAIH,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"EnvironmentManager.d.ts","sourceRoot":"","sources":["../../src/components/EnvironmentManager.tsx"],"names":[],"mappings":"AAIA,OAAkB,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhF,OAAO,KAAK,EAAE,iBAAiB,EAAe,MAAM,wBAAwB,CAAC;AAG7E,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC7D,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,QAAA,MAAM,kBAAkB,kHAkHtB,CAAC;AAIH,eAAe,kBAAkB,CAAC"}