@ntalmagor/3drize-viewer 0.1.2

package/dist/components/SkyController.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback, useState } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { useAnimationEvents } from '../hooks/useAnimationEvents';
+import { useSkyUniforms } from '../hooks/useSkyUniforms';
+import { useSkyAnimation } from '../hooks/useSkyAnimation';
+import { useSkySystem } from '../hooks/useSkySystem';
+import { findById } from '../utils/sceneQuery';
+import SkyMesh from './SkyMesh';
+function SkyController({ settings, timeSettings, scale = 1000, onSettingsChange, }) {
+    const skyRef = useRef(null);
+    const sunLightRef = useRef(null);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const previousSettings = useRef(null);
+    const { updateUniforms, getCurrentValues } = useSkyUniforms();
+    const { animateSkyTransition } = useSkyAnimation();
+    useEffect(() => {
+        return () => {
+            sunLightRef.current?.shadow?.map?.dispose();
+        };
+    }, []);
+    useEffect(() => {
+        handleSettings(settings);
+    }, [settings]);
+    useAnimationEvents({
+        onStepStart: (event) => {
+            if (!event.step?.transitions)
+                return;
+            event.step.transitions.forEach((transition) => {
+                if (transition.state === 'sky' && skyRef.current) {
+                    skyRef.current.visible = true;
+                    setIsAnimating(true);
+                    animateSkyTransition(transition.properties.from, transition.properties.to, updateUniforms, handleCompletedUniforms, event.step?.duration);
+                }
+            });
+        },
+    });
+    const handleTimeUpdate = useCallback((state) => {
+        const { sunAzimuth, sunElevation, timeInHours } = state;
+        const atmosphericParams = calculateSkyParamsForTime(timeInHours);
+        const newSettings = {
+            ...settings,
+            elevation: sunElevation,
+            azimuth: sunAzimuth,
+            ...atmosphericParams,
+        };
+        handleSettings(newSettings);
+        if (!state.autoAnimate) {
+            onSettingsChange?.(newSettings);
+        }
+    }, [settings, onSettingsChange]);
+    useSkySystem({
+        timeSettings,
+        onTimeUpdate: handleTimeUpdate,
+        enabled: settings.visible && timeSettings.enabled,
+    });
+    const handleMeshReady = useCallback((mesh) => {
+        skyRef.current = mesh;
+        updateUniforms(settings);
+        previousSettings.current = { ...settings };
+    }, [settings, updateUniforms]);
+    const updateSun = useCallback(() => {
+        if (!skyRef.current?.material || !sunLightRef.current)
+            return;
+        const uniforms = skyRef.current.material.uniforms;
+        if (!uniforms?.sunPosition)
+            return;
+        const distance = 100;
+        const sp = uniforms.sunPosition.value;
+        sunLightRef.current.position.set(sp.x * distance, sp.y * distance, sp.z * distance);
+        sunLightRef.current.shadow.camera.updateProjectionMatrix();
+        const moon = findById('3drise-moon');
+        if (moon)
+            moon.position.set(sp.x * scale, sp.y * scale, sp.z * scale);
+    }, [scale]);
+    const hasActualChanges = useCallback((next, prev) => {
+        if (!prev)
+            return true;
+        return (next.visible !== prev.visible ||
+            Math.abs(next.turbidity - prev.turbidity) > 0.01 ||
+            Math.abs(next.rayleigh - prev.rayleigh) > 0.01 ||
+            Math.abs(next.mieCoefficient - prev.mieCoefficient) > 0.001 ||
+            Math.abs(next.mieDirectionalG - prev.mieDirectionalG) > 0.001 ||
+            Math.abs(next.elevation - prev.elevation) > 0.1 ||
+            Math.abs(next.azimuth - prev.azimuth) > 0.1);
+    }, []);
+    const handleCompletedUniforms = (s) => {
+        previousSettings.current = { ...s };
+        setIsAnimating(false);
+    };
+    const handleSettings = (newSettings) => {
+        if (!skyRef.current || isAnimating || !newSettings)
+            return;
+        if (!hasActualChanges(newSettings, previousSettings.current))
+            return;
+        if (sunLightRef.current)
+            sunLightRef.current.visible = newSettings.visible;
+        updateUniforms(newSettings);
+        updateSun();
+        previousSettings.current = { ...newSettings };
+    };
+    const handleMouseMove = (mouse) => {
+        const handlers = settings.handlers;
+        if (!handlers || isAnimating || !skyRef.current)
+            return;
+        if (!handlers.onMouseMove?.enabled)
+            return;
+        let updated = { ...settings };
+        handlers.onMouseMove.properties.forEach((propConfig) => {
+            const { property } = propConfig;
+            const { sensitivity, min: minVal, max: maxVal, axis } = propConfig.propertySettings;
+            let movement = axis === 'x' ? mouse.x * sensitivity
+                : axis === 'y' ? mouse.y * sensitivity
+                    : (mouse.x + mouse.y) * 0.5 * sensitivity;
+            if (movement !== 0) {
+                let newVal = updated[property] + movement;
+                if (typeof minVal === 'number')
+                    newVal = Math.max(newVal, minVal);
+                if (typeof maxVal === 'number')
+                    newVal = Math.min(newVal, maxVal);
+                updated[property] = newVal;
+            }
+        });
+        handleSettings(updated);
+    };
+    useFrame((state) => {
+        handleMouseMove({ x: state.pointer.x, y: state.pointer.y });
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(SkyMesh, { ref: skyRef, settings: settings, scale: scale, onMeshReady: handleMeshReady }), _jsx("directionalLight", { ref: sunLightRef, color: "#ffffff", intensity: 1, castShadow: true })] }));
+}
+// ─── Atmospheric parameter calculation ───────────────────────────────────────
+function calculateSkyParamsForTime(timeInHours) {
+    const nightParams = { turbidity: 0.5, rayleigh: 0.1, mieCoefficient: 0.001, mieDirectionalG: 0.8 };
+    const sunriseParams = { turbidity: 4, rayleigh: 3, mieCoefficient: 0.01, mieDirectionalG: 0.9 };
+    const dayParams = { turbidity: 0.7, rayleigh: 0.54, mieCoefficient: 0.005, mieDirectionalG: 0.7 };
+    const sunsetParams = { turbidity: 4.5, rayleigh: 3.5, mieCoefficient: 0.012, mieDirectionalG: 0.92 };
+    const lerp = (a, b, t) => a + (b - a) * Math.max(0, Math.min(1, t));
+    const ss = (t) => t * t * (3 - 2 * t);
+    const lerpP = (from, to, t) => ({
+        turbidity: lerp(from.turbidity, to.turbidity, ss(t)),
+        rayleigh: lerp(from.rayleigh, to.rayleigh, ss(t)),
+        mieCoefficient: lerp(from.mieCoefficient, to.mieCoefficient, ss(t)),
+        mieDirectionalG: lerp(from.mieDirectionalG, to.mieDirectionalG, ss(t)),
+    });
+    if (timeInHours < 5)
+        return nightParams;
+    if (timeInHours < 6.5)
+        return lerpP(nightParams, sunriseParams, (timeInHours - 5) / 1.5);
+    if (timeInHours < 8)
+        return lerpP(sunriseParams, dayParams, (timeInHours - 6.5) / 1.5);
+    if (timeInHours < 17)
+        return dayParams;
+    if (timeInHours < 19)
+        return lerpP(dayParams, sunsetParams, (timeInHours - 17) / 2);
+    if (timeInHours < 21)
+        return lerpP(sunsetParams, nightParams, (timeInHours - 19) / 2);
+    return nightParams;
+}
+export default SkyController;

package/dist/components/SkyMesh.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Mesh } from 'three';
+import type { SkySettings } from '@ntalmagor/3drize-core';
+export interface SkyMeshProps {
+    settings: SkySettings;
+    scale?: number;
+    onMeshReady?: (mesh: Mesh) => void;
+}
+declare const SkyMesh: React.ForwardRefExoticComponent<SkyMeshProps & React.RefAttributes<Mesh<import("three").BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>, import("three").Material | import("three").Material[], import("three").Object3DEventMap>>>;
+export default SkyMesh;
+//# sourceMappingURL=SkyMesh.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkyMesh.d.ts","sourceRoot":"","sources":["../../src/components/SkyMesh.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACpC;AAED,QAAA,MAAM,OAAO,oRAuCX,CAAC;AAGH,eAAe,OAAO,CAAC"}

package/dist/components/SkyMesh.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useRef, useMemo, useEffect } from 'react';
+import { Sky } from 'three/examples/jsm/objects/Sky.js';
+const SkyMesh = React.forwardRef(({ settings, scale = 1000, onMeshReady }, ref) => {
+    const meshRef = useRef(null);
+    const skyObject = useMemo(() => {
+        const sky = new Sky();
+        sky.scale.setScalar(10000);
+        return sky;
+    }, []);
+    useEffect(() => {
+        return () => {
+            skyObject.geometry?.dispose();
+            if (Array.isArray(skyObject.material)) {
+                skyObject.material.forEach(m => m.dispose());
+            }
+            else {
+                skyObject.material?.dispose();
+            }
+        };
+    }, [skyObject]);
+    useEffect(() => {
+        if (meshRef.current && onMeshReady)
+            onMeshReady(meshRef.current);
+    }, [onMeshReady]);
+    const combinedRef = (node) => {
+        meshRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
+    return (_jsx("primitive", { ref: combinedRef, object: skyObject, visible: true, scale: scale, userData: { id: '3drise-sky' } }));
+});
+SkyMesh.displayName = 'SkyMesh';
+export default SkyMesh;

package/dist/components/SkySystem.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import * as THREE from 'three';
+import type { TimeSettings } from '../../../core/src/types/scene3d';
+import type { StarsSettings, CloudsSettings, SkySettings, RainSettings, FogSettings } from '../../../core/src/types/environment';
+import type { MaterialSettings } from '../../../core/src/types/materials';
+export interface SkySystemRef {
+    setTime: (hours: number, minutes?: number) => void;
+    getTime: () => Date;
+    getTimeOfDay: () => string;
+    getSunDirection: () => THREE.Vector3;
+}
+export interface SkySystemProps {
+    timeSettings: TimeSettings;
+    visible?: boolean;
+    sunSystemVisible?: boolean;
+    sunSize?: number;
+    moonSize?: number;
+    skyboxScale?: number;
+    sunIntensity?: number;
+    castShadow?: boolean;
+    shadowMapSize?: number;
+    playerPosition?: THREE.Vector3;
+    starsSettings?: StarsSettings;
+    cloudsSettings?: CloudsSettings;
+    cloudsMaterialSettings?: MaterialSettings;
+    skyControllerSettings?: SkySettings;
+    rainSettings?: RainSettings;
+    fogSettings?: FogSettings;
+    onTimeOfDayChange?: (timeOfDay: string, elapsedTime: number) => void;
+    onTimeUpdate?: (timeOfDay: number) => void;
+}
+declare const SkySystem: React.ForwardRefExoticComponent<SkySystemProps & React.RefAttributes<SkySystemRef>>;
+export default SkySystem;
+//# sourceMappingURL=SkySystem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkySystem.d.ts","sourceRoot":"","sources":["../../src/components/SkySystem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAClF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AACjI,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,KAAK,CAAC,OAAO,CAAC;CACtC;AAED,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,sBAAsB,CAAC,EAAE,gBAAgB,CAAC;IAC1C,qBAAqB,CAAC,EAAE,WAAW,CAAC;IACpC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,QAAA,MAAM,SAAS,qFA0Gb,CAAC;AAIH,eAAe,SAAS,CAAC"}

package/dist/components/SkySystem.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
+import { skySystemManager } from '../../../core/src/services/SkySystemManager';
+import Skybox from './Skybox';
+import Lensflare from './Lensflare';
+import SunLight from './SunLight';
+import Clouds from './Clouds';
+import Galaxy from './Galaxy';
+import SkyController from './SkyController';
+import Rain from './Rain';
+import SceneFog from './SceneFog';
+const SkySystem = forwardRef(({ timeSettings, visible = true, sunSystemVisible = false, sunSize = 1, moonSize = 1, skyboxScale = 100000, sunIntensity = 1, castShadow = true, shadowMapSize = 2048, playerPosition = new THREE.Vector3(0, 0, 0), starsSettings, cloudsSettings, cloudsMaterialSettings, skyControllerSettings, rainSettings, fogSettings, onTimeOfDayChange, onTimeUpdate, }, ref) => {
+    const previousTimeOfDayRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        setTime: (h, m) => skySystemManager.setTime(h, m),
+        getTime: () => skySystemManager.getTime(),
+        getTimeOfDay: () => skySystemManager.getTimeOfDay(),
+        getSunDirection: () => skySystemManager.getSunDirection(),
+    }));
+    useEffect(() => {
+        skySystemManager.setTimeSettings(timeSettings);
+    }, [timeSettings]);
+    useEffect(() => {
+        if (!onTimeUpdate)
+            return;
+        skySystemManager.setOnTimeSync(onTimeUpdate);
+        return () => { skySystemManager.setOnTimeSync(null); };
+    }, [onTimeUpdate]);
+    useFrame((_, delta) => {
+        if (!timeSettings.enabled || !timeSettings.autoAnimate)
+            return;
+        skySystemManager.tick(delta);
+        const current = skySystemManager.getTimeOfDay();
+        if (previousTimeOfDayRef.current !== null && previousTimeOfDayRef.current !== current) {
+            const state = skySystemManager.getState();
+            onTimeOfDayChange?.(current, state.elapsedTime);
+        }
+        previousTimeOfDayRef.current = current;
+    });
+    if (!visible)
+        return null;
+    return (_jsxs("group", { children: [skyControllerSettings && !sunSystemVisible && (_jsx(SkyController, { settings: skyControllerSettings, timeSettings: timeSettings })), sunSystemVisible && (_jsxs(_Fragment, { children: [_jsx(Skybox, { visible: true, scale: skyboxScale, sunSize: sunSize, moonSize: moonSize, timeSettings: timeSettings }), _jsx(Lensflare, { visible: true, intensity: sunIntensity, timeSettings: timeSettings }), _jsx(SunLight, { visible: true, timeSettings: timeSettings, targetPosition: playerPosition, intensity: sunIntensity, castShadow: castShadow, shadowMapSize: shadowMapSize })] })), cloudsSettings?.visible && (_jsx(Clouds, { visible: true, scale: cloudsSettings.scale, height: cloudsSettings.position?.[1] ?? 400, speed: cloudsSettings.speed, materialSettings: cloudsMaterialSettings, timeSettings: timeSettings })), starsSettings && (_jsx(Galaxy, { settings: starsSettings })), rainSettings?.visible && (_jsx(Rain, { settings: rainSettings })), fogSettings && (_jsx(SceneFog, { fog: fogSettings }))] }));
+});
+SkySystem.displayName = 'SkySystem';
+export default SkySystem;

package/dist/components/Skybox.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { TimeSettings } from '../../../core/src/types/scene3d';
+export interface SkyboxProps {
+    visible?: boolean;
+    scale?: number;
+    sunSize?: number;
+    moonSize?: number;
+    timeSettings: TimeSettings;
+}
+declare const Skybox: React.FC<SkyboxProps>;
+export default Skybox;
+//# sourceMappingURL=Skybox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skybox.d.ts","sourceRoot":"","sources":["../../src/components/Skybox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAwBpE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiFjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Skybox.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useCallback } from 'react';
+import * as THREE from 'three';
+import { SkyboxMaterial } from '../shaders/SkyboxMaterial';
+import { useSkySystem } from '../hooks/useSkySystem';
+// Extend R3F with skyboxMaterial
+import { extend } from '@react-three/fiber';
+extend({ SkyboxMaterial });
+const COLORS = {
+    white: new THREE.Color(0xffffff),
+    orange: new THREE.Color(0xff4500),
+    yellow: new THREE.Color(0xffd700),
+    red: new THREE.Color(0xff6347),
+    darkRed: new THREE.Color(0xd32f2f),
+    skyBlue: new THREE.Color(0x87ceeb),
+    darkSky: new THREE.Color(0x0d1321),
+    nightSky: new THREE.Color(0x1c2331),
+    moon: new THREE.Color(0xe6e8fa),
+};
+const MAX_ELEVATION = 42;
+const DARKNESS_START = 20.42;
+const DARKNESS_END = 6.58;
+const SUNRISE = 6;
+const SUNSET = 21;
+const Skybox = ({ visible = true, scale = 100000, sunSize = 1, moonSize = 1, timeSettings, }) => {
+    const materialRef = useRef(null);
+    const sunColorRef = useRef(new THREE.Color(0xffe5b0));
+    const skyColorLowRef = useRef(new THREE.Color(0x6fa2ef));
+    const skyColorHighRef = useRef(new THREE.Color(0x2053ff));
+    const targetSunColorRef = useRef(new THREE.Color(0xffe5b0));
+    const targetSkyColorLowRef = useRef(new THREE.Color(0x6fa2ef));
+    const targetSkyColorHighRef = useRef(new THREE.Color(0x2053ff));
+    const handleTimeUpdate = useCallback((state) => {
+        const { timeInHours, normalizedTime, isDaytime, timeOfDay, sunElevation, sunAzimuth, delta } = state;
+        const isInDarkTransition = (timeInHours >= DARKNESS_START && timeInHours <= SUNSET) ||
+            (timeInHours >= SUNRISE && timeInHours <= DARKNESS_END);
+        void isInDarkTransition;
+        if (isDaytime) {
+            const normalizedElevation = Math.min(sunElevation / MAX_ELEVATION, 1);
+            const t = Math.pow(1 - normalizedElevation, 3);
+            targetSunColorRef.current.lerpColors(COLORS.white, COLORS.orange, t);
+            let horizonColor = COLORS.skyBlue.clone();
+            if (timeOfDay === 'Sunrise') {
+                horizonColor = COLORS.yellow.clone().lerp(COLORS.red, normalizedTime / 0.25);
+            }
+            else if (timeOfDay === 'Sunset') {
+                horizonColor = COLORS.red.clone().lerp(COLORS.darkRed, (normalizedTime - 0.75) / 0.25);
+            }
+            targetSkyColorLowRef.current.copy(horizonColor);
+            targetSkyColorHighRef.current.lerpColors(COLORS.skyBlue, COLORS.darkSky, t);
+        }
+        else {
+            targetSunColorRef.current.copy(COLORS.moon).multiplyScalar(1.8);
+            targetSkyColorLowRef.current.copy(COLORS.darkSky);
+            targetSkyColorHighRef.current.copy(COLORS.nightSky);
+        }
+        const colorLerpSpeed = Math.min(1, 2.0 * (delta !== 0 ? delta : 1));
+        sunColorRef.current.lerp(targetSunColorRef.current, colorLerpSpeed);
+        skyColorLowRef.current.lerp(targetSkyColorLowRef.current, colorLerpSpeed);
+        skyColorHighRef.current.lerp(targetSkyColorHighRef.current, colorLerpSpeed);
+        if (materialRef.current) {
+            materialRef.current.uSunAzimuth = sunAzimuth;
+            materialRef.current.uSunElevation = sunElevation;
+            materialRef.current.uSunColor = sunColorRef.current;
+            materialRef.current.uSkyColorLow = skyColorLowRef.current;
+            materialRef.current.uSkyColorHigh = skyColorHighRef.current;
+            materialRef.current.uSunSize = isDaytime ? sunSize : moonSize;
+        }
+    }, [sunSize, moonSize]);
+    useSkySystem({
+        timeSettings,
+        onTimeUpdate: handleTimeUpdate,
+        enabled: visible,
+    });
+    if (!visible)
+        return null;
+    return (_jsxs("mesh", { scale: scale, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("skyboxMaterial", { ref: materialRef, side: THREE.BackSide, depthWrite: false, fog: false })] }));
+};
+export default Skybox;

package/dist/components/Stars.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import * as THREE from 'three';
+import '../../../core/src/shaders/StarsMaterial';
+import type { StarsSettings } from '../../../core/src/types/environment';
+import type { TimeSettings } from '../../../core/src/types/scene3d';
+export declare function generateStarsGeometry(count: number): THREE.BufferGeometry;
+export interface StarsProps {
+    settings: StarsSettings;
+    timeSettings?: TimeSettings;
+    sunSystemEnabled?: boolean;
+}
+declare const Stars: React.FC<StarsProps>;
+export default Stars;
+//# sourceMappingURL=Stars.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stars.d.ts","sourceRoot":"","sources":["../../src/components/Stars.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,yCAAyC,CAAC;AAIjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAEzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAEpE,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,cAAc,CA6DzE;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAqI/B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Stars.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useMemo, useCallback, useState, useEffect } from 'react';
+import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
+import '../../../core/src/shaders/StarsMaterial';
+import { useSkySystem } from '../hooks/useSkySystem';
+import { useParticlesColors } from '../hooks/useParticlesColors';
+import { useAnimationEvents } from '../hooks/useAnimationEvents';
+export function generateStarsGeometry(count) {
+    const halfCount = Math.floor(count / 2);
+    const geometry = new THREE.BufferGeometry();
+    const topPositions = new Float32Array(halfCount * 3);
+    for (let i = 0; i < halfCount; i++) {
+        const u = Math.random();
+        const v = Math.random() * 0.5 + 0.5;
+        const theta = 2 * Math.PI * u;
+        const phi = Math.acos(2 * v - 1);
+        topPositions.set([
+            Math.sin(phi) * Math.cos(theta),
+            Math.cos(phi),
+            Math.sin(phi) * Math.sin(theta),
+        ], i * 3);
+    }
+    const positions = new Float32Array(halfCount * 6);
+    positions.set(topPositions, 0);
+    for (let i = 0; i < halfCount; i++) {
+        positions.set([topPositions[i * 3], -topPositions[i * 3 + 1], topPositions[i * 3 + 2]], (i + halfCount) * 3);
+    }
+    const colors = new Float32Array(halfCount * 3);
+    for (let i = 0; i < halfCount; i++) {
+        const v = Math.random();
+        const c = v < 0.15 ? [0.8, 0.85, 1.0] : v < 0.3 ? [1.0, 0.95, 0.8] : [1.0, 1.0, 1.0];
+        colors.set(c, i * 3);
+    }
+    const mirroredColors = new Float32Array(halfCount * 6);
+    mirroredColors.set(colors, 0);
+    mirroredColors.set(colors, colors.length);
+    const sizes = new Float32Array(halfCount);
+    for (let i = 0; i < halfCount; i++) {
+        const v = Math.random();
+        sizes[i] = v < 0.01 ? 40 + Math.random() * 20 : v < 0.05 ? 25 + Math.random() * 15 : v < 0.2 ? 15 + Math.random() * 10 : 5 + Math.random() * 5;
+    }
+    const mirroredSizes = new Float32Array(halfCount * 2);
+    mirroredSizes.set(sizes, 0);
+    mirroredSizes.set(sizes, sizes.length);
+    const phases = new Float32Array(halfCount);
+    for (let i = 0; i < halfCount; i++)
+        phases[i] = Math.random() * Math.PI * 2;
+    const mirroredPhases = new Float32Array(halfCount * 2);
+    mirroredPhases.set(phases, 0);
+    mirroredPhases.set(phases, phases.length);
+    const freqs = new Float32Array(halfCount);
+    for (let i = 0; i < halfCount; i++)
+        freqs[i] = 1.0 + Math.random() * 2.0;
+    const mirroredFreqs = new Float32Array(halfCount * 2);
+    mirroredFreqs.set(freqs, 0);
+    mirroredFreqs.set(freqs, freqs.length);
+    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    geometry.setAttribute('color', new THREE.BufferAttribute(mirroredColors, 3));
+    geometry.setAttribute('size', new THREE.BufferAttribute(mirroredSizes, 1));
+    geometry.setAttribute('phase', new THREE.BufferAttribute(mirroredPhases, 1));
+    geometry.setAttribute('freq', new THREE.BufferAttribute(mirroredFreqs, 1));
+    return geometry;
+}
+const Stars = ({ settings, timeSettings, sunSystemEnabled = false }) => {
+    const pointsRef = useRef(null);
+    const materialRef = useRef(null);
+    const { visible, position, rotation, scale, rotateSpeed, count, color } = settings;
+    const opacityRef = useRef(1);
+    const targetOpacityRef = useRef(1);
+    const [isVisible, setIsVisible] = useState(true);
+    const [animatedTransform, setAnimatedTransform] = useState({
+        position, rotation, scale, targetPosition: position, targetRotation: rotation, targetScale: scale,
+    });
+    const [duration, setDuration] = useState(1);
+    const [colors, setColors] = useState({ baseColor: color, targetColor: color });
+    const { baseColorRef, targetColorRef, colorAnimationProgress } = useParticlesColors({
+        color: colors.baseColor,
+        targetColor: colors.targetColor,
+    });
+    const geometry = useMemo(() => generateStarsGeometry(count), [count]);
+    useEffect(() => () => { geometry.dispose(); }, [geometry]);
+    useEffect(() => {
+        setAnimatedTransform({ position, rotation, scale });
+    }, [position, rotation, scale]);
+    useEffect(() => {
+        setColors(prev => ({ ...prev, baseColor: color, targetColor: color }));
+    }, [color]);
+    useEffect(() => {
+        if (!sunSystemEnabled) {
+            setIsVisible(true);
+            opacityRef.current = 1;
+            targetOpacityRef.current = 1;
+        }
+    }, [sunSystemEnabled]);
+    useAnimationEvents({
+        onStepStart: (event) => {
+            if (!event.step?.transitions)
+                return;
+            for (let i = 0; i < event.step.transitions.length; i++) {
+                const transition = event.step.transitions[i];
+                const last = i > 0 ? event.step.transitions[event.step.transitions.length - 1] : null;
+                if (transition.state === 'stars' && event.sequenceId) {
+                    setDuration(event.step.duration);
+                    setColors({
+                        baseColor: transition.properties.from?.color || last?.properties.to.color || colors.baseColor,
+                        targetColor: transition.properties.to.color,
+                    });
+                }
+            }
+        },
+    });
+    const handleTimeUpdate = useCallback((state) => {
+        const { normalizedTime, isDaytime, elapsedTime, delta, autoAnimate } = state;
+        if (!autoAnimate || !sunSystemEnabled)
+            return;
+        if (!isDaytime) {
+            targetOpacityRef.current = 1;
+        }
+        else {
+            const sunriseEnd = 0.15;
+            const sunsetStart = 0.85;
+            if (normalizedTime <= sunriseEnd) {
+                targetOpacityRef.current = 1 - normalizedTime / sunriseEnd;
+            }
+            else if (normalizedTime >= sunsetStart) {
+                targetOpacityRef.current = (normalizedTime - sunsetStart) / (1 - sunsetStart);
+            }
+            else {
+                targetOpacityRef.current = 0;
+            }
+        }
+        const opacityLerpSpeed = Math.min(1, 1.5 * (delta !== 0 ? delta : 1));
+        opacityRef.current += (targetOpacityRef.current - opacityRef.current) * opacityLerpSpeed;
+        const shouldBeVisible = opacityRef.current > 0.01;
+        if (shouldBeVisible !== isVisible)
+            setIsVisible(shouldBeVisible);
+        if (materialRef.current) {
+            materialRef.current.time = elapsedTime;
+            materialRef.current.opacity = opacityRef.current;
+        }
+    }, [isVisible, sunSystemEnabled]);
+    const defaultTimeSettings = { enabled: false, timeOfDay: 12, timescale: 60, autoAnimate: false, syncWithRealTime: false };
+    useSkySystem({
+        timeSettings: timeSettings ?? defaultTimeSettings,
+        onTimeUpdate: handleTimeUpdate,
+        enabled: sunSystemEnabled && !!timeSettings,
+    });
+    const speed = 1 / duration;
+    useFrame((_, delta) => {
+        if (!visible || !pointsRef.current)
+            return;
+        pointsRef.current.rotation.y += rotateSpeed * 0.01;
+        if (materialRef.current && colors.targetColor !== colors.baseColor) {
+            colorAnimationProgress.current = Math.min(1, colorAnimationProgress.current + (delta || 1) * speed);
+            materialRef.current.colorMix = colorAnimationProgress.current;
+            materialRef.current.uColor = baseColorRef.current;
+            materialRef.current.targetColor = targetColorRef.current;
+        }
+    });
+    if (!visible || !isVisible)
+        return null;
+    return (_jsx("points", { ref: pointsRef, geometry: geometry, scale: typeof scale === 'number' ? scale : scale[0], renderOrder: -1, frustumCulled: false, userData: { id: '3drise-stars' }, children: _jsx("starsMaterial", { ref: materialRef, transparent: true, depthWrite: false, depthTest: true, blending: THREE.AdditiveBlending, uColor: new THREE.Color(color), targetColor: new THREE.Color(colors.targetColor), colorMix: 0 }) }));
+};
+export default Stars;

package/dist/components/SunLight.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import * as THREE from 'three';
+import type { TimeSettings } from '../../../core/src/types/scene3d';
+export interface SunLightProps {
+    visible?: boolean;
+    timeSettings: TimeSettings;
+    targetPosition?: THREE.Vector3;
+    shadowDistance?: number;
+    intensity?: number;
+    castShadow?: boolean;
+    shadowMapSize?: number;
+}
+declare const SunLight: React.FC<SunLightProps>;
+export default SunLight;
+//# sourceMappingURL=SunLight.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SunLight.d.ts","sourceRoot":"","sources":["../../src/components/SunLight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAcpE,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,YAAY,CAAC;IAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6ErC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/SunLight.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useCallback } from 'react';
+import * as THREE from 'three';
+import { useSkySystem } from '../hooks/useSkySystem';
+const COLORS = {
+    white: new THREE.Color(0xffffff),
+    orange: new THREE.Color(0xff4500),
+    moon: new THREE.Color(0xe6e8fa),
+};
+const MAX_ELEVATION = 42;
+const SUNRISE = 6;
+const SUNSET = 21;
+const DARKNESS_START = 20.42;
+const DARKNESS_END = 6.58;
+const SunLight = ({ visible = true, timeSettings, targetPosition = new THREE.Vector3(0, 0, 0), shadowDistance = 300, intensity: intensityMultiplier = 1, castShadow = true, shadowMapSize = 2048, }) => {
+    const lightRef = useRef(null);
+    const colorRef = useRef(new THREE.Color(0xffe5b0));
+    const targetColorRef = useRef(new THREE.Color(0xffe5b0));
+    const intensityRef = useRef(1);
+    const targetIntensityRef = useRef(1);
+    const handleTimeUpdate = useCallback((state) => {
+        const { timeInHours, normalizedTime, isDaytime, sunDirection, sunElevation } = state;
+        const isInDarkTransition = (timeInHours >= DARKNESS_START && timeInHours <= SUNSET) ||
+            (timeInHours >= SUNRISE && timeInHours <= DARKNESS_END);
+        if (isDaytime) {
+            const normalizedElevation = Math.min(sunElevation / MAX_ELEVATION, 1);
+            const t = Math.pow(1 - normalizedElevation, 3);
+            targetColorRef.current.lerpColors(COLORS.white, COLORS.orange, t);
+            targetIntensityRef.current = isInDarkTransition
+                ? 0.1
+                : Math.min(40, Math.pow(normalizedElevation, 1.2) * 4);
+        }
+        else {
+            targetColorRef.current.copy(COLORS.moon).multiplyScalar(1.8);
+            targetIntensityRef.current = 0.5;
+        }
+        const lerpSpeed = Math.min(1, 2.0 * (state.delta || 1));
+        colorRef.current.lerp(targetColorRef.current, lerpSpeed);
+        intensityRef.current += (targetIntensityRef.current - intensityRef.current) * lerpSpeed;
+        if (lightRef.current) {
+            lightRef.current.position.set(targetPosition.x + sunDirection.x * shadowDistance, targetPosition.y + sunDirection.y * shadowDistance, targetPosition.z + sunDirection.z * shadowDistance);
+            lightRef.current.target.position.copy(targetPosition);
+            lightRef.current.target.updateMatrixWorld();
+            lightRef.current.intensity = intensityRef.current * intensityMultiplier;
+            lightRef.current.color.copy(colorRef.current);
+        }
+    }, [targetPosition, shadowDistance, intensityMultiplier]);
+    useSkySystem({
+        timeSettings,
+        onTimeUpdate: handleTimeUpdate,
+        enabled: visible,
+    });
+    if (!visible)
+        return null;
+    return (_jsx("directionalLight", { ref: lightRef, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-camera-left": -50, "shadow-camera-right": 50, "shadow-camera-top": 50, "shadow-camera-bottom": -50, "shadow-camera-near": 0.5, "shadow-camera-far": 1000, "shadow-normalBias": 0.02, "shadow-bias": 0.000002, "shadow-radius": 2 }));
+};
+export default SunLight;