@ntalmagor/3drize-viewer 0.1.25 → 0.1.27

package/dist/components/Bubbles.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Bubbles.d.ts","sourceRoot":"","sources":["../../src/components/Bubbles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAG1D,OAAO,KAAK,EAAE,aAAa,EAAyB,MAAM,wBAAwB,CAAC;AAKnF,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,aAAa,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA8GnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Bubbles.js

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

package/dist/components/Clouds.js

@@ -5,7 +5,7 @@ import { useThree, useFrame } from '@react-three/fiber';
 import { useSkySystem } from '../hooks/useSkySystem.js';
 import { useAnimationEvents } from '../hooks/useAnimationEvents.js';
 import { useNumericAnimation } from '../hooks/useNumericAnimation.js';
-import { calculateTimeProgress, applyEasing, gsapEasingMap, interpolateValue, handleTransformMouseMove, handleMaterialMouseMove, interpolateMouseMoveProperty, } from '@ntalmagor/3drize-core';
+import { calculateTimeProgress, applyEasing, gsapEasingMap, interpolateValue, interpolateMouseMoveProperty, } from '@ntalmagor/3drize-core';
 const CLOUD_COLORS = {
     night: new THREE.Color(0.1, 0.1, 0.2),
     sunrise: new THREE.Color(0.8, 0.4, 0.4),
@@ -189,7 +189,7 @@ const Clouds = ({ settings, timeSettings = defaultTimeSettings }) => {
         const now = Date.now();
         const pointer = state.pointer;
         // ── PER-DOMAIN ANIMATIONS ────────────────────────────────────────────────
-        const mm = settings.mouseMove;
+        const mouseMove = settings.mouseMove;
         // const isPerDomain = mm && ('transform' in mm || 'material' in mm || 'edges' in mm || 'light' in mm || 'clouds' in mm);
         // transform: position / rotation / scale
         // const transformAnims = settings.animations?.transform?.animations;
@@ -214,14 +214,22 @@ const Clouds = ({ settings, timeSettings = defaultTimeSettings }) => {
         // clouds: speed
         applyCloudsKeyframeAnimations(settings.animations?.clouds?.animations, cloudsAnimCacheRef.current, config, animatedOverrideRef.current, now);
         // ── PER-DOMAIN MOUSE-MOVE ─────────────────────────────────────────────────
-        if (mm) {
-            const perDomain = mm;
-            if (perDomain.transform?.enabled && perDomain.transform.properties?.length) {
-                handleTransformMouseMove({ object: mesh, meshSettings: meshSettings }, perDomain.transform.properties, pointer);
-            }
-            if (perDomain.material?.enabled && perDomain.material.properties?.length) {
-                handleMaterialMouseMove({ object: mesh, materialSettings: materialSettings }, perDomain.material.properties, pointer);
-            }
+        if (mouseMove) {
+            const perDomain = mouseMove;
+            // if (perDomain.transform?.enabled && perDomain.transform.properties?.length) {
+            //   handleTransformMouseMove(
+            //     { object: mesh, meshSettings: meshSettings as any },
+            //     perDomain.transform.properties,
+            //     pointer,
+            //   );
+            // }
+            // if (perDomain.material?.enabled && perDomain.material.properties?.length) {
+            //   handleMaterialMouseMove(
+            //     { object: mesh, materialSettings: materialSettings as any },
+            //     perDomain.material.properties,
+            //     pointer,
+            //   );
+            // }
             applyCloudsMouseMove(perDomain.clouds?.enabled ? perDomain.clouds.properties : undefined, config, mouseOverrideRef.current, pointer);
         }
         // ── EFFECTIVE SPEED + UNIFORM UPDATES ─────────────────────────────────────

package/dist/components/Corona.d.ts

@@ -0,0 +1,26 @@
+import * as THREE from "three";
+/**
+ * <Corona />
+ * The halo: an inverted (BackSide) sphere shell driven by SunCoronaMaterial,
+ * additively blended. The shell scale is kept in sync with the material's
+ * u_shellScale so the falloff math stays correct at any size.
+ *
+ * Note: additive blending — reads best against a dark scene background.
+ */
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            sunCoronaMaterial: any;
+        }
+    }
+}
+export type CoronaProps = {
+    /** Radius of the core this corona surrounds. Default 1. */
+    radius?: number;
+    /** Shell size relative to the core. Default 1.25. Synced with u_shellScale. */
+    shellScale?: number;
+    /** Uniform overrides for SunCoronaMaterial (u_intensity, u_innerColor, ...). */
+    uniforms?: Record<string, number | THREE.Vector3 | number[]>;
+};
+export default function Corona({ radius, shellScale, uniforms }: CoronaProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Corona.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Corona.d.ts","sourceRoot":"","sources":["../../src/components/Corona.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;GAOG;AAEH,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,iBAAiB,EAAE,GAAG,CAAC;SACxB;KACF;CACF;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,OAAO,GAAG,MAAM,EAAE,CAAC,CAAC;CAC9D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAU,EACV,UAAiB,EACjB,QAAQ,EACT,EAAE,WAAW,2CAsBb"}

package/dist/components/Corona.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as THREE from "three";
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+export default function Corona({ radius = 1, shellScale = 1.25, uniforms }) {
+    const matRef = useRef(null);
+    useFrame((_, delta) => {
+        if (matRef.current)
+            matRef.current.u_time += delta;
+    });
+    return (_jsxs("mesh", { scale: radius * shellScale, children: [_jsx("sphereGeometry", { args: [1, 64, 64] }), _jsx("coronaMaterial", { ref: matRef, u_shellScale: shellScale, side: THREE.BackSide, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, ...uniforms })] }));
+}

package/dist/components/CreatedObject.js

@@ -15,7 +15,7 @@ const CreatedObject = memo(({ createdObject, children, shouldApply3driseMaterial
     // const { handleObjectClick: contextHandleObjectClick } = useSceneClick();
     const meshRef = useRef(null);
     const transformRef = useRef(null);
-    const baseColorRef = useRef(("color" in createdObject.materialSettings && createdObject.materialSettings.color) || '#ffffff');
+    // const baseColorRef = useRef<string>(("color" in createdObject.materialSettings && createdObject.materialSettings.color) || '#ffffff');  
     // const [hovered, setHovered] = useState(false);
     const [animatedTransform, setAnimatedTransform] = useState({
         position: createdObject.meshSettings.position,

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,EAKzC,MAAM,wBAAwB,CAAC;AAI3C,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,CAgFlD,CAAC;AAIH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CustomPrimitive.d.ts","sourceRoot":"","sources":["../../src/components/CustomPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,EAEL,KAAK,qBAAqB,EAE3B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAQ,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,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,CAiFlD,CAAC;AAIH,eAAe,eAAe,CAAC"}

package/dist/components/CustomPrimitive.js

@@ -1,53 +1,59 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, memo } from "react";
-import { ObjectManager } from "@ntalmagor/3drize-core";
+import { useRef, useEffect, memo } from "react";
+import { createMeshByType, ObjectManager, } from "@ntalmagor/3drize-core";
+import { Mesh } from "three";
 import MaterialLibrary from "./MaterialLibrary.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<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(() => {
+        if (createdObject.type !== 'mesh')
+            return;
+        const managedObject = ObjectManager.getObject(createdObject.id);
+        if (!managedObject || !(managedObject.object instanceof Mesh))
+            return;
+        const targetMesh = managedObject.object;
+        const meshType = createdObject.config?.type || managedObject.object.userData?.type || 'box';
+        const meshData = {
+            position: [targetMesh.position.x, targetMesh.position.y, targetMesh.position.z],
+            rotation: [targetMesh.rotation.x, targetMesh.rotation.y, targetMesh.rotation.z],
+            scale: [targetMesh.scale.x, targetMesh.scale.y, targetMesh.scale.z],
+            visible: targetMesh.visible,
+            name: targetMesh.name || createdObject.name,
+            ...createdObject.config,
+            type: meshType,
+            id: createdObject.id,
+        };
+        const generated = createMeshByType(meshData);
+        if (!generated)
+            return;
+        if (targetMesh.geometry !== generated.mesh.geometry) {
+            targetMesh.geometry?.dispose();
+            targetMesh.geometry = generated.mesh.geometry;
+        }
+        targetMesh.userData = {
+            ...targetMesh.userData,
+            type: meshType,
+            id: createdObject.id,
+            options: generated.config,
+        };
+        if (generated.mesh.material && generated.mesh.material !== targetMesh.material) {
+            if (Array.isArray(generated.mesh.material)) {
+                generated.mesh.material.forEach((m) => m.dispose());
+            }
+            else {
+                generated.mesh.material.dispose();
+            }
+        }
+    }, [
+        createdObject.config,
+    ]);
     const useDreiMaterials = createdObject.materialSettings.materialType === "advanced";
-    // 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));
     if (!obj) {
         // console.warn(`CustomPrimitive - Object with ID ${createdObject.id} not found.`);
         return null;
     }
-    return (
-    // <Select enabled={isSelected}>
-    // <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> */}
-    );
+    return (_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));
 });
 CustomPrimitive.displayName = 'CustomPrimitive';
 export default CustomPrimitive;

package/dist/components/Earth.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import * as THREE from 'three';
+import { EarthConfig } from '@ntalmagor/3drize-core';
+declare const Earth: React.FC<EarthConfig & {
+    onMeshReady?: (mesh: THREE.Mesh) => void;
+}>;
+export default Earth;
+//# sourceMappingURL=Earth.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Earth.d.ts","sourceRoot":"","sources":["../../src/components/Earth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA0C,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAQ7F,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,GAAG;IAAE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,KAAK,IAAI,CAAA;CAAE,CA0E/E,CAAC;AAGF,eAAe,KAAK,CAAC"}

package/dist/components/Earth.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useMemo, useCallback, useEffect } from 'react';
+import * as THREE from 'three';
+import { useTexture } from '@react-three/drei';
+const CDN = 'https://3d-rise.sfo3.cdn.digitaloceanspaces.com/app/images/planets';
+const EARTH_DAY_URL = `${CDN}/earth_day_4096.jpg`;
+const EARTH_NIGHT_URL = `${CDN}/earth_night_4096.jpg`;
+const EARTH_BUMP_ROUGHNESS_CLOUDS_URL = `${CDN}/earth_bump_roughness_clouds_4096.jpg`;
+const Earth = ({ sunPosition = [0, 0, 3], atmosphereDayColor = '#4db2ff', atmosphereTwilightColor = '#bc490b', radius = 1, onMeshReady, }) => {
+    const globeRef = useRef(null);
+    const globeMatRef = useRef(null);
+    const atmosphereMatRef = useRef(null);
+    const segments = 64;
+    const [dayMap, nightMap, bumpRoughnessClouds] = useTexture([
+        EARTH_DAY_URL,
+        EARTH_NIGHT_URL,
+        EARTH_BUMP_ROUGHNESS_CLOUDS_URL,
+    ]);
+    useEffect(() => {
+        dayMap.colorSpace = THREE.SRGBColorSpace;
+        nightMap.colorSpace = THREE.SRGBColorSpace;
+        dayMap.anisotropy = 8;
+        nightMap.anisotropy = 8;
+        bumpRoughnessClouds.anisotropy = 8;
+    }, [dayMap, nightMap, bumpRoughnessClouds]);
+    const sunDirection = useMemo(() => new THREE.Vector3(sunPosition[0], sunPosition[1], sunPosition[2]).normalize(), [sunPosition]);
+    const dayColor = useMemo(() => new THREE.Color(atmosphereDayColor), [atmosphereDayColor]);
+    const twilightColor = useMemo(() => new THREE.Color(atmosphereTwilightColor), [atmosphereTwilightColor]);
+    const handleGlobeRef = useCallback((mesh) => {
+        if (mesh) {
+            globeRef.current = mesh;
+            onMeshReady?.(mesh);
+        }
+    }, [onMeshReady]);
+    return (_jsxs("group", { userData: { id: '3drise-earth' }, children: [_jsxs("mesh", { ref: handleGlobeRef, children: [_jsx("sphereGeometry", { args: [radius, segments, segments] }), _jsx("earthMaterial", { ref: globeMatRef, uDayMap: dayMap, uNightMap: nightMap, uBumpRoughnessClouds: bumpRoughnessClouds, uSunDirection: sunDirection, uAtmosphereDayColor: dayColor, uAtmosphereTwilightColor: twilightColor })] }), _jsxs("mesh", { scale: 1.04, children: [_jsx("sphereGeometry", { args: [radius, segments, segments] }), _jsx("earthAtmosphereMaterial", { ref: atmosphereMatRef, transparent: true, side: THREE.BackSide, depthWrite: false, uSunDirection: sunDirection, uAtmosphereDayColor: dayColor, uAtmosphereTwilightColor: twilightColor })] })] }));
+};
+Earth.displayName = 'Earth';
+export default Earth;

package/dist/components/EffectsGenerator.d.ts

@@ -3,7 +3,7 @@ import { Object3D } from 'three';
 import type { GenerativeEffectSettings } from '@ntalmagor/3drize-core';
 export interface EffectsGeneratorProps {
     settings: GenerativeEffectSettings;
-    object?: Object3D;
+    object?: Object3D | null;
 }
 declare const EffectsGenerator: React.FC<EffectsGeneratorProps>;
 export default EffectsGenerator;

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

@@ -1 +1 @@
-{"version":3,"file":"EffectsGenerator.d.ts","sourceRoot":"","sources":["../../src/components/EffectsGenerator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAgB,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAsBvE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,wBAAwB,CAAC;IACnC,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoCrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"EffectsGenerator.d.ts","sourceRoot":"","sources":["../../src/components/EffectsGenerator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAgB,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AA0BvE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,wBAAwB,CAAC;IACnC,MAAM,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC1B;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwCrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/EffectsGenerator.js

@@ -12,7 +12,6 @@ import DnaHelixEffect from './effects/DnaHelixEffect.js';
 import OrbEffect from './effects/OrbEffect.js';
 import LightningEffect from './effects/LightningEffect.js';
 import AuroraEffect from './effects/AuroraEffect.js';
-import FireEffect from './effects/FireEffect.js';
 import ForcefieldEffect from './effects/ForcefieldEffect.js';
 import NeuralNetworkEffect from './effects/NeuralNetworkEffect.js';
 import BlackHoleEffect from './effects/BlackHoleEffect.js';
@@ -20,6 +19,11 @@ import IceCrystalsEffect from './effects/IceCrystalsEffect.js';
 import SmokePlumeEffect from './effects/SmokePlumeEffect.js';
 import VolumetricFogEffect from './effects/VolumetricFogEffect.js';
 import SmokeRingEffect from './effects/SmokeRingEffect.js';
+import Flares from './Flares.js';
+import SparklesBurst from './SparklesBurst.js';
+import Bubbles from './Bubbles.js';
+import Glyphs from './Glyphs.js';
+import Fire from './effects/Fire.js';
 const EffectsGenerator = ({ settings, object }) => {
     if (!settings.enabled)
         return null;
@@ -45,7 +49,6 @@ const EffectsGenerator = ({ settings, object }) => {
         case 'orb': return _jsx(OrbEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
         case 'lightning': return _jsx(LightningEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
         case 'aurora': return _jsx(AuroraEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
-        case 'fire': return _jsx(FireEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
         case 'forcefield': return _jsx(ForcefieldEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
         case 'neuralNetwork': return _jsx(NeuralNetworkEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
         case 'blackHole': return _jsx(BlackHoleEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
@@ -53,6 +56,11 @@ const EffectsGenerator = ({ settings, object }) => {
         case 'smokePlume': return _jsx(SmokePlumeEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
         case 'volumetricFog': return _jsx(VolumetricFogEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
         case 'smokeRing': return _jsx(SmokeRingEffect, { boundingRadius: boundingRadius, config: config, animations: animations });
+        case 'fire': return _jsx(Fire, { hostRef: object, config: config, animations: animations });
+        case 'flares': return _jsx(Flares, { hostRef: object, config: config, animations: animations });
+        case 'sparklesBurst': return _jsx(SparklesBurst, { boundingRadius: boundingRadius, config: config });
+        case 'bubbles': return _jsx(Bubbles, { boundingRadius: boundingRadius, config: config });
+        case 'glyphs': return _jsx(Glyphs, { boundingRadius: boundingRadius, config: config });
         default: return null;
     }
 };

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,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"}
+{"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;AAI3F,UAAU,iBAAiB;IACzB,aAAa,EAAE,qBAAqB,CAAC;CACtC;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAW7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/EffectsGroup.js

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

package/dist/components/Flares.d.ts

@@ -0,0 +1,64 @@
+import { Vector3, Object3D } from "three";
+import { AnimationOptions, FlaresConfig } from "@ntalmagor/3drize-core";
+/**
+ * <Flares />
+ * Explosive energy bursts.
+ *
+ * TWO MODES, controlled by the `hostRef` prop:
+ *
+ * hostRef = false (default) — PLANE MODE
+ *   Renders a camera-facing billboard plane with bursts erupting from a
+ *   circular limb (radius 1 in plane units). Auto-fits to the enclosing
+ *   object's bounding sphere if there is one; otherwise size it with
+ *   `radius`. Zero extra cost. Ideal for spheres / round bodies (the Sun).
+ *
+ *     <mesh>
+ *       <sphereGeometry />
+ *       <Flares />
+ *     </mesh>
+ *
+ * hostRef = true — SILHOUETTE MODE
+ *   Treats the enclosing object as the host: each frame the host is
+ *   rendered as a mask into a render target and the shader roots the
+ *   bursts on the host's ACTUAL screen silhouette, whatever its shape.
+ *   Costs one extra (cheap) render pass of the host per frame.
+ *
+ *     <primitive object={gltf.scene}>
+ *       <Flares hostRef fitKey={gltf.scene} />
+ *     </primitive>
+ *
+ * shooting = true — CENTER BURSTS
+ *   The same bursts, rooted at the plane center instead of the limb,
+ *   firing outward from the source. Overrides plane/silhouette rooting.
+ *   Renders over the host (depth test off) so the rays stay visible.
+ *
+ *     <Flares shooting />
+ *
+ * Shared behavior:
+ * - Auto-fits to the enclosing object's bounding sphere (`radius` to
+ *   override, `fitKey` to re-fit after async loads, `padding` to tighten).
+ * - World-space billboarding: correct under rotated/scaled ancestors.
+ * - Additive blending — reads best against a dark scene background.
+ */
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            flareMaterial: any;
+        }
+    }
+}
+export type FlaresProps = {
+    /**
+     * true  -> silhouette mode: bursts root on the enclosing object's actual
+     *          screen silhouette (mask render pass).
+     * false -> plane mode: circular limb billboard (default).
+     */
+    hostRef?: Object3D | null;
+    /** Root the bursts at the center (shooting from source) instead of the limb. */
+    config: FlaresConfig;
+    /** Uniform overrides for FlareMaterial (u_frequency, u_reach, ...). */
+    uniforms?: Record<string, number | Vector3 | number[]>;
+    animations?: AnimationOptions[];
+};
+export default function Flares({ hostRef, config, uniforms, animations }: FlaresProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Flares.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flares.d.ts","sourceRoot":"","sources":["../../src/components/Flares.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,OAAO,EAAqC,QAAQ,EAAwB,MAAM,OAAO,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,aAAa,EAAE,GAAG,CAAC;SACpB;KACF;CACF;AAED,MAAM,MAAM,WAAW,GAAG;IACxB;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,gFAAgF;IAChF,MAAM,EAAE,YAAY,CAAA;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,CAAC,CAAC;IACvD,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC,CAAC;AAUF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,OAAO,EACP,MAAM,EACN,QAAQ,EACR,UAAU,EACX,EAAE,WAAW,2CAyJb"}