@3driseai/3drise-viewer 0.1.1

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/ImageGeometry.d.ts

@@ -0,0 +1,13 @@
+import type { GeometryType, ObjectEdges, MaterialSettings } from '@3driseai/3drise-core';
+export interface ImageGeometryProps {
+    geometryType: GeometryType;
+    url: string;
+    position?: [number, number, number];
+    rotation?: [number, number, number];
+    scale?: [number, number, number];
+    outerFrameScale?: number;
+    materialSettings?: MaterialSettings;
+    edgesSettings?: ObjectEdges;
+}
+export declare const ImageGeometry: any;
+//# sourceMappingURL=ImageGeometry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGeometry.d.ts","sourceRoot":"","sources":["../../src/components/ImageGeometry.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzF,MAAM,WAAW,kBAAkB;IAC/B,YAAY,EAAE,YAAY,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,aAAa,CAAC,EAAE,WAAW,CAAC;CAC/B;AAED,eAAO,MAAM,aAAa,EAuDpB,GAAI,CAAC"}

package/dist/components/ImageGeometry.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useState } from 'react';
+import { DoubleSide, Mesh, MeshBasicMaterial } from 'three';
+import { createMeshByType } from '@3driseai/3drise-core';
+import { texturesManager } from '@3driseai/3drise-core';
+export const ImageGeometry = forwardRef(({ geometryType, url, position = [0, 0, 0], rotation = [0, 0, 0], scale = [1, 1, 1], }, ref) => {
+    const [texture, setTexture] = useState(null);
+    useEffect(() => {
+        const textureName = url.split('/').pop()?.split('.')[0] || `texture-${Date.now()}`;
+        texturesManager.loadTexture(textureName, url, 'images')
+            .then(setTexture)
+            .catch((err) => console.error('Failed to load texture:', err));
+    }, [url]);
+    const meshConfig = useMemo(() => {
+        const base = {
+            type: geometryType,
+            position,
+            rotation,
+            scale,
+            visible: true,
+            id: `image-${geometryType}-${Date.now()}`,
+            name: `image-${geometryType}`,
+            castShadow: true,
+            receiveShadow: true,
+        };
+        switch (geometryType) {
+            case 'plane':
+                return { ...base, scale: [1, 1, 1], widthSegments: 1, heightSegments: 1 };
+            case 'ring':
+                return { ...base, scale: [1, 1, 1], innerRadius: 0.5, outerRadius: 1, thetaSegments: 32, phiSegments: 8 };
+            case 'arc':
+                return { ...base, scale: [1, 1, 1], radius: 1, startAngle: 0, endAngle: Math.PI, width: 0.3, segments: 32 };
+            case 'bentPlane':
+                return { ...base, scale: [1, 1, 1], width: 2, height: 1, radius: 2, arc: Math.PI / 2, widthSegments: 32, heightSegments: 1 };
+            case 'bentPlaneInverse':
+                return { ...base, scale: [1, 1, 1], width: 2, height: 1, radius: 2, arc: Math.PI / 2, widthSegments: 32, heightSegments: 1 };
+            default:
+                return base;
+        }
+    }, [geometryType, position, rotation, scale]);
+    const createdMesh = useMemo(() => {
+        const mesh = createMeshByType(meshConfig)?.mesh;
+        if (!(mesh instanceof Mesh))
+            return null;
+        if (texture) {
+            mesh.material = new MeshBasicMaterial({
+                map: texture,
+                side: DoubleSide,
+                toneMapped: false,
+                transparent: true,
+                polygonOffset: true,
+                polygonOffsetFactor: 1,
+                polygonOffsetUnits: 1,
+            });
+        }
+        return mesh;
+    }, [meshConfig, texture]);
+    if (!createdMesh)
+        return null;
+    return (_jsx("group", { position: position, rotation: rotation, children: _jsx("primitive", { name: url, ref: ref, object: createdMesh }) }));
+});
+ImageGeometry.displayName = 'ImageGeometry';

package/dist/components/Lensflare.d.ts

@@ -0,0 +1,12 @@
+import * as THREE from 'three';
+import React from "react";
+import type { TimeSettings } from "@3driseai/3drise-core";
+export interface LensflareProps {
+    visible?: boolean;
+    intensity?: number;
+    timeSettings?: TimeSettings;
+}
+export declare function createFlareTexture(type: number): THREE.CanvasTexture;
+declare const Lensflare: React.FC<LensflareProps>;
+export default Lensflare;
+//# sourceMappingURL=Lensflare.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lensflare.d.ts","sourceRoot":"","sources":["../../src/components/Lensflare.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,MAAM,WAAW,cAAc;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC/B;AAGD,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,aAAa,CA4BpE;AACD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA8BvC,CAAC;AACF,eAAe,SAAS,CAAC"}

package/dist/components/Lensflare.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useMemo, useCallback } from 'react';
+import * as THREE from 'three';
+import { useThree } from '@react-three/fiber';
+import { useSkySystem } from '../hooks/useSkySystem.js';
+export function createFlareTexture(type) {
+    const canvas = document.createElement('canvas');
+    canvas.width = 256;
+    canvas.height = 256;
+    const ctx = canvas.getContext('2d');
+    if (type === 0) {
+        const gradient = ctx.createRadialGradient(128, 128, 0, 128, 128, 128);
+        gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
+        gradient.addColorStop(0.1, 'rgba(255, 250, 240, 0.9)');
+        gradient.addColorStop(0.25, 'rgba(255, 229, 176, 0.6)');
+        gradient.addColorStop(0.5, 'rgba(255, 229, 176, 0.2)');
+        gradient.addColorStop(1, 'rgba(255, 229, 176, 0)');
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, 256, 256);
+    }
+    else {
+        const gradient = ctx.createRadialGradient(128, 128, 0, 128, 128, 128);
+        gradient.addColorStop(0, 'rgba(255, 229, 176, 0.6)');
+        gradient.addColorStop(0.3, 'rgba(255, 229, 176, 0.3)');
+        gradient.addColorStop(0.6, 'rgba(255, 229, 176, 0.1)');
+        gradient.addColorStop(1, 'rgba(255, 229, 176, 0)');
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, 256, 256);
+    }
+    const texture = new THREE.CanvasTexture(canvas);
+    texture.minFilter = THREE.LinearFilter;
+    texture.magFilter = THREE.LinearFilter;
+    return texture;
+}
+const Lensflare = ({ visible = true, intensity = 1, timeSettings = { enabled: false, timeOfDay: 12, timescale: 1, autoAnimate: true, syncWithRealTime: false }, }) => {
+    const spriteRef = useRef(null);
+    const { camera } = useThree();
+    const texture = useMemo(() => createFlareTexture(0), []);
+    const material = useMemo(() => new THREE.SpriteMaterial({
+        map: texture,
+        transparent: true,
+        blending: THREE.AdditiveBlending,
+        depthWrite: false,
+        depthTest: false,
+    }), [texture]);
+    const handleTimeUpdate = useCallback((state) => {
+        const { sunDirection } = state;
+        if (spriteRef.current) {
+            const distance = Math.min(camera.far * 0.5, 200);
+            spriteRef.current.position.copy(camera.position);
+            spriteRef.current.position.addScaledVector(sunDirection, distance);
+            const flareScale = 5 * intensity;
+            spriteRef.current.scale.setScalar(flareScale);
+            material.opacity = sunDirection.y > 0 ? Math.min(sunDirection.y * 2, 1) : 0;
+        }
+    }, [camera, intensity, material]);
+    useSkySystem({
+        timeSettings,
+        onTimeUpdate: handleTimeUpdate,
+        enabled: visible,
+    });
+    if (!visible)
+        return null;
+    return (_jsx("sprite", { ref: spriteRef, material: material, renderOrder: Infinity }));
+};
+export default Lensflare;

package/dist/components/Letter.d.ts

@@ -0,0 +1,19 @@
+import type { HoverSettings, Vector3Array, TransformEffect, MaterialSettings, ColorEffect, TextConfig } from '@3driseai/3drise-core';
+import { Object3D } from "three";
+export interface LetterData {
+    char: string;
+    position: Vector3Array;
+    index: number;
+}
+export interface LetterProps {
+    letterData: LetterData;
+    config: TextConfig;
+    materialSettings: MaterialSettings;
+    hoverSettings: HoverSettings;
+    transformEffects?: TransformEffect[];
+    colorEffects?: ColorEffect[];
+    isActive: boolean;
+    onClick?: (object: Object3D) => void;
+}
+export default function Letter({ letterData, config, materialSettings, hoverSettings, transformEffects, colorEffects, isActive, onClick, }: LetterProps): import("react").JSX.Element;
+//# sourceMappingURL=Letter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Letter.d.ts","sourceRoot":"","sources":["../../src/components/Letter.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACrI,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,MAAM,WAAW,UAAU;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,aAAa,EAAE,aAAa,CAAC;IAC7B,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAC;CACxC;AA6BD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAqB,EAAE,YAAiB,EAAE,QAAQ,EAAE,OAAO,GAAG,EAAE,WAAW,+BAgDhK"}

package/dist/components/Letter.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { useCursor, Text, Text3D, Center } from '@react-three/drei';
+import MaterialLibrary from './MaterialLibrary.js';
+import { createDefaultEffectState, applyTransformEffects } from '@3driseai/3drise-core';
+import { useFrameEffects } from '../hooks/useFrameEffects.js';
+import { fontManager } from '@3driseai/3drise-core';
+const getText3DConfig = (config) => {
+    const c = config;
+    return {
+        size: c.size ?? 1,
+        height: c.height ?? 0.2,
+        curveSegments: c.curveSegments ?? 12,
+        bevelEnabled: c.bevelEnabled ?? true,
+        bevelThickness: c.bevelThickness ?? 0.03,
+        bevelSize: c.bevelSize ?? 0.02,
+        bevelOffset: c.bevelOffset ?? 0,
+        bevelSegments: c.bevelSegments ?? 5,
+        letterSpacing: c.letterSpacing ?? 0,
+    };
+};
+const getText2DConfig = (config) => {
+    const c = config;
+    return {
+        fontSize: c.fontSize ?? 1,
+        maxWidth: c.maxWidth ?? Infinity,
+        lineHeight: c.lineHeight ?? 1,
+        letterSpacing: c.letterSpacing ?? 0,
+        textAlign: c.textAlign ?? 'center',
+        anchorX: c.anchorX ?? 'center',
+        anchorY: c.anchorY ?? 'middle',
+    };
+};
+export default function Letter({ letterData, config, materialSettings, hoverSettings, transformEffects = [], colorEffects = [], isActive, onClick, }) {
+    const groupRef = useRef(null);
+    const letterRef = useRef(null);
+    const hitboxRef = useRef(null);
+    const effectStateRef = useRef(null);
+    const [rnd] = useState(() => Math.random());
+    const [clicked, setClicked] = useState(false);
+    const { handlePointerEnter, handlePointerLeave, hovered } = useFrameEffects(isActive);
+    const { renderMode = 'bitmap', font } = config;
+    const text3DConfig = getText3DConfig(config);
+    const text2DConfig = getText2DConfig(config);
+    const { sensitivity = 0.5, applyToChildren = false } = hoverSettings;
+    const color = 'color' in materialSettings ? materialSettings.color : '#ffffff';
+    const opacity = 'opacity' in materialSettings ? materialSettings.opacity : 1;
+    const useDreiMaterials = materialSettings.materialType === 'advanced';
+    useEffect(() => {
+        if (useDreiMaterials && renderMode === 'bitmap') {
+            console.warn('[Letter] Advanced materials not supported with bitmap text. Switch to text3d render mode.');
+        }
+    }, [useDreiMaterials, renderMode]);
+    useCursor(hovered);
+    const fontInfo = font ? fontManager.getFont(font) : null;
+    const bitmapFontUrl = fontInfo?.googleFont;
+    const text3dFontUrl = fontInfo?.threejsFont;
+    const enabledEffects = transformEffects.filter(e => e.enabled !== false);
+    useFrame((state, dt) => {
+        if (!groupRef.current || !letterRef.current || !applyToChildren)
+            return;
+        const time = state.clock.elapsedTime;
+        if (!effectStateRef.current) {
+            effectStateRef.current = createDefaultEffectState(letterRef.current);
+        }
+        if (enabledEffects.length > 0) {
+            applyTransformEffects(letterRef.current, enabledEffects, time, dt, effectStateRef.current, hovered, clicked, sensitivity);
+        }
+    });
+    const handleClick = (e) => {
+        e.stopPropagation();
+        setClicked(!clicked);
+        if (groupRef.current)
+            onClick?.(groupRef.current);
+    };
+    const actualRenderMode = renderMode === 'text3d' && !font ? 'bitmap' : renderMode;
+    const fontSize = actualRenderMode === 'text3d' ? text3DConfig.size : text2DConfig.fontSize;
+    const boxWidth = fontSize * 0.8;
+    const boxHeight = fontSize * 1.2;
+    const boxDepth = actualRenderMode === 'text3d' ? text3DConfig.height + text3DConfig.bevelThickness * 2 : text3DConfig.height + 1;
+    return (_jsx("group", { position: letterData.position, rotation: [0, 0, 0], ref: groupRef, name: `letter-${letterData.char}-${letterData.index}`, userData: { char: letterData.char, index: letterData.index, position: letterData.position }, children: _jsx("group", { ref: letterRef, raycast: () => null, children: actualRenderMode === 'text3d' ? (_jsx(Center, { disableX: text2DConfig.anchorX === 'left', disableY: text2DConfig.anchorY === 'top', disableZ: false, children: _jsxs(Text3D, { font: text3dFontUrl || 'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', size: text3DConfig.size, height: text3DConfig.height, curveSegments: text3DConfig.curveSegments, bevelEnabled: text3DConfig.bevelEnabled, bevelThickness: text3DConfig.bevelThickness, bevelSize: text3DConfig.bevelSize, bevelOffset: text3DConfig.bevelOffset, bevelSegments: text3DConfig.bevelSegments, children: [letterData.char, useDreiMaterials && actualRenderMode === 'text3d' ? (_jsx(MaterialLibrary, { materialSettings: materialSettings })) : (_jsx("meshStandardMaterial", { color: color, transparent: opacity < 1, opacity: opacity }))] }) })) : (_jsx(Text, { fontSize: text2DConfig.fontSize, color: color, maxWidth: text2DConfig.maxWidth, lineHeight: text2DConfig.lineHeight, letterSpacing: text2DConfig.letterSpacing, textAlign: text2DConfig.textAlign, anchorX: text2DConfig.anchorX, anchorY: text2DConfig.anchorY, font: bitmapFontUrl || undefined, fillOpacity: opacity, children: letterData.char })) }) }));
+}

package/dist/components/Letters.d.ts

@@ -0,0 +1,16 @@
+import { LetterData } from './Letter';
+import type { HoverSettings } from "@3driseai/3drise-core";
+import type { TextConfig } from "@3driseai/3drise-core";
+import type { MaterialSettings } from "@3driseai/3drise-core";
+import type { ColorEffect, TransformEffect } from "@3driseai/3drise-core";
+export interface LettersProps {
+    text: string;
+    config: TextConfig;
+    materialSettings: MaterialSettings;
+    hoverSettings: HoverSettings;
+    transformEffects?: TransformEffect[];
+    colorEffects?: ColorEffect[];
+    onLetterClick?: (letterData: LetterData) => void;
+}
+export default function Letters({ text, config, materialSettings, hoverSettings, transformEffects, colorEffects, onLetterClick, }: LettersProps): import("react").JSX.Element;
+//# sourceMappingURL=Letters.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Letters.d.ts","sourceRoot":"","sources":["../../src/components/Letters.tsx"],"names":[],"mappings":"AACA,OAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC1E,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,CAAC;IACnB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,aAAa,EAAE,aAAa,CAAC;IAC7B,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CACpD;AAGD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAqB,EAAE,YAAiB,EAAE,aAAa,GAAG,EAAE,YAAY,+BAcxJ"}