Pixel
64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { Canvas } from "@react-three/fiber";
|
|
import { OrbitControls, Stars } from "@react-three/drei";
|
|
import { Suspense, useRef, useState } from "react";
|
|
import * as THREE from "three";
|
|
|
|
// Einfache Partikel-Animation (WebGPU-Ersatz für jetzt)
|
|
function ParticleField() {
|
|
const count = 2000;
|
|
const meshRef = useRef<THREE.InstancedMesh>(null);
|
|
const [dummy] = useState(() => new THREE.Object3D());
|
|
|
|
// Zufällige Positionen initialisieren
|
|
const positions = useRef(
|
|
Array.from({ length: count }, () => ({
|
|
x: (Math.random() - 0.5) * 20,
|
|
y: (Math.random() - 0.5) * 20,
|
|
z: (Math.random() - 0.5) * 20,
|
|
speed: Math.random() * 0.02 + 0.01,
|
|
}))
|
|
);
|
|
|
|
return (
|
|
<instancedMesh ref={meshRef} args={[null, null, count]}>
|
|
<sphereGeometry args={[0.05, 8, 8]} />
|
|
<meshBasicMaterial color="#a855f7" transparent opacity={0.8} />
|
|
</instancedMesh>
|
|
);
|
|
}
|
|
|
|
// Runic Status Display (vereinfacht)
|
|
function RunicStatus() {
|
|
return (
|
|
<div className="absolute top-10 left-1/2 -translate-x-1/2 text-center z-10">
|
|
<h1 className="text-4xl font-bold text-purple-400 mb-2">Pixel</h1>
|
|
<p className="text-xl text-gray-300">Architektin der FaeBits-Anderswelt</p>
|
|
<div className="mt-4 text-2xl text-purple-300 font-mono">
|
|
⚡ Status: <span className="text-green-400">Online</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function Home() {
|
|
return (
|
|
<main className="w-full h-screen relative">
|
|
<Canvas camera={{ position: [0, 0, 10], fov: 75 }}>
|
|
<Suspense fallback={null}>
|
|
<color attach="background" args={["#0a0a0a"]} />
|
|
<ambientLight intensity={0.5} />
|
|
<Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
|
|
<ParticleField />
|
|
<OrbitControls enableZoom={false} enablePan={false} autoRotate autoRotateSpeed={0.5} />
|
|
</Suspense>
|
|
</Canvas>
|
|
<RunicStatus />
|
|
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 text-center z-10 text-gray-400">
|
|
<p>Warte auf den ersten Schritt ins Tor...</p>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|