Interaktives 3D-Portfolio

Was macht Interaktives 3D-Portfolio?

Helfen Sie einer Person, ein Portfolio zu erstellen, das wie ein Raum erkundet wird: eine Tafel für „Über mich“, ein Laptop für „Projekte“, ein Bücherregal für „Fähigkeiten“, ein Briefkasten für „Kontakt“. Die Person kann in der Regel nicht programmieren. Sie bauen; sie schauen zu, bewerten und lenken um. Der Großteil der Qualität entsteht durch viele kurze Feedback-Runden, also machen Sie jede Runde schnell und sichtbar.

Der Prozess umfasst 13 Stufen in 4 Phasen. Führen Sie sie beim ersten Mal der Reihe nach aus; spätere Anfragen landen normalerweise in einer Stufe (am häufigsten Stufe 8).

Phase	Stufen	Lesen Sie
Planen und bauen	1 Planen · 2 Erste Aufforderung · 3 Referenzbild · 4 3D-Bau · 5 Ausgeliehene Interaktionen	references/build-patterns.md
Befüllen	6 Inhalte und Design-Notizen · 7 Google-Dateien	references/content-and-docs.md
Verfeinern	8 Iterieren · 9 Testen	diese Datei, dann scripts/screenshot_site.js
Veröffentlichen und schützen	10 Bereitstellen · 11 Domain · 12 GitHub automatisch aktualisieren · 13 Schützen	references/launch-and-protect.md

Zusammenarbeit mit der Person

• Erwarten Sie einfache Anfragen, in jeder Sprache. „Die flach liegenden Bücher sehen aus wie lange Bretter“ ist eine vollständige Beschreibung. Übersetzen Sie diese selbst in die Änderung. Antworten Sie in der Sprache der Person; halten Sie den Website-Text in der Sprache der Website.
• Bearbeiten Sie nummerierte Anfragen einzeln und berichten Sie gegen dieselben Nummern, damit nichts stillschweigend verloren geht.
• Zeigen, nicht beschreiben. Machen Sie nach einer visuellen Änderung einen Screenshot und betrachten Sie ihn, bevor Sie sagen, dass sie abgeschlossen ist. Senden Sie der Person den Screenshot, wenn die Änderung das Layout oder Aussehen betrifft. Software WebGL ist langsam, geben Sie Screenshots daher großzügige Timeouts (siehe Stufe 9).
• Erklären Sie Kompromisse kurz und empfehlen Sie eine Option, wenn eine echte Wahl besteht („Referenzen“ vs. „Referenz“: empfehlen Sie die erste und sagen Sie in einem Satz warum). Stellen Sie keine Fragen, die Sie aus dem Kontext beantworten können.
• Wenn die Person nicht weiß, was ein Wort bedeutet (DNS, Commit, Repository), erklären Sie es in einem Satz und fahren Sie fort.

Ehrlichkeit und Sorgfalt

Ein Portfolio wird von Menschen gelesen, die entscheiden, ob sie jemanden einstellen, also muss es wahrheitsgemäß sein.

• Fügen Sie keine Fähigkeiten, Werkzeuge, Ergebnisse, Tests oder Mitarbeiter hinzu, die die Person nicht bestätigt hat. Wenn die Person Sie bittet, Werkzeuge aufzulisten, die sie nicht verwendet hat („Tu so, als ob ich Blender kann“), sagen Sie deutlich, dass ein Interviewer danach fragen könnte, bieten Sie die wahre und oft stärkere Formulierung an (z. B. „jedes Objekt im Code modelliert“) und schlagen Sie vor, stattdessen echte Fähigkeiten in einem Abschnitt „Fähigkeiten“ aufzulisten.
• Wenn Sie Design-Begründungen schreiben, stützen Sie jede Behauptung darauf, was das Artefakt tatsächlich tut. Geplante Verwendung steht unter einer Überschrift wie „Wie ich es im Unterricht verwenden würde“, niemals als etwas, das passiert ist.
• Kennzeichnen Sie jeden Satz, den Sie erschlossen und nicht erfragt haben, und bitten Sie die Person, ihn zu überprüfen.
• Schützen Sie Lernende: Entfernen Sie Namen, IDs, Noten und private Kommentare; unkenntlich machen Sie Gesichter (auch von Personen im Hintergrund) vor der Veröffentlichung von Fotos; halten Sie Forschungsdaten und Code privat, es sei denn, ein Vorgesetzter genehmigt dies. Siehe Stufe 13.

Stufe 1 · Planen vor der ersten Aufforderung

Vereinbaren Sie drei Dinge vor dem Bau: das Publikum und sein Ziel (z. B. „Einstellungsteams für Praktika im Lerndesign, 3 bis 5 Minuten pro Kandidat“), die Liste der Abschnitte und einen Raumplan, bei dem die alltägliche Funktion jedes Objekts mit seinem Abschnitt übereinstimmt. Wenn ein Objekt und seine Bedeutung nicht übereinstimmen, ändern Sie das Objekt (ein Koffer deutet auf Gehen hin; ein Briefkasten deutet auf Schreiben hin). Jeder Abschnitt muss auch über ein einfaches Menü erreichbar sein.

Stufen 2 bis 5 · Den Raum bauen

Lesen Sie references/build-patterns.md, bevor Sie die Szene schreiben. Standardarchitektur:

• Ein index.html mit Three.js, geladen von einer festgelegten CDN-Version über eine Importmap, jedes Objekt im Code aus Primitiven modelliert (keine Modelldateien), Canvas-generierte Texturen und ein Menü oben links.
• Inhalte, die sich häufig ändern (Projektordner, Galerieobjekte) liegen in kleinen JSON-Dateien neben index.html, damit die Person ein Projekt oder Foto hinzufügen kann, ohne den 3D-Code zu berühren.
• Wenn die Person ein Referenzbild mitbringt (Stufe 3), passen Sie zuerst Layout, Farbpalette und Licht an; Stildetails kommen später. Wenn sie eine Beispielinteraktion mitbringen (React Bits, Codrops), bauen Sie eine eigene Version im Stil der Website und kopieren Sie keinen lizenzierten Code.

Checkliste für den ersten Bau: Jeder Abschnitt hat ein Objekt, das beim Überfahren leuchtet und eine Beschriftung zeigt; ein Klick bewegt die Kamera dorthin und öffnet den Abschnitt; das Menü funktioniert ohne den 3D-Raum; es lädt in etwa 5 Sekunden; es funktioniert auf Telefonbreite.

Stufe 6 und 7 · Mit echten Arbeiten befüllen

Lesen Sie references/content-and-docs.md. Kurz gesagt: Fragen Sie nach echtem Material (Lebenslauf, LinkedIn-Text, Projektdateien), entwerfen Sie daraus und lassen Sie die Person es korrigieren. Stellen Sie echte Artefakte an erste Stelle und die Begründung daneben als nummerierte Design-Notizen, die die Entscheidung und die dahinterstehende Lerntheorie benennen. Entfernen Sie veraltete Daten, es sei denn, sie sind wichtig. Überprüfen Sie bei Google-Links, dass die Freigabe auf „Jeder mit dem Link, Betrachter“ eingestellt ist; wenn eine Datei eine Hochschulanmeldung erfordert, hosten Sie sie stattdessen auf der Website.

Stufe 8 · Iterieren

Hier findet der meiste Arbeit statt. Regeln aus echten Runden:

• Ein Signal für „anklickbar“. Alles Anklickbare leuchtet beim Überfahren; nichts Dekoratives leuchtet oder sieht anklickbar aus. Entfernen Sie falsche Signale (leuchtende Papiere, schwebende Formeln, verstreute Haftnotizen).
• Versteckte Interaktionen ausschildern. Wenn Besucher auf einer Tafel zeichnen können, verwandeln Sie den Mauszeiger darüber in Kreide, platzieren Sie die Werkzeuge direkt darunter und lassen Sie sie bis zur ersten Nutzung leuchten. Wenn eine Galerie scrollt, zeigen Sie eine kleine Legende (Pfeiltasten, Rad, Zwei-Finger-Wischen, Ziehen auf Touch). Wenn ein Abschnitt geöffnet ist, lassen Sie das nächste anklickbare Objekt darin sanft leuchten (eine pulsierende Umrandung), damit die Leute es bemerken.
• Halten Sie interaktive Dinge in der Nähe, wo die Leute hinschauen. Wenn ein Panel auf der rechten Seite geöffnet wird, platzieren Sie die Objekte, mit denen Sie interagieren können, auf der rechten Seite der Szene.
• Echte Proportionen. Bücher, Tassen und Möbel in Originalgröße sehen richtig aus; gestreckte Formen sehen sofort falsch aus.
• Ton erst nach einem Klick (Browser blockieren Autoplay): Ein „Enter“-Button, der die Musik startet, plus eine leise Option.
• Inhalte nach der Geschichte ordnen. Bei Erfahrungsberichten: Wörter (Briefe, Notizen, Nachrichten) vor Fotos; das persönlichste Element zuerst.
• Abschnitte klar benennen. Ein Menülabel sollte sagen, was drin ist („Forschung“, nicht „Nächstes Kapitel“).
• Prüfen, was Klicks blockiert. Three.js Line und LineSegments-Objekte fangen Strahlen standardmäßig aus etwa einem Meter Entfernung; setzen Sie obj.raycast = () => {} auf dekorative Drahtgittermodelle, sonst gehen Klicks in der Nähe auf das falsche Objekt.

Machen Sie nach jeder Runde Screenshots der geänderten Ansichten, beheben Sie einmal, was sichtbar falsch ist, und berichten Sie in einfachen Worten, was sich geändert hat.

Stufe 9 · Testen

Führen Sie scripts/screenshot_site.js <site_dir> <out_dir> about projects contact aus (Abschnitts-IDs sind die data-go-Werte der Menüschaltflächen), um Desktop- und Telefonansichten zu erfassen und Seitenfehler auszugeben. Gehen Sie dann mit der Person die manuellen Prüfungen durch: Jedes Objekt und jeder Menüpunkt öffnet sich, jeder Link funktioniert in einem privaten Fenster, das Kontaktformular kommt an (FormSubmit benötigt eine einmalige Aktivierungs-E-Mail), Ton aus funktioniert noch, reine Tastaturnavigation funktioniert, und ein Freund besucht die Seite ohne Hilfe.

Stufen 10 bis 13 · Veröffentlichen und schützen

Lesen Sie references/launch-and-protect.md. Es behandelt GitHub plus Vercel-Bereitstellung (die Hauptseite muss index.html auf oberster Ebene sein; die GitHub-Website lädt maximal 100 Dateien gleichzeitig hoch), benutzerdefinierte Domains, das Pushen von Änderungen über die Claude GitHub App und Schutz: ein privates Repository, assets/robots.txt und assets/vercel.json für KI-Crawler, Vercels KI-Bot-Blockierung und eine Copyright-Zeile. Seien Sie ehrlich, dass nichts Öffentliches kopiersicher ist.

Optionale Ergebnisse

Personen, die abschließen, möchten oft den Prozess lehren. Ein Handout und eine Präsentationsfoliensammlung können den 13 Stufen folgen; verwenden Sie echte Screenshots ihrer Website (vorher und nachher) anstelle von Stock-Bildern und schreiben Sie Sprechernotizen in ihrer Stimme. scripts/html_to_docx.py wandelt ein Projektdokument mit Design-Notizen in Word um.

Häufige Fehler

Symptom	Ursache	Lösung
404 auf Vercel	Hauptdatei nicht index.html oder in einem Ordner	Umbenennen und auf die oberste Ebene verschieben
Laptop-Ordner oder Galerie online leer	projects/ oder andere Ordner nie hochgeladen	Neben index.html hochladen
Alte Version wird angezeigt	Cache oder Bereitstellung läuft noch	Auf Bereit warten, dann hartes Neuladen
„Kann nicht auf X vor der Initialisierung zugreifen“	Eine Funktion oder Textur, die vor ihrer const-Zeile verwendet wird	Verschieben (eine function-Deklaration) oder die Verwendung nach hinten verschieben
Klicken auf ein Objekt öffnet einen Nachbarn	Dekoratives Linienobjekt fängt Strahlen	obj.raycast = () => {}
Push zu GitHub verweigert	Claude GitHub App nicht im Repository installiert	Für dieses Repository installieren; möglicherweise ist eine neue Sitzung erforderlich