@ntalmagor/3drize-viewer 0.1.2

package/dist/components/Moon.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useCallback } from 'react';
+import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
+import { useTexture } from '@react-three/drei';
+export { defaultMoonSettings } from '@ntalmagor/3drize-core';
+const MOON_TEXTURE_URL = 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/06a094a4-7bd7-4bb9-b998-6c1e17f66c08/dbcju0k-b9b333e1-dd8d-4657-90db-7d3e7e179843.png';
+const Moon = ({ settings, sunPosition, onMeshReady }) => {
+    const meshRef = useRef(null);
+    const lightRef = useRef(null);
+    const targetRef = useRef(null);
+    const texture = useTexture(MOON_TEXTURE_URL);
+    const s = settings ?? {
+        visible: true,
+        position: [0, 5, 0],
+        scale: 3,
+        rotation: [0, 0, 0.5],
+        emissiveIntensity: 0.3,
+        orbitRadius: 250,
+        enableOrbit: false,
+        orbitSpeed: 0.1,
+    };
+    const handleMeshRef = useCallback((mesh) => {
+        if (mesh) {
+            meshRef.current = mesh;
+            onMeshReady?.(mesh);
+        }
+    }, [onMeshReady]);
+    useFrame((state) => {
+        const moonPos = sunPosition ?? s.position;
+        if (meshRef.current && s.enableOrbit) {
+            const time = state.clock.getElapsedTime();
+            const speed = s.orbitSpeed ?? 0.1;
+            const radius = s.orbitRadius ?? 250;
+            meshRef.current.position.x = Math.cos(time * speed) * radius;
+            meshRef.current.position.z = Math.sin(time * speed) * radius;
+            meshRef.current.rotation.y += 0.001;
+        }
+        if (lightRef.current && targetRef.current) {
+            const cameraPos = state.camera.position;
+            const moonPosition = meshRef.current?.position ?? new THREE.Vector3(...moonPos);
+            const dirToMoon = new THREE.Vector3().subVectors(moonPosition, cameraPos).normalize();
+            const dist = cameraPos.distanceTo(moonPosition) * 0.2;
+            lightRef.current.position.copy(cameraPos).addScaledVector(dirToMoon, dist);
+            targetRef.current.position.copy(moonPosition);
+        }
+    });
+    const moonPos = sunPosition ?? s.position;
+    return (_jsxs("group", { userData: { id: '3drise-moon' }, children: [_jsx("object3D", { ref: targetRef, position: moonPos }), _jsx("directionalLight", { ref: lightRef, intensity: 2, color: 0xffffff, target: targetRef.current ?? undefined }), _jsxs("mesh", { ref: handleMeshRef, position: moonPos, rotation: s.rotation, scale: s.scale, visible: s.visible, children: [_jsx("sphereGeometry", { args: [10, 22, 22] }), _jsx("meshPhongMaterial", { color: 0xb2b2b2, normalMap: texture, shininess: 0 })] })] }));
+};
+Moon.displayName = 'Moon';
+export default Moon;

package/dist/components/ObjectNode.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Object3D } from "three";
+import type { CameraState, CreatedObjectSettings, ObjectTreeNode } from "@ntalmagor/3drize-core";
+type ObjectNodeProps = {
+    node: ObjectTreeNode;
+    cameraSettings: CameraState;
+    onObjectReady?: (object: CreatedObjectSettings, ref: Object3D) => void;
+};
+declare const ObjectNode: React.FC<ObjectNodeProps>;
+export default ObjectNode;
+//# sourceMappingURL=ObjectNode.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectNode.d.ts","sourceRoot":"","sources":["../../src/components/ObjectNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAA6D,cAAc,EAA0B,MAAM,wBAAwB,CAAC;AASpL,KAAK,eAAe,GAAG;IACnB,IAAI,EAAE,cAAc,CAAC;IACrB,cAAc,EAAE,WAAW,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC1E,CAAC;AA0JF,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqCzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ObjectNode.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from "react";
+import CustomPrimitive from "./CustomPrimitive";
+import CreatedObject from "./CreatedObject.js";
+import { Text3D, Text2D, PathRenderer, GalleryLayout, EffectsGenerator } from "@ntalmagor/3drize-viewer";
+import ParticlesR3f from "./ParticlesR3f.js";
+import Lines from "./Lines.js";
+import GridHelper from "./GridHelper";
+// Specialized renderers for each object type
+const renderers = {
+    group: () => null,
+    mesh: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady }, obj.id)),
+    model: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady }, obj.id)),
+    custom_primitive: (obj, cameraSettings, onObjectReady) => (_jsx(CustomPrimitive, { createdObject: obj, cameraSettings: cameraSettings, onObjectReady: onObjectReady }, obj.id)),
+    text: (obj, cameraSettings, onObjectReady) => {
+        const renderMode = obj.config?.renderMode ?? 'bitmap';
+        return (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, children: renderMode === 'text3d'
+                ? _jsx(Text3D, { textSettings: obj })
+                : _jsx(Text2D, { textSettings: obj }) }, obj.id));
+    },
+    particles: (obj, cameraSettings, onObjectReady) => {
+        const particlesSettings = obj;
+        return (_jsxs(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, children: [particlesSettings.config?.particles && (_jsx(ParticlesR3f, { particlesSettings: particlesSettings, cameraFov: cameraSettings.fov, duration: 1, transitionSettings: particlesSettings.meshSettings })), particlesSettings.config?.paths && (_jsx(Lines, { createdObject: particlesSettings }))] }, obj.id));
+    },
+    path: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, children: _jsx(PathRenderer, { pathSettings: obj.config, showCurve: false, showLine: false, showPoints: false }, obj.id) }, obj.id)),
+    grid: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, onObjectReady: onObjectReady, children: _jsx(GridHelper, { ...obj.config }) }, obj.id)),
+    effect: (obj) => (_jsx(EffectsGenerator, { settings: {
+            enabled: true,
+            config: obj.config,
+        } }, obj.id)),
+    gallery: (obj, cameraSettings, onObjectReady) => (_jsx(CreatedObject, { createdObject: obj, shouldApply3driseMaterial: true, children: _jsx(GalleryLayout, { createdObject: obj }) }, obj.id)),
+};
+const EffectsLayer = ({ effects }) => effects?.length ? (_jsx(_Fragment, { children: effects.map((effect, index) => (_jsx(EffectsGenerator, { settings: effect }, index))) })) : null;
+const GroupWithChildren = ({ createdObject, children, cameraSettings, onObjectReady, renderObject }) => {
+    const meshSettings = createdObject.meshSettings;
+    const isGroup = createdObject.type === 'group';
+    const hasChildren = children.length > 0;
+    return (_jsxs("group", { position: meshSettings.position, rotation: meshSettings.rotation, scale: meshSettings.scale, visible: meshSettings.visible, name: createdObject.name, userData: { id: createdObject.id, type: createdObject.type }, children: [!isGroup && renderObject(createdObject), children.map(childNode => (_jsx(ObjectNode, { node: childNode, cameraSettings: cameraSettings, onObjectReady: onObjectReady }, childNode.objectId))), _jsx(EffectsLayer, { effects: createdObject.effects })] }, createdObject.id));
+};
+const ObjectNode = ({ node, cameraSettings, onObjectReady }) => {
+    // console.log(node)
+    const { children, createdObject } = node;
+    if (!createdObject) {
+        console.warn(`createdObject not found.`);
+        return null;
+    }
+    const meshSettings = createdObject.meshSettings;
+    const hasChildren = children.length > 0;
+    const shouldRenderAsGroup = hasChildren || createdObject.type === 'group' || createdObject.type === 'effect';
+    const renderObject = useCallback((obj) => {
+        const renderer = renderers[obj.type];
+        return renderer?.(obj, cameraSettings, onObjectReady) ?? null;
+    }, [cameraSettings, onObjectReady]);
+    const renderedObject = shouldRenderAsGroup
+        ? _jsx(GroupWithChildren, { createdObject: createdObject, children: children, cameraSettings: cameraSettings, onObjectReady: onObjectReady, renderObject: renderObject })
+        : createdObject.effects
+            ? _jsxs(_Fragment, { children: [renderObject(createdObject), _jsx(EffectsLayer, { effects: createdObject.effects })] })
+            : renderObject(createdObject);
+    return renderedObject;
+};
+export default ObjectNode;

package/dist/components/ObjectsRenderer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { GeneralObjectSettings, type CameraState, type CreatedObjectSettings } from '@ntalmagor/3drize-core';
+interface ObjectsRendererProps {
+    cameraSettings: CameraState;
+    generalObjectSettings: GeneralObjectSettings;
+    createdObjects: CreatedObjectSettings[];
+    onObjectsReady?: () => void;
+}
+declare const ObjectsRenderer: React.FC<ObjectsRendererProps>;
+export default ObjectsRenderer;
+//# sourceMappingURL=ObjectsRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectsRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ObjectsRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAmB,qBAAqB,EAAE,KAAK,WAAW,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAO9H,UAAU,oBAAoB;IAC5B,cAAc,EAAE,WAAW,CAAC;IAC5B,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,cAAc,EAAE,qBAAqB,EAAE,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+BlD,CAAC;AAIH,eAAe,eAAe,CAAC"}

package/dist/components/ObjectsRenderer.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useRef, useCallback, useMemo } from 'react';
+import { buildObjectTree } from '@ntalmagor/3drize-core';
+import ObjectNode from './ObjectNode';
+const ObjectsRenderer = memo(({ cameraSettings, createdObjects, generalObjectSettings, onObjectsReady }) => {
+    const groupRef = useRef(null);
+    const objectsTree = useMemo(() => buildObjectTree(createdObjects), [createdObjects]);
+    const readyObjectsCount = useRef(0);
+    const onObjectReady = useCallback((object, ref) => {
+        readyObjectsCount.current += 1;
+        if (readyObjectsCount.current === objectsTree.length) {
+            console.log("All objects are ready!");
+            onObjectsReady && onObjectsReady();
+        }
+    }, [objectsTree.length, onObjectsReady]);
+    return (_jsx("group", { ref: groupRef, name: "main-objects", position: generalObjectSettings.meshSettings.position, rotation: generalObjectSettings.meshSettings.rotation, scale: generalObjectSettings.meshSettings.scale, children: objectsTree.map(node => (_jsx(ObjectNode, { node: node, cameraSettings: cameraSettings, onObjectReady: onObjectReady }, node.objectId))) }));
+});
+ObjectsRenderer.displayName = 'ObjectsRenderer';
+export default ObjectsRenderer;

package/dist/components/Ocean.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Ocean.d.ts","sourceRoot":"","sources":["../../src/components/Ocean.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,aAAa,CAAC;CACzB;AA+CD,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA4E/B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Ocean.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
+import { useMaterialApplication } from '../hooks/useMaterialApplication';
+import { useWaterEnvironment } from '../hooks/useWaterEnvironment';
+import { useWaterReflections } from '../hooks/useWaterReflections';
+import { update3driseShaderUniforms } from '../utils/shaderUtils';
+import { useMouseHandlers } from '../hooks/useMouseHandlers';
+function getValueType(property, value) {
+    if (Array.isArray(value)) {
+        if (value.length === 3)
+            return 'vector3';
+        if (value.length === 2)
+            return 'vector2';
+        if (value.length === 4)
+            return 'vector4';
+    }
+    if (value instanceof THREE.Color || (typeof value === 'string' && value.startsWith('#')))
+        return 'color';
+    if (typeof value === 'number')
+        return 'number';
+    if (typeof value === 'boolean')
+        return 'boolean';
+    return 'unknown';
+}
+function applyMaterialValue(mesh, property, value, valueType) {
+    const material = mesh.material;
+    if (!material)
+        return;
+    switch (valueType) {
+        case 'vector3':
+            if (material[property]?.isVector3) {
+                material[property].set(value[0], value[1], value[2]);
+            }
+            else if (material.uniforms?.[property]) {
+                material.uniforms[property].value.set(value[0], value[1], value[2]);
+            }
+            break;
+        case 'color':
+            if (material[property]?.isColor) {
+                material[property].set(value);
+            }
+            else if (material.uniforms?.[property]) {
+                material.uniforms[property].value = new THREE.Color(value);
+            }
+            break;
+        default:
+            if (material[property] !== undefined) {
+                material[property] = value;
+            }
+            else if (material.uniforms?.[property]) {
+                material.uniforms[property].value = value;
+            }
+    }
+}
+const Ocean = ({ settings }) => {
+    const meshRef = useRef(null);
+    const planeSize = settings.planeSize || [10000, 10000];
+    const planeSegments = settings.planeSegments || 64;
+    const position = settings.position || [0, -1, 0];
+    const rotation = settings.rotation || [-Math.PI / 2, 0, 0];
+    const handlers = settings.handlers || {};
+    const { interpolateProperty } = useMouseHandlers();
+    useMaterialApplication(meshRef.current, settings.materialSettings);
+    useWaterEnvironment(settings.visible ? meshRef : { current: null });
+    useWaterReflections(settings.visible ? meshRef : { current: null }, {
+        waterPosition: new THREE.Vector3(...position),
+        resolution: 256,
+        updateFrequency: 1,
+        enabled: settings.visible,
+    });
+    useFrame((state) => {
+        if (!meshRef.current?.material || !settings.visible)
+            return;
+        const material = meshRef.current.material;
+        const uniforms = material?.uniforms;
+        if (!uniforms)
+            return;
+        const u_time = state.clock.getElapsedTime();
+        const mouse = state.pointer;
+        if (uniforms.u_time)
+            uniforms.u_time.value = u_time;
+        if (uniforms.u_cameraPosition)
+            uniforms.u_cameraPosition.value.copy(state.camera.position);
+        if (uniforms.u_resolution)
+            uniforms.u_resolution.value.set(window.innerWidth, window.innerHeight);
+        if (uniforms.u_mouse)
+            uniforms.u_mouse.value.set(mouse.x, mouse.y);
+        if (settings.effects) {
+            update3driseShaderUniforms(uniforms, settings.effects, u_time, mouse);
+        }
+        // Mouse-move property handlers
+        if (handlers?.onMouseMove?.enabled && handlers.onMouseMove.properties.length && meshRef.current) {
+            handlers.onMouseMove.properties.forEach((props) => {
+                const { property, propertySettings } = props;
+                const { min: minValue, max: maxValue, axis, sensitivity = 1, inverted = false } = propertySettings;
+                const baseValue = settings.materialSettings[property];
+                if (!baseValue)
+                    return;
+                const interpolatedValue = interpolateProperty(baseValue, minValue, maxValue, mouse, axis, sensitivity, inverted);
+                const valueType = getValueType(property, interpolatedValue);
+                if (meshRef.current) {
+                    applyMaterialValue(meshRef.current, property, interpolatedValue, valueType);
+                }
+            });
+        }
+    });
+    return (_jsx("mesh", { ref: meshRef, name: "Ocean", position: position, rotation: rotation, visible: settings.visible, userData: { id: '3drise-water' }, children: _jsx("planeGeometry", { args: [planeSize[0], planeSize[1], planeSegments, planeSegments] }) }));
+};
+export default Ocean;

package/dist/components/ParticlesR3f.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ParticlesSettings } from '@ntalmagor/3drize-core';
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        shaderEffectsMaterial: any;
+    }
+}
+interface ParticlesR3fProps {
+    particlesSettings: ParticlesSettings;
+    cameraFov?: number;
+    duration?: number;
+    transitionSettings?: Record<string, unknown>;
+}
+declare const ParticlesR3f: React.FC<ParticlesR3fProps>;
+export default ParticlesR3f;
+//# sourceMappingURL=ParticlesR3f.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParticlesR3f.d.ts","sourceRoot":"","sources":["../../src/components/ParticlesR3f.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,wBAAwB,CAAC;AAU/E,OAAO,QAAQ,oBAAoB,CAAC;IAClC,UAAU,aAAa;QACrB,qBAAqB,EAAE,GAAG,CAAC;KAC5B;CACF;AAED,UAAU,iBAAiB;IACzB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC9C;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqG7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/ParticlesR3f.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { extend, useFrame } from '@react-three/fiber';
+import { Color } from 'three';
+import { ShaderEffectsMaterial } from '../shaders/ShaderEffectsMaterial';
+import { useParticlePositions } from '../hooks/useParticlePositions';
+import { useParticlesColors } from '../hooks/useParticlesColors';
+import { useParticlesTextures } from '../hooks/useParticlesTextures';
+import { handleShapeAnimation } from '../../../core/src/utils/particleAnimations';
+extend({ ShaderEffectsMaterial });
+const ParticlesR3f = ({ particlesSettings, duration = 1, transitionSettings, }) => {
+    const materialRef = useRef(null);
+    const pointsRef = useRef(null);
+    const { name, config, meshSettings } = particlesSettings;
+    const { count, shapeType, outlines, texture } = config;
+    const color = particlesSettings.materialSettings && 'color' in particlesSettings.materialSettings
+        ? particlesSettings.materialSettings.color
+        : '#ffffff';
+    const opacity = particlesSettings.materialSettings && 'opacity' in particlesSettings.materialSettings
+        ? particlesSettings.materialSettings.opacity
+        : 1.0;
+    const targetShape = (transitionSettings?.shapeType && typeof transitionSettings.shapeType === 'string')
+        ? transitionSettings.shapeType
+        : shapeType;
+    const targetOutLines = transitionSettings?.outlines !== undefined
+        ? transitionSettings.outlines
+        : outlines || false;
+    const targetColor = transitionSettings?.color || color;
+    const aspectRatio = 16 / 9;
+    const nbLines = Math.round(Math.sqrt(count / 3 / aspectRatio));
+    const nbColumns = Math.round(aspectRatio * nbLines);
+    const { basePositions, targetPositions, animationProgress, uvs } = useParticlePositions({
+        shapeType,
+        targetShape,
+        count,
+        outlines: outlines || false,
+        targetOutLines,
+        pointsRef,
+    });
+    const { handleColorsAnimation } = useParticlesColors({ color, targetColor });
+    const { currentTexture, prevTexture, loadTexture, textureProgress, handleTextureAnimation } = useParticlesTextures();
+    useEffect(() => {
+        if (texture && texture.trim() !== '') {
+            textureProgress.current = 0;
+            loadTexture(texture);
+        }
+    }, [texture, loadTexture]);
+    const speed = 1 / duration;
+    useFrame((_, delta) => {
+        if (!materialRef.current || !pointsRef.current || !basePositions.current)
+            return;
+        if (meshSettings.visible) {
+            handleShapeAnimation(delta, speed, animationProgress, pointsRef, basePositions, targetPositions);
+            handleColorsAnimation(materialRef, delta, speed);
+        }
+        if (prevTexture.current)
+            materialRef.current.uniforms.uTexture.value = prevTexture.current;
+        if (currentTexture.current)
+            materialRef.current.uniforms.uTargetTexture.value = currentTexture.current;
+        handleTextureAnimation(materialRef, delta, speed);
+    });
+    if (!basePositions.current)
+        return null;
+    return (_jsxs("points", { name: name, ref: pointsRef, position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1], children: [_jsxs("bufferGeometry", { children: [_jsx("bufferAttribute", { attach: "attributes-position", count: basePositions.current.length / 3, array: basePositions.current, itemSize: 3, args: [basePositions.current, 3] }), uvs && (_jsx("bufferAttribute", { attach: "attributes-aUV", count: uvs.length / 2, array: uvs, itemSize: 2, args: [uvs, 2] }))] }), _jsx("shaderEffectsMaterial", { ref: materialRef, uTexture: prevTexture.current || currentTexture.current, uTargetTexture: currentTexture.current, uHasTexture: !!currentTexture.current, uColor: new Color(color || '#ffffff'), uOpacity: opacity, uPointSize: 5.0, uParticleUVScale: 1.0 / Math.max(nbColumns, nbLines), depthTest: true, depthWrite: false, transparent: true })] }));
+};
+export default ParticlesR3f;

package/dist/components/Path.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { CatmullRomCurve3 } from 'three';
+interface PathProps {
+    curve: CatmullRomCurve3;
+    targetCurve: CatmullRomCurve3;
+    duration?: number;
+    color?: string;
+    opacity?: number;
+    tubeRadius?: number;
+}
+declare const Path: React.FC<PathProps>;
+export default Path;
+//# sourceMappingURL=Path.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/components/Path.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAG9C,UAAU,SAAS;IACjB,KAAK,EAAE,gBAAgB,CAAC;IACxB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA2D7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/Path.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+import { useFrame } from '@react-three/fiber';
+const Path = ({ curve, targetCurve, duration = 1, color = '#4c00ff', opacity = 1, tubeRadius = 0.001, }) => {
+    const tubeRef = useRef(null);
+    const targetTubeRef = useRef(null);
+    const meshRef = useRef(null);
+    const animationProgress = useRef(0);
+    const basePositions = useRef(null);
+    const speed = 1 / duration;
+    useEffect(() => {
+        if (tubeRef.current) {
+            basePositions.current = new Float32Array(tubeRef.current.attributes.position.array);
+        }
+        animationProgress.current = 0;
+    }, [curve, targetCurve]);
+    useEffect(() => {
+        return () => {
+            tubeRef.current?.dispose();
+            targetTubeRef.current?.dispose();
+        };
+    }, []);
+    useFrame((_, delta) => {
+        if (!meshRef.current || !tubeRef.current || !targetTubeRef.current || !basePositions.current)
+            return;
+        const progress = Math.min(animationProgress.current + delta * speed, 1);
+        const currentGeom = tubeRef.current;
+        const targetPositions = targetTubeRef.current.attributes.position.array;
+        const currentPosAttr = currentGeom.attributes.position;
+        const length = Math.min(basePositions.current.length, targetPositions.length);
+        for (let i = 0; i < length; i += 3) {
+            currentPosAttr.array[i] = basePositions.current[i] + (targetPositions[i] - basePositions.current[i]) * progress;
+            currentPosAttr.array[i + 1] = basePositions.current[i + 1] + (targetPositions[i + 1] - basePositions.current[i + 1]) * progress;
+            currentPosAttr.array[i + 2] = basePositions.current[i + 2] + (targetPositions[i + 2] - basePositions.current[i + 2]) * progress;
+        }
+        animationProgress.current = progress;
+        currentPosAttr.needsUpdate = true;
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs("mesh", { ref: meshRef, children: [_jsx("tubeGeometry", { ref: tubeRef, args: [curve, 64, tubeRadius, 8, false] }), _jsx("meshBasicMaterial", { color: color, transparent: opacity < 1, opacity: opacity })] }), _jsx("mesh", { position: [0, -1000, 0], children: _jsx("tubeGeometry", { ref: targetTubeRef, args: [targetCurve, 64, tubeRadius, 8, false] }) })] }));
+};
+export default Path;

package/dist/components/PathGeometry.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { PathGeometrySettings, Vector3Array } from '@ntalmagor/3drize-core';
+interface PathGeometryProps {
+    points: Vector3Array[];
+    curve: number;
+    smoothCorners?: number;
+    geometry: PathGeometrySettings;
+}
+declare const PathGeometry: React.FC<PathGeometryProps>;
+export default PathGeometry;
+//# sourceMappingURL=PathGeometry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PathGeometry.d.ts","sourceRoot":"","sources":["../../src/components/PathGeometry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGjF,UAAU,iBAAiB;IACzB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,oBAAoB,CAAC;CAChC;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwJ7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/PathGeometry.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import * as THREE from 'three';
+import { Line } from '@react-three/drei';
+import { smoothPathCorners, createPathSpline } from '@ntalmagor/3drize-core';
+const PathGeometry = ({ points, curve, smoothCorners = 0, geometry, }) => {
+    const { type, width = 2, radius = 0.5, segments = 8, numLanes = 0, color = '#555555', dividerColor = '#ffffff' } = geometry;
+    const smoothedPoints = useMemo(() => smoothPathCorners(points, smoothCorners), [points, smoothCorners]);
+    const spline = useMemo(() => {
+        if (smoothedPoints.length < 2)
+            return null;
+        return createPathSpline(smoothedPoints, curve);
+    }, [smoothedPoints, curve]);
+    const tubeGeometry = useMemo(() => {
+        if (!spline || type !== 'tube')
+            return null;
+        return new THREE.TubeGeometry(spline, points.length * 10, radius, segments, false);
+    }, [spline, type, radius, segments, points.length]);
+    const roadGeometry = useMemo(() => {
+        if (!spline || type !== 'road')
+            return null;
+        const divisions = Math.max(points.length * 20, 100);
+        const vertices = [];
+        const indices = [];
+        const uvs = [];
+        const halfWidth = width / 2;
+        const up = new THREE.Vector3(0, 1, 0);
+        for (let i = 0; i <= divisions; i++) {
+            const t = i / divisions;
+            const point = spline.getPointAt(t);
+            const perp = new THREE.Vector3().crossVectors(spline.getTangentAt(t).normalize(), up).normalize();
+            const left = new THREE.Vector3().copy(point).addScaledVector(perp, -halfWidth);
+            const right = new THREE.Vector3().copy(point).addScaledVector(perp, halfWidth);
+            left.y += 0.01;
+            right.y += 0.01;
+            vertices.push(left.x, left.y, left.z, right.x, right.y, right.z);
+            uvs.push(0, t, 1, t);
+            if (i < divisions) {
+                const b = i * 2;
+                indices.push(b, b + 1, b + 2, b + 1, b + 3, b + 2);
+            }
+        }
+        const geo = new THREE.BufferGeometry();
+        geo.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
+        geo.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
+        geo.setIndex(indices);
+        geo.computeVertexNormals();
+        return geo;
+    }, [spline, type, width, points.length]);
+    const wallsGeometry = useMemo(() => {
+        if (!spline || type !== 'walls')
+            return null;
+        const divisions = Math.max(points.length * 20, 100);
+        const wallHeight = 2;
+        const halfWidth = width / 2;
+        const vertices = [];
+        const indices = [];
+        const uvs = [];
+        const up = new THREE.Vector3(0, 1, 0);
+        for (let i = 0; i <= divisions; i++) {
+            const t = i / divisions;
+            const point = spline.getPointAt(t);
+            const perp = new THREE.Vector3().crossVectors(spline.getTangentAt(t).normalize(), up).normalize();
+            const lb = new THREE.Vector3().copy(point).addScaledVector(perp, -halfWidth);
+            const lt = lb.clone().setY(lb.y + wallHeight);
+            const rb = new THREE.Vector3().copy(point).addScaledVector(perp, halfWidth);
+            const rt = rb.clone().setY(rb.y + wallHeight);
+            vertices.push(lb.x, lb.y, lb.z, lt.x, lt.y, lt.z, rb.x, rb.y, rb.z, rt.x, rt.y, rt.z);
+            uvs.push(0, t, 0, t, 1, t, 1, t);
+            if (i < divisions) {
+                const b = i * 4, n = (i + 1) * 4;
+                indices.push(b, b + 1, n, b + 1, n + 1, n, b + 2, n + 2, b + 3, b + 3, n + 2, n + 3, b + 1, b + 3, n + 1, b + 3, n + 3, n + 1, b, n, b + 2, b + 2, n, n + 2);
+            }
+        }
+        const geo = new THREE.BufferGeometry();
+        geo.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
+        geo.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
+        geo.setIndex(indices);
+        geo.computeVertexNormals();
+        return geo;
+    }, [spline, type, width, points.length]);
+    const laneDividerLines = useMemo(() => {
+        if (!spline || type !== 'road' || numLanes <= 0)
+            return null;
+        const divisions = Math.max(points.length * 20, 100);
+        const laneWidth = width / (numLanes * 2);
+        const offsets = [0];
+        for (let lane = 1; lane < numLanes; lane++) {
+            offsets.push(-lane * laneWidth, lane * laneWidth);
+        }
+        const up = new THREE.Vector3(0, 1, 0);
+        return offsets.map(offset => {
+            const line = [];
+            for (let i = 0; i <= divisions; i++) {
+                const t = i / divisions;
+                const point = spline.getPointAt(t);
+                const perp = new THREE.Vector3().crossVectors(spline.getTangentAt(t).normalize(), up).normalize();
+                const dp = new THREE.Vector3().copy(point).addScaledVector(perp, offset);
+                dp.y += 0.02;
+                line.push([dp.x, dp.y, dp.z]);
+            }
+            return line;
+        });
+    }, [spline, type, width, numLanes, points.length]);
+    if (!spline || type === 'none')
+        return null;
+    return (_jsxs("group", { children: [type === 'tube' && tubeGeometry && (_jsx("mesh", { geometry: tubeGeometry, children: _jsx("meshStandardMaterial", { color: color, side: THREE.DoubleSide }) })), type === 'road' && roadGeometry && (_jsx("mesh", { geometry: roadGeometry, children: _jsx("meshStandardMaterial", { color: color, side: THREE.DoubleSide }) })), type === 'road' && laneDividerLines?.map((line, index) => (_jsx(Line, { points: line, color: dividerColor, lineWidth: 2, dashed: index !== 0, dashSize: 0.5, gapSize: 0.3, raycast: () => null }, `lane-${index}`))), type === 'walls' && wallsGeometry && (_jsx("mesh", { geometry: wallsGeometry, children: _jsx("meshStandardMaterial", { color: color, side: THREE.DoubleSide }) }))] }));
+};
+export default PathGeometry;

package/dist/components/PathRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { PathConfig } from '@ntalmagor/3drize-core';
+export interface PathRendererProps {
+    pathSettings: PathConfig;
+    color?: string;
+    showPoints?: boolean;
+    showLine?: boolean;
+    showCurve?: boolean;
+    pointSize?: number;
+    lineWidth?: number;
+}
+declare const PathRenderer: React.FC<PathRendererProps>;
+export default PathRenderer;
+//# sourceMappingURL=PathRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PathRenderer.d.ts","sourceRoot":"","sources":["../../src/components/PathRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,wBAAwB,CAAC;AAIvE,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,UAAU,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoE7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/PathRenderer.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Sphere, Line } from '@react-three/drei';
+import { smoothPathCorners, createPathSpline, sampleSplinePoints } from '@ntalmagor/3drize-core';
+import PathGeometry from './PathGeometry';
+const PathRenderer = ({ pathSettings, color = '#ffa500', showPoints = true, showLine = true, showCurve = true, pointSize = 0.15, lineWidth = 2, }) => {
+    const points = pathSettings?.points || [];
+    const curve = pathSettings?.curve ?? 1;
+    const smoothCorners = pathSettings?.smoothCorners ?? 0;
+    const geometry = pathSettings?.geometry;
+    const hasCurve = curve > 1;
+    const hasSmoothCorners = smoothCorners > 0;
+    const smoothedPoints = useMemo(() => {
+        if (!hasSmoothCorners || points.length < 3)
+            return points;
+        return smoothPathCorners(points, smoothCorners);
+    }, [points, smoothCorners, hasSmoothCorners]);
+    const curvePoints = useMemo(() => {
+        if (!showCurve || points.length < 2)
+            return null;
+        if (!hasCurve && !hasSmoothCorners)
+            return null;
+        const basePoints = hasSmoothCorners ? smoothedPoints : points;
+        const spline = createPathSpline(basePoints, curve);
+        if (!spline)
+            return null;
+        return sampleSplinePoints(spline, basePoints.length);
+    }, [points, smoothedPoints, curve, smoothCorners, showCurve, hasCurve, hasSmoothCorners]);
+    if (points.length === 0)
+        return null;
+    return (_jsxs("group", { children: [showPoints && points.map((point, index) => (_jsxs("group", { position: point, children: [_jsx(Sphere, { args: [pointSize, 16, 16], children: _jsx("meshStandardMaterial", { color: color, emissive: color, emissiveIntensity: 0.5, toneMapped: false }) }), _jsx(Sphere, { args: [pointSize * 0.33, 8, 8], position: [0, pointSize * 1.67, 0], children: _jsx("meshBasicMaterial", { color: "#ffffff" }) })] }, `path-point-${index}`))), showLine && points.length > 1 && !hasCurve && !hasSmoothCorners && (_jsx(Line, { points: points, color: color, lineWidth: lineWidth, raycast: () => null })), showCurve && curvePoints && curvePoints.length > 1 && (_jsx(Line, { points: curvePoints, color: color, lineWidth: lineWidth, raycast: () => null })), showLine && showCurve && (hasCurve || hasSmoothCorners) && points.length > 1 && (_jsx(Line, { points: points, color: color, lineWidth: 1, dashed: true, dashSize: 0.1, gapSize: 0.1, raycast: () => null })), geometry && geometry.type !== 'none' && points.length >= 2 && (_jsx(PathGeometry, { points: points, curve: curve, smoothCorners: smoothCorners, geometry: geometry }))] }));
+};
+export default PathRenderer;