1. 背景与核心概念最近在 Show HN 上有一个挺有意思的项目标题是 “Anamorphic, head-tracked perspective for any web page”。乍一看它像是给网页套了一层 3D 特效滤镜但如果把这个标题拆开看它其实包含两个非常经典的技术主题一个是 anamorphic变形透视另一个是 head-tracked perspective头部追踪视角。这篇文章就围绕这两个主题展开先讲清楚背后的视觉原理再带你动手实现两套可以直接运行的 Demo一套用纯 CSS 3D 实现鼠标模拟头部追踪另一套用 Three.js 摄像头做人脸检测让观察视角真正跟随头部移动。这个主题比较适合以下读者对前端 3D 变换有兴趣、想了解 anamorphic 投影原理、需要在网页里接入摄像头做交互或者单纯想在浏览器里复现一个“画面会随着观察位置改变”的效果。读完本文你不仅能理解 anamorphic 和 head-tracked 这两个概念还能掌握如何用 CSS 3D 和 Three.js 分别搭建一个可运行的最小案例以及在实际项目中需要注意的浏览器兼容性、性能优化和隐私问题。1.1 Anamorphic 透视从名画到屏幕Anamorphic 这个词在中文里通常翻译成“变形投影”或“变形透视”它描述的是一种视觉现象图像本身在某些角度看起来是拉伸、变形甚至无法辨认的但当你从特定位置、特定角度去观察它时变形就会被视觉纠正画面突然变得正常清晰。这个手法在艺术史上有非常经典的案例比如汉斯·荷尔拜因的名画《大使们》画面底部有一个看起来非常怪异的拉长形状只有你站到画面偏右侧并斜着看的时候才能辨认出那其实是一个骷髅头。这种“故意制造变形再靠观察者位置还原”的思路就是 anamorphic 的核心。到了屏幕显示时代anamorphic 的思路也没有消失只是实现手段变了。投影仪需要做梯形校正户外广告大屏会根据行人视角做画面补偿本质上都是“根据观察位置对图像做反向变形”。本文要讨论的网页场景也一样如果用户从侧面看屏幕屏幕上的内容和屏幕本身都不是正对用户的那么为了让人眼看到正常比例的画面我们就需要把内容在渲染时预先做一个反向透视变换。传统 anamorphic 是静态的观察位置固定而结合了头部追踪之后变形参数可以实时更新用户不用固定站位这是两者结合后最有价值的地方。1.2 Head-Tracked Perspective 是什么Head-tracked perspective 直译是“头部追踪视角”更常见的叫法是“视差渲染”或“动态透视”。它的目标是实时获取观察者头部相对于屏幕的位置并把这个位置应用到三维场景的相机参数上让屏幕上的画面像一扇真实的窗户一样随观察者的移动展示不同侧面。一个很直观的例子是你坐在电脑前屏幕里有一个立方体。如果你把头向左移动一点点正常情况下你应该能看到立方体的左侧多一点把头往右移动你应该看到右侧多一点靠近屏幕画面应该有一种“被拉近”的透视感。但在普通静态渲染中相机位置是固定的不管你怎么动画面都不变。Head-tracked perspective 就是要把“观察者头部位置”这个变量接入渲染流程让画面跟随视角实时变化。在浏览器里实现头部追踪并不一定需要昂贵的外设。最简单的方案是用鼠标位置模拟头部位置适合快速演示进阶方案是调用摄像头通过人脸检测算法估算头部在画面中的位置更极客的方案是配合 WebXR 或专用硬件获取真正的六自由度头部姿态。本文主要覆盖前两种方案因为它们覆盖了从概念到生产落地的大部分场景。1.3 两者结合能做什么把 anamorphic 变形透视和 head-tracked 动态视角放在一起就能做出一个体验很完整的 3D 容器普通网页不再是静止的平面而是一个存在于三维空间中的“窗口”用户移动头部时窗口里的内容会呈现真实的透视变化且因为加入了反向变形补偿内容在任意观察角度下都不会失真。这种能力的应用场景其实很多应用场景具体表现品牌营销页用户移动头部时产品展示出现立体视差增加沉浸感在线展厅/数字画廊展品或画作呈现 anamorphic 透视观赏体验更接近线下游戏/虚拟桌面2D UI 以 3D 方式呈现信息层级更有空间感教育演示几何、建筑、机械结构等需要体现透视原理的内容终端广告屏通过摄像头让广告内容随行人角度动态校准从技术实现上看这种“让任意网页产生头部追踪透视效果”的思路并不是重新开发一套 3D 引擎而是把网页内容放进一个可变形、可响应视角的渲染容器中。理解了这一点接下来我们看一下背后的核心原理。2. 核心原理解析2.1 透视投影与观察者位置在理解 anamorphic 之前需要先理解透视投影。人眼看世界时远处的物体看起来更小近处的物体看起来更大这是一种近大远小的视觉规律。在三维图形渲染中我们使用透视投影矩阵来模拟这种效果。相机即观察者的眼睛位置决定了投影方向相机朝哪个方向看哪些物体落在视野里物体在屏幕上呈现的角度如何都取决于相机参数。对于屏幕上的一个普通二维网页来说它本身没有一个“朝向”它就是一个平面。但当我们把它放进一个三维场景里它就变成了一张有位置、有法线方向的“画布”。观察者从不同角度看这张画布画布上图案的透视投影就会发生变化。如果我们希望观察者看到的画布内容始终是“正面”的就需要根据观察者位置对画布进行实时旋转和变形。这就是 anamorphic 在屏幕上的本质不是让画面保持静止而是让画面的投影始终照顾到观察者的真实位置。一个比较粗略但有用的公式化理解是假设观察者眼睛位于点E (ex, ey, ez)屏幕中心在原点屏幕法线指向观察者方向z轴。为了让屏幕上的一幅图像正对观察者图像在三维空间中的法线方向应该指向E也就是说图像需要绕 Y 轴旋转水平角度angleY atan(ex / ez)绕 X 轴旋转垂直角度angleX atan(-ey / ez)。这个经验公式在后面的 CSS 3D 实战中会直接用到。2.2 从头部位置映射到屏幕变换了解了理论公式后接下来要解决的是坐标映射问题。无论是鼠标模拟还是摄像头检测我们首先拿到的是一个“头部位置”然后需要把头部位置映射成相机位置或画面变换参数。在浏览器中我们常用归一化坐标来表示头部位置。比如head.x和head.y都取值 0 到 1其中(0.5, 0.5)表示画面中心。鼠标模式可以直接用clientX / innerWidth计算归一化坐标摄像头模式则需要通过人脸检测得到人脸框然后计算人脸中心在视频画面中的归一化位置。得到归一化坐标后我们再把它映射到三维空间中。最简单的映射方式是camX (head.x - 0.5) * 横向范围 camY (0.5 - head.y) * 纵向范围 camZ 根据距离估算这里camX、camY、camZ是相机在三维空间中的位置。当头部向左移动时head.x小于 0.5camX变成负值相机向左移动于是场景中物体的右侧会更多地暴露出来当头部靠近屏幕时head.z变小camZ变小产生更强烈的近大远小效果。整个过程不需要非常精确因为人的视觉对透视差异有很强的适应能力只要趋势正确效果就已经很接近真实。2.3 两种技术路线对比在浏览器中实现 head-tracked perspective主流有两种技术路线。第一种是纯 CSS 3D Transform配合perspective和perspective-origin。它的优点是零依赖、代码量少、对 DOM 内容保留完整交互能力适合做 2D 卡片、UI 面板的透视效果缺点是只能对平面元素做旋转和倾斜无法表现复杂三维物体的真实侧面也不方便做复杂光照和材质。第二种是 WebGL典型实现是 Three.js。它可以把网页内容作为纹理贴到三维平面上也可以直接渲染真正的 3D 物体优点是透视效果真实、可扩展性强适合需要深度和视差的复杂场景缺点是需要引入渲染库代码复杂度更高如果要把 DOM 内容贴到三维场景中还需要额外处理纹理更新。技术路线优点缺点适用场景CSS 3D Transform零依赖、简单直观、保留 DOM 交互难以表现复杂立体模型卡片、面板、轻量视差Three.js / WebGL透视真实、扩展性强依赖较大、实现复杂度高3D 场景、完整视差、复杂交互对于本文来说我们先用 CSS 3D 做一个快速 Demo让你感受 anamorphic 透视的动态变化再用 Three.js 搭一个带摄像头人脸检测的完整案例。两者结合就能覆盖从入门到工程化的核心路径。3. 环境准备与浏览器能力3.1 浏览器 API 与开发环境本文的技术方案主要依赖以下浏览器 APIgetUserMedia用于获取摄像头视频流。媒体流对象MediaStream绑定到video标签后可以作为人脸检测的输入源。FaceDetectorChrome 曾经提供的实验性人脸检测 API用于从视频帧中识别人脸位置。requestAnimationFrame用于驱动渲染循环。CSS 3D Transformtransform-style、perspective、perspective-origin等属性。ES Module用于加载 Three.js。这里需要特别说明FaceDetector并不是一个跨浏览器的稳定 API。它的命名和参数在不同版本的 Chrome 中可能不同而且并非所有浏览器都支持。因此本文把它作为一个演示方案同时会在常见问题部分给出降级建议。生产环境中更推荐 MediaPipe Face Landmarker 或 TensorFlow.js 这样的人脸检测方案它们有更稳定的跨浏览器支持不过需要额外引入模型文件。3.2 本地开发环境要求getUserMedia有一个硬性限制只有在安全上下文下才能调用。所谓安全上下文最常见的是 HTTPS 页面或者localhost本机环境。如果你直接用file://协议打开 HTML 文件去调摄像头浏览器通常会报错或静默失败。因此本地验证时建议使用http://localhost访问页面或者用 Vite、Webpack Dev Server 这类自带本地服务的开发工具。版本方面本文示例以常见浏览器环境为准不绑定某个具体浏览器版本。Three.js 的引入方式为 CDN使用importmap配合 ES Module。如果你所在环境不能访问外网可以改成本地安装npm install three然后按照你的打包工具配置导入路径。重点是理解实现思路版本号在长期项目中应保持与你的依赖锁定一致。3.3 人脸检测方案选型为了让头部追踪真正落地人脸检测是核心环节。目前浏览器端主流的方案有方案依赖优点缺点FaceDetector APIChrome 内置无需额外依赖兼容性差实验性质强MediaPipe Face LandmarkerJS SDK 模型文件支持人脸网格关键点跨平台模型加载较慢依赖外网资源TensorFlow.js 人脸检测模型TF.js 模型灵活可控包体积较大需要处理模型加载后端人脸检测服务端检测精度可做得很高延迟较高存在视频画面上传的隐私问题在本文的实战二中我选择直接用FaceDetector作为演示因为代码最简洁便于你理解整个流程。如果浏览器不支持代码会降级到鼠标模拟模式不会阻塞页面运行。生产环境建议优先评估 MediaPipe 方案并且把人脸检测放在本地完成避免把视频帧上传到服务器保护用户隐私。4. 实战一CSS 3D 实现鼠标追踪透视卡片4.1 创建页面结构与样式我们先用一个最简化的 CSS 3D Demo 来感受 anamorphic 透视的效果。这里用鼠标位置来模拟头部位置不需要摄像头也不需要任何第三方库直接复制保存成index.html就能运行。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleCSS 3D 头部追踪透视 Demo/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; min-height: 100vh; background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); font-family: system-ui, -apple-system, sans-serif; } .scene { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 800px; perspective-origin: 50% 50%; } .card { width: 320px; height: 440px; border-radius: 20px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; color: #1a1a2e; transform-style: preserve-3d; will-change: transform; } /style /head body div classscene idscene div classcard idcard这是 Anamorphic Demo/div /div script const scene document.getElementById(scene); const card document.getElementById(card); const MAX_ANGLE_Y 14; const MAX_ANGLE_X 10; function updateFromMouse(e) { const nx (e.clientX / window.innerWidth) * 2 - 1; const ny (e.clientY / window.innerHeight) * 2 - 1; const rotateY nx * MAX_ANGLE_Y; const rotateX -ny * MAX_ANGLE_X; card.style.transform rotateX(${rotateX}deg) rotateY(${rotateY}deg); scene.style.perspectiveOrigin ${e.clientX}px ${e.clientY}px; } window.addEventListener(mousemove, updateFromMouse); /script /body /html这段代码里最重要的是.scene和.card的配合。.scene设置了perspective: 800px表示观察者距离 3D 场景的视距是 800 像素.card设置了will-change: transform提示浏览器把这张卡片单独提升为合成层减少动画过程中的重排开销。transform-style: preserve-3d在这里暂时只作用在卡片内部方便以后扩展更多 3D 子元素。4.2 JavaScript 动态变换JavaScript 部分的核心逻辑是把鼠标位置从屏幕像素坐标转换成归一化坐标再映射成旋转角度。当鼠标位于屏幕中心(0.5, 0.5)时nx和ny都等于 0卡片旋转角度为 0也就是完全正对用户。当鼠标向右移动nx变成正值rotateY为正卡片绕 Y 轴向右旋转当鼠标向下移动ny为正rotateX取了相反数卡片会向上仰起从视觉上让卡片朝向鼠标所在方向。perspective-origin的同步变化同样重要。它相当于移动观察视点在屏幕平面上的投影位置。当鼠标移到屏幕左上角时视觉灭点也会移动到左上角配合卡片的旋转会产生更强的纵深错觉。这个值如果不调整卡片旋转时透视中心始终在屏幕正中效果会大打折扣。4.3 运行效果与参数调优在浏览器中打开这个页面移动鼠标你会看到卡片像一个小型广告牌一样“面向鼠标”转动。越靠近边缘旋转角度越大卡片的透视拉伸越明显这就是 anamorphic 变形的直观体现。之所以说这是 anamorphic是因为卡片本身经历了非正面的投影变形但观察者从鼠标方向看过去时卡片看起来是正常正面的。你可以调整MAX_ANGLE_Y和MAX_ANGLE_X来控制最大旋转角度。数字越大效果越夸张但超过 30 度时卡片侧边会出现明显的透视压缩反而会影响阅读。另一个值得调的是perspective: 800px。视距越小纵深效果越夸张视距越大画面越接近正交投影。建议在日常内容展示中视距保持在 600 到 1000 像素之间旋转角度控制在 15 度以内。这个鼠标版 Demo 虽然简单但它已经完整展示了 anamorphic 透视的核心闭环获取观察者位置、计算变换参数、应用透视变换。接下来我们要把它升级成真正的头部追踪版本。5. 实战二Three.js 摄像头实现头部追踪透视5.1 项目结构与 HTML实战二会复杂一些但效果也更接近标题所说“any web page” 级别的 head-tracked perspective。我们使用 Three.js 渲染一个真实的三维场景场景中有一个立方体和一个小球摄像头人脸检测负责提供头部位置渲染循环会根据头部位置实时移动相机从而产生真实的视差效果。项目结构如下head-tracked-perspective/ ├── index.html └── main.jsindex.html负责页面结构和依赖加载main.js负责 Three.js 场景、人脸检测、坐标映射和渲染循环。先在index.html中引入 Three.js 和页面基本结构。这里使用importmap方式从 CDN 加载 Three.js如果你在本地安装了 Three.js可以改成对应的 import 路径。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleThree.js 头部追踪透视/title style body { margin: 0; overflow: hidden; background: #111; font-family: system-ui, sans-serif; } #info { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0, 0, 0, 0.55); padding: 8px 16px; border-radius: 20px; font-size: 14px; z-index: 10; white-space: nowrap; pointer-events: none; } #video { position: fixed; bottom: 16px; right: 16px; width: 160px; height: 120px; object-fit: cover; border-radius: 12px; border: 2px solid rgba(255, 255, 255, 0.6); z-index: 10; transform: scaleX(-1); } #video.hidden { display: none; } /style /head body div idinfo头部追踪透视移动头部3D 场景的观察视角会随之改变/div video idvideo autoplay muted playsinline classhidden/video script typeimportmap { imports: { three: https://cdn.jsdelivr.net/npm/three0.160.0/build/three.module.js } } /script script typemodule src./main.js/script /body /html这里的一些细节值得说明。video标签设置了playsinline在移动端 Safari 上播放视频时不会自动全屏muted和autoplay配合确保摄像头画面能自动开始播放。右上角的小窗口使用transform: scaleX(-1)做了水平镜像这样用户看向小窗口时能看到一个更自然的“镜子式”画面这个反转只影响显示不影响人脸检测坐标的计算。5.2 构建 3D 场景与相机接下来是main.js的第一部分创建场景、相机、渲染器和三维物体。import * as THREE from three; const scene new THREE.Scene(); const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100); camera.position.set(0, 0, 5); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); document.body.appendChild(render