---

title: "用筆電 Webcam 做偽全息透視：2 小時復刻 head tracking + 3D 視差效果" date: 2026-03-23 author: sliven0722 source: https://www.threads.com/@sliven0722/post/DWNMB0bCi3S category: threads tags:

• 3D
• WebGL
• Head Tracking
• TensorFlow.js
• Three.js
• 互動體驗 created: 2026-03-23 updated: 2026-03-23

---

用筆電 Webcam 做偽全息透視：2 小時復刻 head tracking + 3D 視差效果

原文摘要

網友 Xiao Hai 花 2 小時復刻了一個「非對稱全息透視」效果：用筆電 webcam 偵測頭部位置，背景就跟著動，3D 物件像從螢幕裡探出來。

技術組合

• TensorFlow.js：抓臉部 landmark（頭部追蹤）
• Three.js：渲染 3D 場景
• 自寫的雙線程 Lerp Tracking：讓視差追蹤流暢
• Claude Opus 4.6 + Gemini 3.1 Pro：AI 當資深工程師寫 code，自己當 QA 調參數

原理

核心就是 head tracking 轉成 camera 偏移：

1. Webcam 即時偵測你的頭部位置
2. 你頭偏左 → 虛擬攝影機偏移 → 產生 motion parallax（運動視差）
3. 平面螢幕看起來像有深度、像透過窗戶看進去一樣

不是真立體（沒有雙眼視差），但單眼看就有很強的 3D 感，特別是場景有層次時，動起來超療癒。

核心觀點

1. 經典 trick 被 AI 大幅降低了復刻門檻

這個「Wii 遙控器 head tracking」的 trick 是 2007 年 Johnny Lee 的經典 demo，當年需要硬體改裝。現在只需要筆電內建 webcam + AI 幫寫 code，2 小時就搞定。

2. 「AI 當資深工程師，自己當 QA」是越來越常見的分工模式

不需要自己精通 TensorFlow.js 和 Three.js 的每個 API，只需要知道「要做什麼」和「怎麼判斷做得好不好」。

3. 這個效果的應用場景

• 產品展示網頁（3D 產品隨頭部移動）
• 遊戲 UI
• 互動藝術裝置
• 教育場景（3D 模型展示）