feat(personal): living-room TV with real video playback in the 3D room

A wall-mounted 4K TV in personal.html plays Linlin's own videos: the
screen is a real <iframe> in a CSS3DRenderer layer behind a depth-only
WebGL hole (colorWrite:false + renderOrder:-1) so occlusion is correct
(the cat can pass in front). 19 shuffled channels (Bilibili + YouTube;
non-embeddable xiaohongshu / WeChat video = type:'ext' -> colour-bar
test-card slate + watch-on-site link). Paper remote: power / channel /
volume (YouTube via postMessage) / brightness (CSS filter) /
watch-on-site, plus arrow keys. Old-set tune transition
(snow -> black -> snow -> picture) + channel OSD; reduced-motion skips
the snow; narrow/portrait viewports auto-pull the camera back to fit.

UPDATES 2026-06-16 V2 + PLAN H3.M5.G2.T6 logged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: jajupmochi

docs/PLAN.md

@@ -461,6 +461,7 @@ writing demonstrate technical communication ability beyond the homepage scroll.
 - `[✓]` H3.M5.G2.T2 — (2026-06-11) v3 per Linlin's 5-point review: indoor **paper home** (dollhouse cutaway; hinged door to a pocket trail world = future-expansion area), sane proportions, multi-part detailed objects, **diegetic interactions** (wall map / door swings open / vinyl spins + notes / album opens + page-flip + lightbox — right sidebar removed), aspect-adaptive full-screen HOME view. Verified: all modes + ESC chain, 0 console errors desktop + mobile.
 - `[✓]` H3.M5.G2.T3 — (2026-06-11) Entrance opened: navbar **Personal** → `personal.html` directly on both index files; the temporary coming-soon teaser (markup + `.ptz-*` CSS + `showPersonalTeaser` JS) removed; `res/portfolio/img/personal-room.png` re-shot from the v3 home (also feeds the no-WebGL fallback).
 - `[✓]` H3.M5.G2.T5 — (2026-06-11) 狸花猫 inhabitant: procedural Li Hua tabby (striped canvas fur, white bib/belly/paws, tabby-M head, ringed tail, whiskers, toon outline) with a behaviour state machine — sit+look / walk (waypoint graph, collision-free) / sleep (breathing) / stretch / groom, random transitions with smooth pose blending; reduced-motion = asleep. **v2 refinement (same day, Linlin's 4 points):** lathed organic body + haunches/scruff/cheeks; tail properly rooted (was floating); layered amber eyes w/ slit pupils + random blinking; cinnabar collar + gilt 旺财 tag. **v3 (same day):** click-to-focus + camera-follow, pat interaction w/ 3 random reactions (bliss+hearts / flop / storm-off), wheel-out exit; eyes redesigned cuter (Dragon-Li ref: golden almond, round pupil, 2 glints); collar seated ⊥ neck axis + tag chained via gilt link.
+- `[✓]` H3.M5.G2.T6 — (2026-06-16) **Living-room TV** with real video playback: a slim wall-mounted 4K panel whose screen is a real `<iframe>` in a `CSS3DRenderer` layer, revealed through a depth-only WebGL hole (`colorWrite:false` + `renderOrder:-1`) so occlusion is correct (the cat passes in front). 19 of Linlin's own videos as **shuffled** channels (Bilibili + YouTube; non-embeddable 小红书 / 微信视频号 = `type:'ext'` → colour-bar test card + "watch on site" link). Paper remote: power / channel ± / volume ± (YouTube via postMessage) / brightness (CSS filter) / watch-on-site; keyboard ←→↑↓. Old-set tune transition (snow → black → snow → picture) + channel OSD; reduced-motion skips the snow; narrow / portrait viewports auto-pull the camera back to fit the set. Future video links get shuffled in, not appended.
 - `[ ]` H3.M5.G2.T4 — Replace canvas postcard placeholders with Linlin's real photos (`photoTex`/`photoURL` call sites); optionally expand the outdoor world beyond the door.
 
 ---

docs/UPDATES.md

@@ -9,6 +9,7 @@
 ## Master TOC
 
 - [2026-06-16](#2026-06-16)
+    - [V2 — Living-room TV with real video playback in the 3D personal room](#v2--living-room-tv-with-real-video-playback-in-the-3d-personal-room) — `personal.html` gains a wall-mounted 4K TV that plays Linlin's own videos: a real `<iframe>` in a CSS3DRenderer layer behind a depth-only WebGL hole (correct occlusion, the cat can pass in front), 19 shuffled Bilibili/YouTube channels + a test-card slate for non-embeddable 小红书/微信视频号, a paper remote (power / channel / volume / brightness / watch-on-site + keyboard), and an old-set snow→black→picture tune transition.
     - [V1 — Homepage social-preview image swapped to the parchment hero](#v1--homepage-social-preview-image-swapped-to-the-parchment-hero) — `index_en.html` OG/Twitter card → new `images/og-hero.jpg` (1200×630 capture of the live parchment notebook hero) instead of the old blue studio card; `alt` text refreshed; zh page + JSON-LD portrait left unchanged; re-scrape needed after deploy.
 - [2026-06-11](#2026-06-11)
     - [V6 — site-wide v8 polish swapped live (5 rounds + 2 review rounds)](#v6--site-wide-v8-polish-swapped-live-5-rounds--2-review-rounds) — approval-gated v8 set went live: neat-handwriting reading tier (Patrick Hand ≥17px) across all prose; blog/gallery joined the site nav language (translated ×4); tactile personality (gilt selection, ink scrollbars, blog sign-off + 旺财 paw, footer paw trail); zh homepage renamed `index_en_clear.html`→`index_zh_clear.html` with a redirect stub + router/sitemap updates; pre-existing zh mobile 458px overflow fixed; pre-swap originals archived in `backups/pre-v8-swap-2026-06-11/`.
@@ -88,6 +89,14 @@
 
 # 2026-06-16
 
+## V2 — Living-room TV with real video playback in the 3D personal room
+
+- `personal.html` gains a wall-mounted slim 4K **TV** that actually plays Linlin's own videos. The screen is a real `<iframe>` living in a `CSS3DRenderer` layer behind the transparent WebGL canvas; a depth-only "hole" mesh (`colorWrite:false`, `renderOrder:-1`) punches through the scene so occlusion is correct — the 旺财 cat can walk in front of a playing video. (The renderer became `alpha:true` with `scene.background=null` for the mix; the fog stays.)
+- **19 channels**, deliberately shuffled (not chronological): Bilibili + YouTube embeds, plus non-embeddable stations (小红书 / 微信视频号) rendered as `type:'ext'` — a classic colour-bar test card + the title + a "watch on site" remote link. Channel 1 is a strong playable video. Short links were resolved up front (b23.tv → BV id; YouTube oEmbed for titles).
+- **Paper remote** (parchment style, bottom-right): power, channel ±, volume ± (YouTube via the iframe postMessage API; Bilibili/ext show a note instead), brightness (CSS `filter` on the screen element), and a per-channel "watch on site" link. Keyboard: ←→ channel, ↑↓ volume. Channel changes play the old-set tune transition (snow → black + source swap → snow → picture) with a green channel OSD; `prefers-reduced-motion` skips the snow.
+- Layout fits: the TV is centred on the back wall (curtains narrowed, photo wall slid right to make room). The focus camera pulls in for a sit-on-the-sofa view, and on narrow / portrait viewports it auto-pulls back (fov-based) so the whole set fits. Exit (power button / ESC / click the cream backdrop) stops playback (`src='about:blank'` — never `''`, which would reload the page) and restores orbit controls. 0 own console errors (the only console error is from Bilibili's own iframe script).
+- The channel list is a `TV_CHANNELS` array at the top of the TV logic for easy editing; future video links get **shuffled in**, not appended. Built 2026-06-11..16; committed today.
+
 ## V1 — Homepage social-preview image swapped to the parchment hero
 
 - The Open Graph / Twitter card image for `index_en.html` (what LinkedIn, X, Slack, etc. scrape) changed from the old blue-on-white studio card (`images/og-card.jpg`) to **`images/og-hero.jpg`** — a 1200×630 capture of the live parchment notebook hero (name, portrait, the "today's research" Graph-ML mindmap), so the share preview now matches the actual site instead of a separate design.