Initial Commit
Commit pertama, memindahkan repository dari github ke gitea.
This commit is contained in:
dicky arya pratama committed
commit
13a47fbebf
41 files changed
+12327
No files matched your search
@@ -0,0 +1,252 @@
|
||||
"use client";
|
||||
|
||||
import React, { useMemo, useRef } from "react";
|
||||
import { Canvas, useFrame } from "@react-three/fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
// 1. Refined, clean Starfield (neat, elegant points of light)
|
||||
function StarField({ count = 650 }: { count?: number }) {
|
||||
const pointsRef = useRef<THREE.Points>(null!);
|
||||
|
||||
const [positions, colors] = useMemo(() => {
|
||||
const pos = new Float32Array(count * 3);
|
||||
const col = new Float32Array(count * 3);
|
||||
|
||||
const colorWhite = new THREE.Color("#ffffff");
|
||||
const colorIcy = new THREE.Color("#93c5fd");
|
||||
const colorSilver = new THREE.Color("#e2e8f0");
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const radius = 30 + Math.random() * 80;
|
||||
const theta = Math.random() * 2 * Math.PI;
|
||||
const phi = Math.acos(2 * Math.random() - 1);
|
||||
|
||||
pos[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
|
||||
pos[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
|
||||
pos[i * 3 + 2] = radius * Math.cos(phi);
|
||||
|
||||
const r = Math.random();
|
||||
const chosen = r > 0.7 ? colorIcy : r > 0.3 ? colorSilver : colorWhite;
|
||||
|
||||
col[i * 3] = chosen.r;
|
||||
col[i * 3 + 1] = chosen.g;
|
||||
col[i * 3 + 2] = chosen.b;
|
||||
}
|
||||
|
||||
return [pos, col];
|
||||
}, [count]);
|
||||
|
||||
useFrame((state, delta) => {
|
||||
if (!pointsRef.current) return;
|
||||
pointsRef.current.rotation.y += delta * 0.005;
|
||||
pointsRef.current.rotation.x += delta * 0.002;
|
||||
|
||||
const targetX = (state.pointer.x * Math.PI) / 60;
|
||||
const targetY = (state.pointer.y * Math.PI) / 60;
|
||||
pointsRef.current.rotation.y += (targetX - pointsRef.current.rotation.y) * 0.02;
|
||||
pointsRef.current.rotation.x += (-targetY - pointsRef.current.rotation.x) * 0.02;
|
||||
});
|
||||
|
||||
return (
|
||||
<points ref={pointsRef}>
|
||||
<bufferGeometry>
|
||||
<bufferAttribute attach="attributes-position" args={[positions, 3]} />
|
||||
<bufferAttribute attach="attributes-color" args={[colors, 3]} />
|
||||
</bufferGeometry>
|
||||
<pointsMaterial
|
||||
size={0.7}
|
||||
vertexColors
|
||||
transparent
|
||||
opacity={0.8}
|
||||
sizeAttenuation
|
||||
depthWrite={false}
|
||||
blending={THREE.AdditiveBlending}
|
||||
/>
|
||||
</points>
|
||||
);
|
||||
}
|
||||
|
||||
// 2. Bright, Glowing Background Planet (Astraea - Upper Right)
|
||||
function BackgroundPlanetAstraea() {
|
||||
const groupRef = useRef<THREE.Group>(null!);
|
||||
const planetRef = useRef<THREE.Mesh>(null!);
|
||||
const atmosphereRef = useRef<THREE.Mesh>(null!);
|
||||
|
||||
useFrame((state, delta) => {
|
||||
if (planetRef.current) {
|
||||
planetRef.current.rotation.y += delta * 0.05;
|
||||
}
|
||||
if (atmosphereRef.current) {
|
||||
atmosphereRef.current.rotation.y -= delta * 0.03;
|
||||
}
|
||||
if (groupRef.current) {
|
||||
// Subtle floating parallax
|
||||
const targetX = 16 + (state.pointer.x * 2.5);
|
||||
const targetY = 9 + (state.pointer.y * 2.0);
|
||||
groupRef.current.position.x += (targetX - groupRef.current.position.x) * 0.02;
|
||||
groupRef.current.position.y += (targetY - groupRef.current.position.y) * 0.02;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<group ref={groupRef} position={[16, 9, -16]}>
|
||||
{/* Bright Planet Core Sphere */}
|
||||
<mesh ref={planetRef}>
|
||||
<sphereGeometry args={[4.2, 48, 48]} />
|
||||
<meshStandardMaterial
|
||||
color="#38bdf8"
|
||||
emissive="#0284c7"
|
||||
emissiveIntensity={0.85}
|
||||
roughness={0.25}
|
||||
metalness={0.7}
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
{/* Radiant Atmospheric Halo Rim */}
|
||||
<mesh ref={atmosphereRef}>
|
||||
<sphereGeometry args={[4.6, 32, 32]} />
|
||||
<meshBasicMaterial
|
||||
color="#7dd3fc"
|
||||
transparent
|
||||
opacity={0.35}
|
||||
side={THREE.BackSide}
|
||||
blending={THREE.AdditiveBlending}
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
{/* Outer Luminous Glow Aura Ring */}
|
||||
<mesh rotation={[Math.PI / 3, 0.4, 0]}>
|
||||
<ringGeometry args={[4.8, 6.8, 48]} />
|
||||
<meshBasicMaterial
|
||||
color="#38bdf8"
|
||||
transparent
|
||||
opacity={0.22}
|
||||
side={THREE.DoubleSide}
|
||||
/>
|
||||
</mesh>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
// 3. Bright, Glowing Background Planet (Kore - Lower Left with Ring)
|
||||
function BackgroundPlanetKore() {
|
||||
const groupRef = useRef<THREE.Group>(null!);
|
||||
const planetRef = useRef<THREE.Mesh>(null!);
|
||||
const ringRef = useRef<THREE.Mesh>(null!);
|
||||
|
||||
useFrame((state, delta) => {
|
||||
if (planetRef.current) {
|
||||
planetRef.current.rotation.y += delta * 0.04;
|
||||
}
|
||||
if (ringRef.current) {
|
||||
ringRef.current.rotation.z += delta * 0.02;
|
||||
}
|
||||
if (groupRef.current) {
|
||||
// Gentle floating parallax
|
||||
const targetX = -18 - (state.pointer.x * 3.0);
|
||||
const targetY = -12 - (state.pointer.y * 2.5);
|
||||
groupRef.current.position.x += (targetX - groupRef.current.position.x) * 0.02;
|
||||
groupRef.current.position.y += (targetY - groupRef.current.position.y) * 0.02;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<group ref={groupRef} position={[-18, -12, -22]}>
|
||||
{/* Bright Violet Core Planet */}
|
||||
<mesh ref={planetRef}>
|
||||
<sphereGeometry args={[5.5, 48, 48]} />
|
||||
<meshStandardMaterial
|
||||
color="#a855f7"
|
||||
emissive="#6366f1"
|
||||
emissiveIntensity={0.75}
|
||||
roughness={0.3}
|
||||
metalness={0.8}
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
{/* Atmospheric Halo */}
|
||||
<mesh>
|
||||
<sphereGeometry args={[5.9, 32, 32]} />
|
||||
<meshBasicMaterial
|
||||
color="#c084fc"
|
||||
transparent
|
||||
opacity={0.3}
|
||||
side={THREE.BackSide}
|
||||
blending={THREE.AdditiveBlending}
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
{/* Luminous Majestic Planetary Ring */}
|
||||
<mesh ref={ringRef} rotation={[Math.PI / 2.3, 0.35, 0]}>
|
||||
<ringGeometry args={[6.8, 10.2, 64]} />
|
||||
<meshStandardMaterial
|
||||
color="#c084fc"
|
||||
emissive="#a855f7"
|
||||
emissiveIntensity={0.6}
|
||||
transparent
|
||||
opacity={0.45}
|
||||
side={THREE.DoubleSide}
|
||||
/>
|
||||
</mesh>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
// 4. Distant Luminous Stellar Moon Orb
|
||||
function DistantLuminousOrb() {
|
||||
const orbRef = useRef<THREE.Mesh>(null!);
|
||||
|
||||
useFrame((state, delta) => {
|
||||
if (!orbRef.current) return;
|
||||
const t = state.clock.getElapsedTime();
|
||||
orbRef.current.position.y = 14 + Math.sin(t * 0.8) * 0.6;
|
||||
orbRef.current.position.x = -8 + Math.cos(t * 0.5) * 0.8;
|
||||
});
|
||||
|
||||
return (
|
||||
<mesh ref={orbRef} position={[-8, 14, -18]}>
|
||||
<sphereGeometry args={[1.2, 24, 24]} />
|
||||
<meshStandardMaterial
|
||||
color="#34d399"
|
||||
emissive="#10b981"
|
||||
emissiveIntensity={1.2}
|
||||
roughness={0.1}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CosmicGalaxy() {
|
||||
return (
|
||||
<div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
|
||||
<Canvas
|
||||
camera={{ position: [0, 0, 32], fov: 50 }}
|
||||
dpr={[1, 1.5]}
|
||||
gl={{ antialias: true, alpha: true, powerPreference: "high-performance" }}
|
||||
className="w-full h-full"
|
||||
>
|
||||
<color attach="background" args={["#0a0a12"]} />
|
||||
|
||||
{/* Cinematic Starlight Illumination */}
|
||||
<ambientLight intensity={0.5} />
|
||||
<directionalLight position={[20, 20, 10]} intensity={1.8} color="#e0f2fe" />
|
||||
<directionalLight position={[-20, -15, -5]} intensity={1.0} color="#c084fc" />
|
||||
|
||||
{/* Clean, Neat Starfield */}
|
||||
<StarField count={650} />
|
||||
|
||||
{/* Bright Circular Planet-Like Objects in the Background */}
|
||||
<BackgroundPlanetAstraea />
|
||||
<BackgroundPlanetKore />
|
||||
<DistantLuminousOrb />
|
||||
</Canvas>
|
||||
|
||||
{/* Atmospheric depth vignettes (subtle gradient, no harsh boxes) */}
|
||||
<div className="absolute inset-0 bg-radial from-transparent via-[#0a0a12]/30 to-[#0a0a12] pointer-events-none" />
|
||||
|
||||
{/* Soft circular glowing light fountains behind the planets */}
|
||||
<div className="absolute -top-10 right-10 w-96 h-96 bg-cyan-500/10 rounded-full blur-[100px] pointer-events-none" />
|
||||
<div className="absolute -bottom-10 left-10 w-[450px] h-[450px] bg-purple-600/10 rounded-full blur-[120px] pointer-events-none" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user