Preview
演示页: eye-track.lary-showcase.top/
如图所示: 点击 Primary 按钮, 请求摄像头,开启眼动追踪后。运动的红点即为视线所在,可通过头部运动调整红点位置。
⚠️注: 仅在带摄像头的笔记本上调试通过。不知道换台电脑表现如何。
How it Works
-
基于 three.js 的 morphtargets_webcam。
在此 example 中, 我调整观察方向,发现摄像头前的我前后运动,3D模型也跟着前后运动, 所以是包含完整的空间信息的。 -
需求降级。
Mediapipe 的 face_landmarks 中是有眼动信息的。但我没想出来如何拿眼动的位置计算视线位置。 FaceLandmarker 体验地址。
不过仅捕捉头动,也可以得到一定的视线追踪的效果。 -
在场景中,添加上显示屏的平面、视线射线,然后计算交点,即可获得在[-2,2],[0,-2] 范围内移动的点的位置
- 将点换算为屏幕上的位置, 再换算为浏览器 viewport 中的位置。
如图, 大红点为当前页面中视线位置;小红点为整个屏幕的 minimap,演示了视线从浏览器移除浏览器的过程。