H5实现iPhoneX上的Animoji

  1. 云栖社区>
  2. 前端那些事儿>
  3. 博客>
  4. 正文

H5实现iPhoneX上的Animoji

马铭芳 2018-07-11 17:29:13 浏览852
展开阅读全文

先上图:

7d3d65187af9afc1f1f062a1a19f3f1640b2c7f4

前段时间突发奇想,想到前端是不是可以利用摄像头设备增强页面的交互能力。

比如我们见过有些页面设计,页面元素会随着鼠标的移动而移动,结合元素的层次感,可以形成视差效果。

那么,如果能获取到人脸在屏幕前的移动变化,就可以做到页面元素跟随人脸变化,而不是跟随鼠标变化,这可能是种更棒的视差体验。

于是动手实践后,就有了这个效果:

0d213a1202b650493c67be786e6822f8ee9e4107

做出来后,我又想到,如果把这个应用在3D游戏里,比如CS,就可以实现一个场景:玩家在屏幕前把脑袋往右边伸,屏幕里的那个躲在转角处的土匪人物,就能看到左边更大的视野。

想想还不错吧?

然而我不是做游戏的,这个idea我发挥不了,如果有做3D页游的程序猿看到,可以试试看。

又过了一两个星期,我又想到了iPhoneX上的animoji,也可以通过这样的方式实现。

于是动手实践后,就有了你最先看到的那张图的效果。

但是我的3D这方面还不是很擅长,所以没能实现让那坨便便的表情跟随人的表情变化。

Live Demo

视差DEMO

Animoji

源码

源码仓库:github.com/jaweii/AR-s…

源码克隆下来后,安装依赖项:


  1. npm install

以及安装parcel到全局:


  1. npm install -g parcel-bundler

启动命令:


  1. // 启动Animoji demo
  2. npm run dev:animoji
  3. // 启动视差Demo
  4. npm run dev

实现方式

通过计算机的摄像设备捕捉画面,使用Clmtrackr.js识别人脸,3D引擎使用的Three.js。

Clmtrackr.js可以捕捉到人脸在屏幕中的各个位置:

f1757a5ee63105fab42c44235f4145eb831e4222

在项目启动后,应用会不断的获取上图[41]点的坐标,当位置变化后,3D物体也做相应的变化。

原文发布时间:2018年06月17日

本文来源:掘金 如需转载请联系原作者

网友评论

登录后评论
0/500
评论
马铭芳
+ 关注
所属云栖号: 前端那些事儿