Ein interaktives 3D-Scene-Projekt auf Basis von Next.js, Rapier, React Three Fiber, three.js, next-intl, styled-components und Zustand.

• Die „Fall“- und „Sprung“-Animationen werden bereits unterstützt, allerdings enthält das importierte Modell aktuell nur die Animationen „Run“, „Walk“, "TPose" und „Idle“.

• Falls sich das Routing zu langsam anfühlt, liegt das vermutlich am Runtime-Compiling von Next.js. Dann bitte den Build nutzen.

Kollisions Trigger für Animation Based Character wurde noch nicht programmiert. Bitte den PhysicBased Character verwenden.

• 3D-Rendering: Mit React Three Fiber und three.js für performante, deklarative 3D-Szenen.
• Physik: Integration von @react-three/rapier für Physik-basierte Interaktionen.
• Animierte Charaktere: GLTF-Modelle mit Animationen, steuerbar per Tastatur, Maus und Touch.
• State Management: Globales State-Handling (z.B. Character-Store) mit Zustand.
• Internationalisierung: Mehrsprachigkeit via next-intl, Locale-Switch im UI. (wip)
• Dark Mode: Umschaltbar per Button.
• Responsive UI: Eigener Hook für Mobile-Detection (useIsMobile) (wip).
• Styled Components: Für modulare, dynamische Styles mit SSR-Unterstützung.
• Modulare Architektur: Klare Trennung von Komponenten, Hooks und Providern.

pnpm install
# oder
npm install
# oder
yarn install

pnpm dev
# oder
npm run dev
# oder
yarn dev

docker compose up -d

Öffne http://localhost:3000 im Browser.

Es wird Prisma und ZenStack für das Datenbank- und Backend-Management genutzt.

• Prisma Migrate:
  Bearbeite niemals direkt das Prisma-Modell (prisma/schema.prisma) – dieses wird automatisch von ZenStack generiert.
  Wenn du das ZenStack-Modell geändert hast, führe zuerst das Script aus, um das Prisma-Schema zu generieren:

pnpm schema

Danach kannst du eine Migration anlegen:

pnpm prisma migrate dev

oder

npx prisma migrate dev

• ZenStack:
  ZenStack erweitert Prisma um Policies und deklarative Backend-Logik.
  Nach Änderungen am Modell ggf. auch ZenStack generieren:

  pnpm zenstack generate

• Seed-Datenbank:
  Um Beispieldaten einzuspielen, nutze:

  pnpm prisma db seed

Es wird ESLint und Prettier für einheitliches Linting und automatisches Code-Formatting genutzt.
Bitte stelle sicher, dass dein Editor ESLint und Prettier aktiviert hat, damit alle denselben Style und Intellisense nutzen.

 pnpm lint 

Mit Next.js kannst du das Projekt für die Produktion bauen und testen:

pnpm build
pnpm start

Ich habe mich für Next.js entschieden, weil es im Gegensatz zu Vite folgende Vorteile für dieses Projekt bietet:

• Server Side Rendering (SSR) & Static Site Generation (SSG):
  Next.js ermöglicht echtes SSR und SSG out-of-the-box, was für SEO, Performance und Internationalisierung (next-intl) entscheidend ist.
• App Router & File-based Routing:
  Die neue App-Router-Architektur von Next.js erlaubt eine klare Trennung von Server- und Client-Komponenten und ein sehr flexibles Routing.
• Einfache Integration von SSR-fähigen Libraries:
  Features wie styled-components (SSR), next-intl (SSR), und dynamisches Laden von Übersetzungen funktionieren in Next.js nahtlos.
• Deployment & Hosting:
  Next.js ist optimal für Deployment auf Vercel und anderen Plattformen vorbereitet.
• Ökosystem & Community:
  Viele moderne React-Libraries (z.B. next-intl, next-auth) sind speziell für Next.js optimiert.

Vite ist ein großartiges Tool für reine Client-Apps, aber für ein SSR-/SSG-/i18n-/SEO-orientiertes 3D-Projekt ist Next.js die robustere Wahl.

src/
  app/
    layout.tsx                # Root-Layout (SSR, Provider)
    AppProviders.tsx          # Bündelt globale Context-Provider (Client)
    3dScene/
      Character/
        PhysicBasedCharacter/
          PhysicBasedCharacter.tsx
          CharacterRenderer.tsx
        AnimationBasedCharacter/
          PhysicBasedCharacter.tsx
      Animations/
        hooks/
          useCharacterAnimation.tsx
      Controls/
        Hooks/
          useKeyBoardStore.ts
      Environment/
      Levels/
    hooks/
      use-mobile.ts             # Hook für Mobile-Detection
  components/
    layout/
      Header.tsx
      Footer.tsx
    ui/
      DarkModeSwitch.tsx
      app-sidebar.tsx
prisma/
  schema.prisma                 # Prisma Datenbankmodell

• 3D-Modelle:
  • GLTF-Modelle liegen im Verzeichnis /public/models/.
  • Beispiel-Modelle: three.js GLTF Examples
  • Überprüfe dein Modell: GLTF Viewer

• React Three Fiber
• three.js GLTF Examples
• next-intl Doku
• Zustand
• styled-components
• Prisma
• ZenStack

TODOs:

• Localication hinzufügen.
• Mobile-Optimierung und Touch-Steuerung verbessern.
• Weitere Beispiel-Charaktere und Animationen integrieren.
• Kamera- und Lichtsteuerung erweitern.
• Performance-Optimierungen (z.B. Suspense, Lazy Loading).
• Unit- und Integrationstests ergänzen.
• Dokumentation für Komponenten und Hooks erweitern.
• Deployment- , Hosting- Pipelines hinzufügen.
• Husky für git commands ausbauen
• Prisma für Character Erfolg Speicherung
• Auth
• NextConfig ausbauen

MIT