SchoolXR ist eine Plattform, mit der Lehrkräfte und Schüler:innen interaktive 3D-Modelle mit Annotationen und Aufgaben für den Unterricht erstellen, bearbeiten und nutzen können.
- Modelle hochladen oder aus Bibliothek wählen (glTF/GLB/USDZ)
- Hotspots/Annotationen direkt im Modell platzieren
- Sammlungen von Annotationen speichern und laden
- Rollenbasiertes System: Lehrkraft/Schüler:in
- LTI-Integration (Learning Tools Interoperability, optional)
- Checklisten und Aufgaben für Schüler:innen
- Node.js (empfohlen: v18+)
- MongoDB (lokal oder Cloud, z.B. MongoDB Atlas)
git clone https://github.com/L4223/SchoolXR_Prototype.git
cd SchoolXR
Erstelle eine .env
-Datei im server
-Verzeichnis mit folgendem Inhalt:
MONGODB_URI=deine-mongodb-url
MODE=dev
LTI_KEY=irgendein-geheimer-key
PORT=3001
Erstelle eine .env
-Datei im client
-Verzeichnis mit folgendem Inhalt:
VITE_SKETCHFAB_API_KEY=your_sketchfab_api_key_here
Passe ggf. die MongoDB-URL an.
cd server
npm install
npm run dev
Der Server läuft dann auf http://localhost:3001.
cd ../client
npm install
npm run dev
Das Frontend läuft auf http://localhost:5173.
- Setze
MODE=prod
in der.env
- Richte LTI entsprechend ein (siehe ltijs Doku)
- Starte Backend mit
npm start
(stattnpm run dev
) - Das Frontend muss gebaut werden:
npm run build
imclient
-Ordner
- Wähle deine Rolle: Lehrkraft oder Schüler:in
- Folge dem Onboarding oder starte direkt
- Wähle ein Modell aus der Bibliothek oder lade ein eigenes hoch
- Klicke auf das Modell, um Hotspots zu setzen
- Fülle Titel, Beschreibung und ggf. Aufgabe aus
- Speichere Hotspots als Sammlung (z.B. "Lektion Pflanzen")
- Lade bestehende Sammlungen über das Dropdown
- Überprüfe das Modell und die Hotspots
- Schüler:innen können Aufgaben direkt im Modell bearbeiten
- Checkliste zeigt den Fortschritt
GET /api/annotations/collections/model/:modelId
– Sammlungen für ModellGET /api/annotations/by-collection/:collectionName
– Hotspots einer SammlungPOST /api/annotations/batch
– Hotspots-Sammlung speichern
- Modelle werden nicht angezeigt?
Prüfe Dateiformate und Pfade. - Hotspots erscheinen nicht?
Stelle sicher, dass sie als Children von<model-viewer>
gerendert werden. - Keine Verbindung zur Datenbank?
PrüfeMONGODB_URI
und dass MongoDB läuft.
MIT License
Viel Spaß beim Ausprobieren!