feat: add Next.js base structure from existing project

2026-04-11 20:22:01 +02:00
parent 80d96cff75
commit f0359804d4
9 changed files with 265 additions and 0 deletions
@@ -0,0 +1,55 @@
+"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={[undefined, undefined, count]}>
+      <sphereGeometry args={[0.05, 8, 8]} />
+      <meshBasicMaterial color="#a855f7" transparent opacity={0.8} />
+    </instancedMesh>
+  );
+}
+
+import Gate from './components/Gate';
+
+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} />
+          <OrbitControls enableZoom={false} enablePan={false} autoRotate autoRotateSpeed={0.5} />
+        </Suspense>
+      </Canvas>
+      <div className="absolute inset-0 z-10 flex flex-col items-center justify-center">
+        <Gate />
+        <div className="absolute bottom-10 flex space-x-8 text-gray-400 font-mono">
+          <a href="https://faebits.com" target="_blank" rel="noopener noreferrer" className="hover:text-purple-400 transition-colors">2D-Ebene</a>
+          <a href="https://3d.faebits.com" target="_blank" rel="noopener noreferrer" className="hover:text-purple-400 transition-colors">3D-Anderswelt</a>
+          <a href="https://git.faebits.com" target="_blank" rel="noopener noreferrer" className="hover:text-purple-400 transition-colors">Das Archiv</a>
+        </div>
+      </div>
+    </main>
+  );
+}