first commit

2025-06-10 15:28:23 +05:30
commit e22a2dc275
699 changed files with 100382 additions and 0 deletions
--- a/app/src/modules/scene/clouds/clouds.tsx
+++ b/app/src/modules/scene/clouds/clouds.tsx
@@ -0,0 +1,90 @@
+import * as THREE from 'three';
+import { useRef, useState } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { Clouds, Cloud } from '@react-three/drei';
+
+interface CloudGroupProps {
+    initialX: number;
+    initialZ: number;
+    speed: number;
+    height: number;
+}
+
+function CloudGroup({ initialX, initialZ, speed, height }: CloudGroupProps) {
+    const group = useRef<THREE.Group>(null);
+
+    useFrame((_, delta) => {
+        if (group.current) {
+
+            group.current.position.x += delta * speed;
+            group.current.position.z += delta * speed * 0.5;
+
+            if (group.current.position.x > 500) group.current.position.x = -500;
+            if (group.current.position.z > 500) group.current.position.z = -500;
+        }
+    });
+
+    return (
+        <group ref={group} position={[initialX, height, initialZ]}>
+            <Clouds material={THREE.MeshBasicMaterial} frustumCulled={false} limit={10000}>
+                <Cloud
+                    seed={Math.random() * 100}
+                    bounds={[100, 15, 100]}
+                    volume={50}
+                    color="#eeeeee"
+                    scale={4}
+                    fade={10000}
+                />
+                <Cloud
+                    seed={Math.random() * 100}
+                    bounds={[100, 15, 100]}
+                    volume={50}
+                    scale={6}
+                    color="#ffffff"
+                    fade={10000}
+                />
+                <Cloud
+                    seed={Math.random() * 100}
+                    bounds={[100, 15, 100]}
+                    volume={50}
+                    scale={4}
+                    fade={10000}
+                    color="#f0f0f0"
+                />
+            </Clouds>
+        </group>
+    );
+}
+
+export function MovingClouds() {
+
+    const savedTheme: string | null = localStorage.getItem("theme");
+    const [theme, setTheme] = useState(savedTheme || "light");
+    const cloudGroups = [
+        { initialX: 0, initialZ: 0, speed: 8, height: 300 },
+        { initialX: -300, initialZ: 100, speed: 10, height: 300 },
+        { initialX: 200, initialZ: -150, speed: 4, height: 300 },
+        { initialX: -400, initialZ: -200, speed: 7, height: 300 },
+        { initialX: 400, initialZ: 300, speed: 5, height: 300 },
+        { initialX: -200, initialZ: -300, speed: 7, height: 300 },
+        { initialX: 300, initialZ: 200, speed: 10, height: 300 },
+    ];
+
+    return (
+        <>
+            {theme === 'light' &&
+                <>
+                    {cloudGroups.map((group, index) => (
+                        <CloudGroup
+                            key={index}
+                            initialX={group.initialX}
+                            initialZ={group.initialZ}
+                            speed={group.speed}
+                            height={group.height}
+                        />
+                    ))}
+                </>
+            }
+        </>
+    );
+}