@ntalmagor/3drize-viewer 0.1.22 → 0.1.24

package/dist/components/AnimatedObject.js

@@ -17,7 +17,7 @@ visible = true, children, parentRef, handleObjectClick, onPointerEnter, onPointe
     const stepEase = useRef('linear');
     const animProgress = useRef(0);
     const hasHoverFunctionalities = hasHoverAnimation(createdObject.animations);
-    const hasMouseInteraction = createdObject.interactions && createdObject.interactions.actions.length > 0;
+    const hasMouseInteraction = (createdObject.actions?.length ?? 0) > 0;
     const baseRef = useRef({ position: [...position], scale: [...scale], rotation: [...rotation] });
     const targetRef = useRef({
         position: targetPosition ? [...targetPosition] : [...position],

package/dist/components/Clouds.js

@@ -35,7 +35,7 @@ const Clouds = ({ settings, timeSettings, }) => {
     const mouseOverrideRef = useRef({});
     const { animateNumeric } = useNumericAnimation();
     const effectiveMaterialSettings = materialSettings ?? DEFAULT_MATERIAL;
-    useMaterialApplication(meshRef.current, effectiveMaterialSettings, true);
+    useMaterialApplication(settings.visible ? meshRef.current : null, effectiveMaterialSettings, true);
     const handleTimeUpdate = useCallback((state) => {
         const { normalizedTime, isDaytime, delta } = state;
         if (isDaytime) {

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,CAwJ9C,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;AAQrG,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,CA6J9C,CAAC;AAIH,eAAe,aAAa,CAAC"}

package/dist/components/CreatedObject.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useEffect, useState, memo } from "react";
 import { DEFAULT_EDGES_SETTINGS } from "@ntalmagor/3drize-core";
 import { useMaterialApplication } from "../hooks/useMaterialApplication.js";
+import { useShadowApplication } from "../hooks/useShadowApplication.js";
 import { useTransformControls } from "../hooks/useTransformControls.js";
 import { RigidBody } from '@react-three/rapier';
 import { cameraManager } from "../utils/CameraSingleton.js";
@@ -25,9 +26,10 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
     const { controllersRef } = useTransformControls();
     const { handlePointerEnter, handlePointerLeave, hovered } = useFrameEffects(isSelected);
     const [mountedObject, setMountedObject] = useState(null);
-    useObjectEdges(meshRef.current, createdObject.edgesSettings ?? DEFAULT_EDGES_SETTINGS);
+    useObjectEdges(createdObject.id, createdObject.edgesSettings ?? DEFAULT_EDGES_SETTINGS);
     // useObjectGenerativeEffects(mountedObject, createdObject.effects);
     useMaterialApplication(meshRef.current, createdObject.materialSettings, shouldApply3driseMaterial);
+    useShadowApplication(meshRef.current, createdObject.meshSettings.castShadow, createdObject.meshSettings.receiveShadow);
     const anchoredPosition = cameraManager.getAnchorPosition(createdObject.meshSettings.anchor?.anchor || 'center', 0, createdObject.meshSettings.anchor?.offset || { y: 0, x: 0, z: 0 }, createdObject.meshSettings.anchor?.padding || 0);
     useEffect(() => {
         if (meshRef.current) {
@@ -68,7 +70,7 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
             return;
         // e.stopPropagation();
         handlePointerEnter(e);
-        if (createdObject.interactions) {
+        if (createdObject.actions?.length || createdObject.mouseMove?.enabled) {
             document.body.style.cursor = 'pointer';
         }
     };

package/dist/components/CustomPrimitive.js

@@ -1,47 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useRef, useEffect, memo, useState } from "react";
-import { ObjectManager, findById } from "@ntalmagor/3drize-core";
-// import ObjectManager from "~/utils/ObjectManager";
-import { useMaterialApplication } from "../hooks/useMaterialApplication.js";
+import { useRef, memo } from "react";
+import { ObjectManager } from "@ntalmagor/3drize-core";
 import MaterialLibrary from "./MaterialLibrary.js";
-// import type { AnimatedTransform } from "~/types/mesh";
-import CreatedObject from "./CreatedObject.js";
 const CustomPrimitive = memo(({ createdObject, onObjectReady, handleObjectClick, }) => {
     // const { handleObjectClick } = useSceneClick();
     // console.log("Rendering CustomPrimitive with settings:", createdObject.name, createdObject);
     const meshRef = useRef(null);
-    const effectStateRef = useRef(null);
-    const [animatedTransform, setAnimatedTransform] = React.useState({
-        position: createdObject.meshSettings.position,
-        rotation: createdObject.meshSettings.rotation,
-        scale: createdObject.meshSettings.scale,
-    });
+    // const effectStateRef = useRef<EffectState | null>(null);
+    // const [animatedTransform, setAnimatedTransform] = React.useState<AnimatedTransform>({
+    //   position: createdObject.meshSettings.position,
+    //   rotation: createdObject.meshSettings.rotation,
+    //   scale: createdObject.meshSettings.scale,
+    // });
     // Initialize transform controls
     // const { handlePointerEnter, handlePointerLeave, hovered } = useFrameEffects(true);
-    useEffect(() => {
-        setAnimatedTransform({
-            position: createdObject.meshSettings.position,
-            rotation: createdObject.meshSettings.rotation,
-            scale: createdObject.meshSettings.scale,
-        });
-    }, [createdObject.meshSettings.position, createdObject.meshSettings.rotation, createdObject.meshSettings.scale]);
+    // useEffect(() => {
+    //   setAnimatedTransform({
+    //     position: createdObject.meshSettings.position,
+    //     rotation: createdObject.meshSettings.rotation,
+    //     scale: createdObject.meshSettings.scale,
+    //   });
+    // }, [createdObject.meshSettings.position, createdObject.meshSettings.rotation, createdObject.meshSettings.scale]);
     const useDreiMaterials = createdObject.materialSettings.materialType === "advanced";
-    const apply3driseMaterials = !useDreiMaterials;
-    const willApplyMaterial = apply3driseMaterials && !!createdObject.materialSettings.materialVariant;
-    const [materialReady, setMaterialReady] = useState(!willApplyMaterial);
+    // const apply3driseMaterials = !useDreiMaterials;
+    // const willApplyMaterial = apply3driseMaterials && !!createdObject.materialSettings.materialVariant;
+    // const [materialReady, setMaterialReady] = useState(!willApplyMaterial);
     // get initial object from ObjectManager to add to scene with primitive, then use findById to get updated reference with materials applied by useMaterialApplication
     const obj = ObjectManager.getObject(createdObject.id);
-    const object = findById(createdObject.id);
-    useMaterialApplication(object ?? null, createdObject.materialSettings, apply3driseMaterials, () => setMaterialReady(true));
+    // const object = findById(createdObject.id);
+    // useMaterialApplication(object ?? null, createdObject.materialSettings, apply3driseMaterials, () => setMaterialReady(true));
     if (!obj) {
         // console.warn(`CustomPrimitive - Object with ID ${createdObject.id} not found.`);
         return null;
     }
     return (
     // <Select enabled={isSelected}>
-    _jsx(CreatedObject, { createdObject: createdObject, shouldApply3driseMaterial: false, handleObjectClick: handleObjectClick, onObjectReady: (object, ref) => {
-            onObjectReady && onObjectReady(object, ref);
-        }, children: _jsx("primitive", { ref: meshRef, name: obj.name, object: obj.object, visible: materialReady && createdObject.meshSettings.visible, position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1], children: useDreiMaterials && createdObject.type === 'mesh' && createdObject.meshSettings.visible && (_jsx(MaterialLibrary, { materialSettings: createdObject.materialSettings })) }, obj.id) })
+    // <CreatedObject createdObject={createdObject}
+    //   shouldApply3driseMaterial={false}  // Material is owned by useMaterialApplication above (applied to obj.object directly)
+    //   handleObjectClick={handleObjectClick}
+    //   onObjectReady={(object, ref) => {
+    //     onObjectReady && onObjectReady(object, ref);
+    //   }}
+    // >
+    _jsx("primitive", { ref: meshRef, name: obj.name, object: obj.object, visible: createdObject.meshSettings.visible, position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1], children: useDreiMaterials && createdObject.type === 'mesh' && createdObject.meshSettings.visible && (_jsx(MaterialLibrary, { materialSettings: createdObject.materialSettings })) }, obj.id)
+    // {/* <LineEdges object={obj.object} />
+    // <MeshEdges object={obj.object} /> */}
+    // </CreatedObject>
     // {/* </Select> */}
     );
 });

package/dist/components/EffectsGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CreatedObjectSettings } from '@ntalmagor/3drize-core';
+import { type CreatedObjectSettings } from '@ntalmagor/3drize-core';
 interface EffectsGroupProps {
     createdObject: CreatedObjectSettings;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"EffectsGroup.d.ts","sourceRoot":"","sources":["../../src/components/EffectsGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAGpE,UAAU,iBAAiB;IACzB,aAAa,EAAE,qBAAqB,CAAC;CACtC;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAS7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"EffectsGroup.d.ts","sourceRoot":"","sources":["../../src/components/EffectsGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAyB,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAG3F,UAAU,iBAAiB;IACzB,aAAa,EAAE,qBAAqB,CAAC;CACtC;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAU7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/EffectsGroup.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { GEREATIVE_EFFECTS_KEY } from '@ntalmagor/3drize-core';
 import EffectsGenerator from './EffectsGenerator.js';
 const EffectsGroup = ({ createdObject }) => {
     if (!createdObject.effects || createdObject.effects.length === 0)
         return null;
-    return (_jsx("group", { name: `${createdObject.id}-effects`, children: createdObject.effects.map((effect, index) => (_jsx(EffectsGenerator, { settings: effect }, index))) }));
+    return (_jsx("group", { name: `${createdObject.id}-effects`, userData: { [GEREATIVE_EFFECTS_KEY]: true }, children: createdObject.effects.map((effect, index) => (_jsx(EffectsGenerator, { settings: effect }, index))) }));
 };
 export default EffectsGroup;

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

@@ -1 +1 @@
-{"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"}
+{"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;AAIhF,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"}

package/dist/components/EnvironmentManager.js

@@ -5,24 +5,9 @@ import { useThree } from '@react-three/fiber';
 import { Vector3 } from 'three';
 import SkySystem from './SkySystem.js';
 import { useCubeCamera } from '../hooks/useCubeCamera.js';
-const EnvironmentManager = forwardRef(({ environment, cubeCameraResolution = 512, 
-// SkySystemProps — all forwarded to SkySystem
-timeSettings, 
-// sunSystemVisible = false,
-// sunSize,
-// moonSize,
-// skyboxScale,
-// sunIntensity,
-// castShadow,
-// shadowMapSize,
-// playerPosition,
-// starsSettings,
-// cloudsSettings,
-// cloudsMaterialSettings,
-// skyControllerSettings,
-// rainSettings,
-// fogSettings,
-onTimeOfDayChange, onTimeUpdate, }, ref) => {
+import HdrPlaylistRenderer from './HdrPlaylistRenderer.js';
+import { getTransitionSettings } from '@ntalmagor/3drize-core';
+const EnvironmentManager = forwardRef(({ environment, cubeCameraResolution = 512, timeSettings, onTimeOfDayChange, onTimeUpdate, }, ref) => {
     const { scene } = useThree();
     const defaultHdr = {
         visible: false,
@@ -41,6 +26,10 @@ onTimeOfDayChange, onTimeUpdate, }, ref) => {
     };
     const hdr = environment?.hdr ?? defaultHdr;
     const backgroundName = hdr.visible ? hdr.name : null;
+    const urls = hdr.urls;
+    const playlistActive = !!urls && urls.length > 1;
+    const singleUrl = urls && urls.length === 1 ? urls[0] : undefined;
+    const hdrActive = !!(backgroundName || singleUrl || playlistActive);
     const sky = environment?.sky;
     const sunSystemVisible = sky?.sunSystem?.visible;
     const sunSize = sky?.sunSystem?.sunSize;
@@ -63,16 +52,23 @@ onTimeOfDayChange, onTimeUpdate, }, ref) => {
         timeSettings,
         resolution: cubeCameraResolution,
     });
+    // While the playlist is active, drei <Environment> unmounts; HdrPlaylistRenderer
+    // owns scene.environment + scene.background for the duration of the transitions.
     const environmentComponent = useMemo(() => {
-        if (!backgroundName)
+        if (playlistActive)
             return null;
-        return (_jsx(Environment, { preset: backgroundName, background: true, scene: scene, backgroundBlurriness: hdr.settings.backgroundBlurriness ?? 0, backgroundIntensity: hdr.settings.backgroundIntensity ?? 1, backgroundRotation: [0, hdr.settings.backgroundRotation ?? Math.PI / 2, 0], environmentIntensity: hdr.settings.environmentIntensity ?? 1, environmentRotation: [0, hdr.settings.environmentRotation ?? Math.PI / 2, 0], blur: hdr.settings.blur ?? 0, ground: {
+        if (!singleUrl && !backgroundName)
+            return null;
+        const sourceProps = singleUrl
+            ? { files: singleUrl }
+            : { preset: backgroundName };
+        return (_jsx(Environment, { ...sourceProps, background: true, scene: scene, backgroundBlurriness: hdr.settings.backgroundBlurriness ?? 0, backgroundIntensity: hdr.settings.backgroundIntensity ?? 1, backgroundRotation: [0, hdr.settings.backgroundRotation ?? Math.PI / 2, 0], environmentIntensity: hdr.settings.environmentIntensity ?? 1, environmentRotation: [0, hdr.settings.environmentRotation ?? Math.PI / 2, 0], blur: hdr.settings.blur ?? 0, ground: {
                 radius: hdr.settings.groundRadius,
                 height: hdr.settings.groundHeight,
                 scale: hdr.settings.groundScale,
             } }));
-    }, [backgroundName, hdr.settings, scene]);
-    return (_jsxs(_Fragment, { children: [environmentComponent, _jsx(SkySystem, { ref: ref, timeSettings: timeSettings, visible: true, sunSystemVisible: sunSystemVisible, sunSize: sunSize, moonSize: moonSize, skyboxScale: skyboxScale, sunIntensity: sunIntensity, castShadow: castShadow, shadowMapSize: shadowMapSize, playerPosition: playerPosition, starsSettings: starsSettings, cloudsSettings: cloudsSettings, cloudsMaterialSettings: cloudsMaterialSettings, skyControllerSettings: skyControllerSettings, rainSettings: rainSettings, fogSettings: fogSettings, onTimeOfDayChange: onTimeOfDayChange, onTimeUpdate: onTimeUpdate })] }));
+    }, [playlistActive, singleUrl, backgroundName, hdr.settings, scene]);
+    return (_jsxs(_Fragment, { children: [environmentComponent, playlistActive && urls && (_jsx(HdrPlaylistRenderer, { urls: urls, transition: getTransitionSettings(hdr) })), _jsx(SkySystem, { ref: ref, timeSettings: timeSettings, visible: true, sunSystemVisible: sunSystemVisible, sunSize: sunSize, moonSize: moonSize, skyboxScale: skyboxScale, sunIntensity: sunIntensity, castShadow: castShadow, shadowMapSize: shadowMapSize, playerPosition: playerPosition, starsSettings: starsSettings, cloudsSettings: cloudsSettings, cloudsMaterialSettings: cloudsMaterialSettings, skyControllerSettings: skyControllerSettings, rainSettings: rainSettings, fogSettings: fogSettings, onTimeOfDayChange: onTimeOfDayChange, onTimeUpdate: onTimeUpdate })] }));
 });
 EnvironmentManager.displayName = 'EnvironmentManager';
 export default EnvironmentManager;

package/dist/components/Galaxy.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
-import type { StarsSettings } from '@ntalmagor/3drize-core';
+import type { StarsSettings, TimeSettings } from '@ntalmagor/3drize-core';
 export interface GalaxyProps {
     settings: StarsSettings;
+    timeSettings?: TimeSettings;
+    sunSystemEnabled?: boolean;
 }
 declare const Galaxy: React.FC<GalaxyProps>;
 export default Galaxy;

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

@@ -1 +1 @@
-{"version":3,"file":"Galaxy.d.ts","sourceRoot":"","sources":["../../src/components/Galaxy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAI5D,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CASjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Galaxy.d.ts","sourceRoot":"","sources":["../../src/components/Galaxy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAI1E,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAajC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Galaxy.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Stars from './Stars.js';
 import ShootingStars from './ShootingStars.js';
-const Galaxy = ({ settings }) => {
+const Galaxy = ({ settings, timeSettings, sunSystemEnabled }) => {
     // if (!settings.visible) return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Stars, { settings: settings }), _jsx(ShootingStars, { settings: settings.shootingStars })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Stars, { settings: settings, timeSettings: timeSettings, sunSystemEnabled: sunSystemEnabled }), _jsx(ShootingStars, { settings: settings.shootingStars })] }));
 };
 export default Galaxy;

package/dist/components/HdrPlaylistRenderer.d.ts

@@ -0,0 +1,10 @@
+import type { HdrTransitionSettings } from '@ntalmagor/3drize-core';
+export interface HdrPlaylistRendererProps {
+    /** Two or more equirect HDR URLs to cycle through. Caller ensures length >= 2. */
+    urls: string[];
+    /** Fully resolved transition settings (defaults already merged). */
+    transition: HdrTransitionSettings;
+}
+declare const HdrPlaylistRenderer: React.FC<HdrPlaylistRendererProps>;
+export default HdrPlaylistRenderer;
+//# sourceMappingURL=HdrPlaylistRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HdrPlaylistRenderer.d.ts","sourceRoot":"","sources":["../../src/components/HdrPlaylistRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAqB,MAAM,wBAAwB,CAAC;AAEvF,MAAM,WAAW,wBAAwB;IACvC,kFAAkF;IAClF,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,oEAAoE;IACpE,UAAU,EAAE,qBAAqB,CAAC;CACnC;AA8KD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgP3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/HdrPlaylistRenderer.js

@@ -0,0 +1,364 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useFrame, useThree } from '@react-three/fiber';
+import * as THREE from 'three';
+import { gsap } from 'gsap';
+import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+const CUBE_SIZE = 256;
+const MODE_INDEX = {
+    crossfade: 0,
+    wipe: 1,
+    iris: 2,
+    dissolve: 3,
+    'vertical-divider': 4,
+    'horizontal-divider': 5,
+};
+const isDividerMode = (m) => m === 4 || m === 5;
+// ── Shaders ─────────────────────────────────────────────────────────────────
+const cubeVertexShader = /* glsl */ `
+varying vec3 vDir;
+void main() {
+  vDir = position;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+const cubeFragmentShader = /* glsl */ `
+precision highp float;
+uniform samplerCube tA;
+uniform samplerCube tB;
+uniform float uMix;
+uniform int uMode;
+uniform vec3 uWipeAxis;
+uniform vec3 uIrisCenter;
+uniform float uNoiseScale;
+uniform float uFeather;
+varying vec3 vDir;
+
+float hash3(vec3 p) {
+  p = fract(p * vec3(0.1031, 0.1030, 0.0973));
+  p += dot(p, p.yzx + 33.33);
+  return fract((p.x + p.y) * p.z);
+}
+
+float noise3(vec3 p) {
+  vec3 i = floor(p);
+  vec3 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  float n000 = hash3(i);
+  float n100 = hash3(i + vec3(1.0, 0.0, 0.0));
+  float n010 = hash3(i + vec3(0.0, 1.0, 0.0));
+  float n110 = hash3(i + vec3(1.0, 1.0, 0.0));
+  float n001 = hash3(i + vec3(0.0, 0.0, 1.0));
+  float n101 = hash3(i + vec3(1.0, 0.0, 1.0));
+  float n011 = hash3(i + vec3(0.0, 1.0, 1.0));
+  float n111 = hash3(i + vec3(1.0, 1.0, 1.0));
+  float nx00 = mix(n000, n100, f.x);
+  float nx10 = mix(n010, n110, f.x);
+  float nx01 = mix(n001, n101, f.x);
+  float nx11 = mix(n011, n111, f.x);
+  float nxy0 = mix(nx00, nx10, f.y);
+  float nxy1 = mix(nx01, nx11, f.y);
+  return mix(nxy0, nxy1, f.z);
+}
+
+void main() {
+  vec3 dir = normalize(vDir);
+  vec4 a = textureCube(tA, dir);
+  vec4 b = textureCube(tB, dir);
+  float blend;
+
+  if (uMode == 0) {
+    blend = uMix;
+  } else if (uMode == 1) {
+    float s = dot(dir, normalize(uWipeAxis)) * 0.5 + 0.5;
+    float adj = uMix * (1.0 + 2.0 * uFeather) - uFeather;
+    blend = 1.0 - smoothstep(adj - uFeather, adj + uFeather, s);
+  } else if (uMode == 2) {
+    float ang = acos(clamp(dot(dir, normalize(uIrisCenter)), -1.0, 1.0));
+    float radius = uMix * (3.14159265 + 2.0 * uFeather) - uFeather;
+    blend = 1.0 - smoothstep(radius - uFeather, radius + uFeather, ang);
+  } else {
+    float n = noise3(dir * uNoiseScale);
+    float adj = uMix * (1.0 + 2.0 * uFeather) - uFeather;
+    blend = 1.0 - smoothstep(adj - uFeather, adj + uFeather, n);
+  }
+
+  gl_FragColor = mix(a, b, blend);
+}
+`;
+const bgVertexShader = /* glsl */ `
+uniform mat4 uCamWorldMatrix;
+uniform mat4 uProjMatrixInv;
+varying vec3 vWorldDir;
+varying vec2 vScreenUV;
+void main() {
+  vScreenUV = position.xy * 0.5 + 0.5;
+  vec4 viewPos = uProjMatrixInv * vec4(position.xy, 1.0, 1.0);
+  viewPos /= viewPos.w;
+  vWorldDir = (uCamWorldMatrix * vec4(viewPos.xyz, 0.0)).xyz;
+  gl_Position = vec4(position.xy, 1.0, 1.0);
+}
+`;
+const bgFragmentShader = /* glsl */ `
+precision highp float;
+uniform samplerCube tA;
+uniform samplerCube tB;
+uniform int uMode;
+uniform float uDividerX;
+uniform float uDividerY;
+uniform float uFeather;
+varying vec3 vWorldDir;
+varying vec2 vScreenUV;
+void main() {
+  vec3 dir = normalize(vWorldDir);
+  vec4 a = textureCube(tA, dir);
+  vec4 b = textureCube(tB, dir);
+  float blend;
+  if (uMode == 4) {
+    blend = smoothstep(uDividerX - uFeather, uDividerX + uFeather, vScreenUV.x);
+  } else {
+    blend = smoothstep(uDividerY - uFeather, uDividerY + uFeather, vScreenUV.y);
+  }
+  gl_FragColor = mix(a, b, blend);
+}
+`;
+// ── Loader ──────────────────────────────────────────────────────────────────
+const loadEquirectHdr = (url) => new Promise((resolve, reject) => {
+    const loader = new RGBELoader();
+    loader.setDataType(THREE.HalfFloatType);
+    loader.load(url, (tex) => resolve(tex), undefined, reject);
+});
+// ── Order policy ────────────────────────────────────────────────────────────
+const pickNext = (order, current, length, directionRef) => {
+    if (length <= 1)
+        return current;
+    if (order === 'sequential')
+        return (current + 1) % length;
+    if (order === 'random') {
+        let pick = current;
+        while (pick === current)
+            pick = Math.floor(Math.random() * length);
+        return pick;
+    }
+    // yoyo
+    let next = current + directionRef.current;
+    if (next >= length) {
+        directionRef.current = -1;
+        next = current - 1;
+    }
+    else if (next < 0) {
+        directionRef.current = 1;
+        next = current + 1;
+    }
+    return next;
+};
+// ── Component ───────────────────────────────────────────────────────────────
+const HdrPlaylistRenderer = ({ urls, transition }) => {
+    const { scene, gl: renderer, camera } = useThree();
+    const mixRef = useRef(0);
+    const tlRef = useRef(null);
+    const stateRef = useRef(null);
+    const modeRef = useRef(MODE_INDEX[transition.types[0] ?? 'crossfade']);
+    const currentIdxRef = useRef(0);
+    const yoyoDirRef = useRef(1);
+    const typeIdxRef = useRef(0);
+    // Live transition snapshot — read each frame so slider changes apply instantly
+    // without rebuilding GPU resources or the timeline.
+    const transitionRef = useRef(transition);
+    useEffect(() => {
+        transitionRef.current = transition;
+    }, [transition]);
+    const bgMeshRef = useRef(null);
+    // Gates the timeline-build effect on the cube-RT pipeline being ready.
+    // Replaces a previous rAF poll — flips false → true once HDRs load and
+    // stateRef.current is populated, and back to false on URL/teardown changes.
+    const [pipelineReady, setPipelineReady] = useState(false);
+    // Stable uniforms object for the bg shader. Must NOT be inline JSX literal —
+    // R3F reassigns material.uniforms on parent re-render and would wipe tA/tB.
+    const bgUniforms = useMemo(() => ({
+        tA: { value: null },
+        tB: { value: null },
+        uMode: { value: 4 },
+        uDividerX: { value: 0.5 },
+        uDividerY: { value: 0.5 },
+        uFeather: { value: transition.dividerFeather ?? 0.003 },
+        uCamWorldMatrix: { value: new THREE.Matrix4() },
+        uProjMatrixInv: { value: new THREE.Matrix4() },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // ── Build cube RTs + blend pipeline (rebuilds only when urls change) ──────
+    const urlsKey = urls.join('|');
+    useEffect(() => {
+        let disposed = false;
+        (async () => {
+            let equirects = [];
+            try {
+                equirects = await Promise.all(urls.map(loadEquirectHdr));
+            }
+            catch (err) {
+                console.error('[HdrPlaylistRenderer] HDR load failed', err);
+                return;
+            }
+            if (disposed) {
+                equirects.forEach((t) => t.dispose());
+                return;
+            }
+            const cubeRTOpts = {
+                type: THREE.HalfFloatType,
+                format: THREE.RGBAFormat,
+                generateMipmaps: true,
+                minFilter: THREE.LinearMipmapLinearFilter,
+            };
+            const cubeRTs = equirects.map((eq) => {
+                const rt = new THREE.WebGLCubeRenderTarget(CUBE_SIZE, cubeRTOpts);
+                rt.fromEquirectangularTexture(renderer, eq);
+                eq.dispose();
+                return rt;
+            });
+            const outRT = new THREE.WebGLCubeRenderTarget(CUBE_SIZE, cubeRTOpts);
+            const cubeCamera = new THREE.CubeCamera(0.1, 10, outRT);
+            const material = new THREE.ShaderMaterial({
+                uniforms: {
+                    tA: { value: cubeRTs[0].texture },
+                    tB: { value: cubeRTs[1 % cubeRTs.length].texture },
+                    uMix: { value: 0 },
+                    uMode: { value: 0 },
+                    uWipeAxis: { value: new THREE.Vector3(0, 1, 0) },
+                    uIrisCenter: { value: new THREE.Vector3(0, 1, 0) },
+                    uNoiseScale: { value: 4.0 },
+                    uFeather: { value: 0.07 },
+                },
+                vertexShader: cubeVertexShader,
+                fragmentShader: cubeFragmentShader,
+                side: THREE.BackSide,
+            });
+            const geo = new THREE.BoxGeometry(1, 1, 1);
+            const mesh = new THREE.Mesh(geo, material);
+            const blendScene = new THREE.Scene();
+            blendScene.add(mesh);
+            blendScene.add(cubeCamera);
+            stateRef.current = {
+                blendScene,
+                cubeCamera,
+                outRT,
+                material,
+                cubeRTs,
+                mesh,
+            };
+            bgUniforms.tA.value = cubeRTs[0].texture;
+            bgUniforms.tB.value = cubeRTs[1 % cubeRTs.length].texture;
+            currentIdxRef.current = 0;
+            yoyoDirRef.current = 1;
+            // Signal readiness AFTER stateRef is populated. The timeline-build effect
+            // listens for this and runs without polling.
+            setPipelineReady(true);
+        })();
+        return () => {
+            disposed = true;
+            setPipelineReady(false);
+            const s = stateRef.current;
+            if (s) {
+                s.outRT.dispose();
+                s.cubeRTs.forEach((rt) => rt.dispose());
+                s.material.dispose();
+                s.mesh.geometry.dispose();
+            }
+            stateRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [urlsKey, renderer, bgUniforms]);
+    // ── Build/rebuild GSAP timeline when timing-or-order props change ──────────
+    // Gated on `pipelineReady` so we never run before stateRef.current is
+    // populated — no rAF polling needed; React schedules us once the pipeline
+    // effect calls setPipelineReady(true).
+    useEffect(() => {
+        if (!pipelineReady)
+            return;
+        const s = stateRef.current;
+        if (!s)
+            return;
+        let cancelled = false;
+        tlRef.current?.kill();
+        const fadeSec = Math.max(0.05, transition.durationMs / 1000);
+        const holdSec = Math.max(0, transition.holdMs / 1000);
+        const stepTo = (target) => {
+            const tl = gsap.timeline();
+            tl.to({}, { duration: holdSec });
+            tl.to(mixRef, { current: target, duration: fadeSec, ease: 'sine.inOut' });
+            return tl;
+        };
+        const advance = () => {
+            if (cancelled || !stateRef.current)
+                return;
+            const st = stateRef.current;
+            const length = st.cubeRTs.length;
+            const cur = currentIdxRef.current;
+            const next = pickNext(transitionRef.current.order, cur, length, yoyoDirRef);
+            const types = transitionRef.current.types?.length
+                ? transitionRef.current.types
+                : ['crossfade'];
+            const legType = types[typeIdxRef.current % types.length];
+            const legMode = MODE_INDEX[legType];
+            st.material.uniforms.uMode.value = isDividerMode(legMode) ? 0 : legMode;
+            st.material.uniforms.tA.value = st.cubeRTs[cur].texture;
+            st.material.uniforms.tB.value = st.cubeRTs[next].texture;
+            bgUniforms.tA.value = st.cubeRTs[cur].texture;
+            bgUniforms.tB.value = st.cubeRTs[next].texture;
+            modeRef.current = legMode;
+            mixRef.current = 0;
+            const tl = stepTo(1);
+            tl.eventCallback('onComplete', () => {
+                currentIdxRef.current = next;
+                typeIdxRef.current += 1;
+                if (!cancelled)
+                    advance();
+            });
+            tlRef.current = tl;
+        };
+        advance();
+        return () => {
+            cancelled = true;
+            tlRef.current?.kill();
+            tlRef.current = null;
+        };
+    }, [pipelineReady, transition.durationMs, transition.holdMs, transition.order, urlsKey, bgUniforms]);
+    // ── Per-frame: render the blend and assign to scene ─────────────────────────
+    useFrame(() => {
+        const s = stateRef.current;
+        if (!s)
+            return;
+        const t = transitionRef.current;
+        s.material.uniforms.uMix.value = mixRef.current;
+        s.material.uniforms.uFeather.value = t.feather ?? 0.07;
+        s.material.uniforms.uNoiseScale.value = t.noiseScale ?? 4.0;
+        if (t.wipeAxis)
+            s.material.uniforms.uWipeAxis.value.set(...t.wipeAxis);
+        if (t.irisCenter)
+            s.material.uniforms.uIrisCenter.value.set(...t.irisCenter);
+        s.cubeCamera.update(renderer, s.blendScene);
+        scene.environment = s.outRT.texture;
+        const mode = modeRef.current;
+        const divider = isDividerMode(mode);
+        if (divider) {
+            scene.background = null;
+            if (bgMeshRef.current)
+                bgMeshRef.current.visible = true;
+            const feather = t.dividerFeather ?? 0.003;
+            const dividerPos = 1.0 - (mixRef.current * (1.0 + 2.0 * feather) - feather);
+            bgUniforms.uMode.value = mode;
+            bgUniforms.uDividerX.value = mode === 4 ? dividerPos : 0.5;
+            bgUniforms.uDividerY.value = mode === 5 ? dividerPos : 0.5;
+            bgUniforms.uFeather.value = feather;
+            bgUniforms.uCamWorldMatrix.value.copy(camera.matrixWorld);
+            bgUniforms.uProjMatrixInv.value.copy(camera.projectionMatrixInverse);
+        }
+        else {
+            scene.background = s.outRT.texture;
+            if (bgMeshRef.current)
+                bgMeshRef.current.visible = false;
+        }
+    });
+    return (_jsxs("mesh", { ref: bgMeshRef, frustumCulled: false, renderOrder: -1000, visible: false, children: [_jsx("planeGeometry", { args: [2, 2] }), _jsx("shaderMaterial", { depthTest: false, depthWrite: false, uniforms: bgUniforms, vertexShader: bgVertexShader, fragmentShader: bgFragmentShader })] }));
+};
+export default HdrPlaylistRenderer;

package/dist/components/LightObject.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { CreatedObjectSettings } from '@ntalmagor/3drize-core';
+type LightObjectProps = {
+    createdObject: CreatedObjectSettings;
+};
+declare const LightObject: React.FC<LightObjectProps>;
+export default LightObject;
+//# sourceMappingURL=LightObject.d.ts.map