# Talking Head — WMM Playground Eigenständige Three.js-Website mit einem anatomisch modellierten älteren Frauenkopf, grauem Haar, Augen und Zähnen. Keine WordPress-Abhängigkeit und keine externen CDN-Aufrufe. ## Starten und einbinden Den gesamten Ordner `talkinghead` auf einen Webserver kopieren und `index.html` öffnen. Lokal im Projektverzeichnis: `python3 -m http.server 8765`, dann `/theme/wmm/playground/talkinghead/` aufrufen. ES-Module benötigen HTTP(S); direktes Öffnen als `file://` funktioniert nicht. ```html ``` ## Öffentliche JavaScript-API Die Oberfläche und externe Scripts steuern dieselben nativen glTF Morph Targets: ```js await window.TalkingHead.ready; TalkingHead.setOptions({ autoBlink: false, idleMotion: false, followPointer: false }); TalkingHead.setExpression({ smile: 0.7, jawOpen: 0.2, browUp: 0.15 }); TalkingHead.setBlendshape('blinkLeft', 1); TalkingHead.setBlendshape('blinkRight', 1); TalkingHead.setPose('sad'); // neutral, happy, sad, surprised TalkingHead.lookAt(0.25, -0.1); // x/y jeweils -1 bis 1 TalkingHead.getExpression(); // Zielwerte, kein Snapshot der weichen Interpolation TalkingHead.getBlendshapes(); TalkingHead.getOptions(); TalkingHead.reset(); // neutral, Blickmitte, Munddemo aus; Optionen bleiben erhalten ``` Morph-Werte sind Zahlen von 0 bis 1. Werte ausserhalb dieses Bereichs werden begrenzt; unbekannte Namen und ungültige Werte werden abgewiesen. `setExpression` verändert nur die angegebenen Werte. Mit dem zweiten Argument `{ reset: true }` werden andere Ausdruckswerte zurückgesetzt. Bewegungen werden weich interpoliert. | Morph Target | Wirkung bei Wert 1 | | --- | --- | | `blinkLeft` | Linkes Lid geschlossen | | `blinkRight` | Rechtes Lid geschlossen | | `jawOpen` | Kiefer und Mund geöffnet | | `smile` | Mundwinkel angehoben | | `frown` | Mundwinkel abgesenkt | | `browUp` | Brauen angehoben | | `browDown` | Brauen abgesenkt | Links/rechts bezieht sich auf die Figur. Für ausschliesslich externe Kontrolle alle drei automatischen Optionen deaktivieren und die Munddemo stoppen (`reset()`). Die API ist innerhalb derselben Seite über `window.TalkingHead` zugänglich. Ein anderes Script kann auf `ready` warten. Das zusätzliche Ereignis `talkinghead:ready` wird nach erfolgreichem Laden ausgelöst. Ladefehler lehnen `ready` ab und erscheinen im Porträtbereich. Für ein **gleichursprüngliches** iframe nach dessen `load`-Ereignis: ```js const frame = document.querySelector('iframe'); frame.addEventListener('load', async () => { const head = frame.contentWindow.TalkingHead; await head.ready; head.setOptions({ autoBlink: false, idleMotion: false, followPointer: false }); head.setExpression({ smile: 0.8 }); }); ``` Keine offene `postMessage`-Schnittstelle. Cross-Origin-Zugriff wird durch die Browserregeln verhindert. ## Modell und Quelldateien - `assets/elder_woman.glb`: Kopf mit sieben nativen glTF Morph Targets und Vertex-Farben. - `vendor/`: lokal mitgeliefertes Three.js samt GLTFLoader und MIT-Lizenz. - Bearbeitbare Blender-Datei: `blender/talkinghead/elder_woman.blend` im lokalen Projekt. - Reproduzierbarer Generator: `blender/talkinghead/create_head.py` (Blender 3.5). - Basisgeometrie und Alters-/Ausdrucksformen: MakeHuman-Core-Assets, CC0. Herkunft und Lizenz: `assets/SOURCES.md`. ## Darstellungsgrenzen Das Modell ist anatomisch detaillierter als der ursprüngliche stilisierte Prototyp, erreicht aber keine Scan- oder Filmqualität. Hautfarbe, Poren und Altersmerkmale sind prozedural gestaltet; es gibt keine fotografische Hauttextur. Die Augen werden durch Objektrotation bewegt. Extreme Kombinationen mehrerer Gesichtsausdrücke können sich gegenseitig überlagern. Die Munddemo erzeugt keinen Ton und keine phonetisch genaue Lippensynchronisation. Sie demonstriert die spätere Anbindung an Audio oder Sprachsteuerung. Natürliches Blinzeln und leichte Kopfbewegung sind standardmässig aktiviert und lassen sich über die Schalter oder die API deaktivieren. ## Verfeinerungen vom 27. Oktober 2026 - Zwei Zahnreihen mit länglicheren, leicht unregelmässig gestellten Kronen und kleinen Zwischenräumen. Die oberen mittleren Schneidezähne sind breiter und länger; die untere Reihe folgt dem Kiefer-Blendshape. - Zweilagige Augenbrauen aus kurzen, dichteren Haaren und längeren Deckhaaren. Ihre Morph Targets bleiben erhalten. - `appearance.js` legt eine zusätzliche prozedurale Farbtextur für Altersflecken und Falten über die bestehenden Hautfarben und ergänzt eine Bump-Textur für Poren und feines Relief. Beide Texturen werden lokal im Browser erzeugt; die GLB bleibt die Geometrie-/Materialbasis. - Augenfarbe als Regler mit fünf Stufen, radialer Iristextur, dezentem Aussenring und Speckles. Die Augenfarbe lässt sich auch über JavaScript einstellen und vor dem Laden vormerken: ```js await TalkingHead.ready; TalkingHead.setEyeColor('blue'); TalkingHead.getEyeColor(); // 'blue' ``` Erlaubte Farbnamen: `green`, `blue`, `grey`, `lightBrown`, `darkBrown`. Alternativ sind die ganzzahligen Indizes 0 bis 4 in dieser Reihenfolge möglich. Unbekannte Werte werden abgewiesen. Ausdrucks-Reset behält die ausgewählte Augenfarbe bei. Der kurze Hals ist nach unten verlängert und hat eine geschlossene, ebene Unterseite. Alle vier Experimente verwenden das WMM-Logo mit „Digital Playground“ und der aktuellen Startseitenadresse https://webmultimedia.ch/. Der Talking-Head-Header enthält keine Navigation. ### Hautdetails und Augenweiss Der Regler „Hautdetails“ steuert die Stärke der zusätzlichen Farb- und Bump-Texturen von 0 bis 200 %. Standard sind 130 %, also 30 % mehr als bisher. Die ursprünglichen Hautfarben und die modellierten Falten bleiben die Basis. ```js TalkingHead.setSkinDetail(1.3); // 0 bis 2; Werte werden begrenzt TalkingHead.getSkinDetail(); // 1.3 ``` Die Einstellung ist vor dem Laden vormerkbar und bleibt beim Ausdrucks-Reset erhalten. Augenweiss: dezente prozedurale Äderchen und mattere Oberfläche. Die Brauen sitzen etwas tiefer. Die zusätzliche Halslänge ist auf 5 % der vorherigen Verlängerung gekürzt, mit weiterhin planem, geschlossenem Abschluss. Die Hauttextur enthält zusätzlich Sommersprossen über Nase und Wangen sowie unregelmässige Altersflecken. Die obere Reglerhälfte ist stärker abgestimmt: Bei 200 % wirken Farbe und Relief 40 % kräftiger als in der vorigen Version (effektiver Faktor 2.8 statt 2.0). Blinzeln und Kopfbewegung starten eingeschaltet; manuelle Änderungen gelten bis zum nächsten Laden der Seite.