人脸签到
花了一个星期做了人脸签到的demo，github地址欢迎star,在线预览大屏幕demo
先说些废话，以前做年会的抽奖，感觉好傻，现在正好在学threejs，就想做个这样的场景来抽奖的方式，又在学人脸识别的知识，就想做人脸识别签到，就想都做在浏览器中
体验完整过程
- 1.微信扫描注册上传头像
- 手机浏览器打开人脸识别（ios11支持，微信浏览器不支持）
- 3.电脑打开大屏幕 地址
大屏幕可以同步显示刚刚的人脸
分享下制作过程
1.人脸识别
需要调用摄像头，实时显示有人脸，可以用node或者python调用opencv之类的，但是这是后端的应用，可以用树莓派做个装置，但是是浏览器识别，所以用tracking.js（已经好几年没有更新了，要识别其他的模型的话，可以python训练出来模型）。识别出人脸后，要算宽度，要在一定的宽度才算人脸，可以裁剪出正方形发送检索人脸。
2.人脸检索
人脸检索采用的是腾讯云的智能图像的api，需要创建个人信息，需要一个唯一的id（用的是微信的openid），一个人脸可以添加20张相似度低于99%的图片，一个组织可以有2w个人，肯定够用的，接口费用很便宜，月调去量是一万次免费
3.上传个人信息
获取微信openid，将照片上传到服务器保存，并添加到腾讯云的脸库中
4.threejs场景
- 添加一个天空盒
- 计算球（原实例用的CSS3render，需要改成webglrender）
- L形状 四个需要写顶点连接
- 动画效果 用anime.JS，感觉好用，为什么不用tween，因为自己刚刚学会的，所以想试一试
- 出现了人脸，需要将人脸飞到球的方块中，需要用到坐标转换，还有四元数，才能紧贴着
- 空闲没有人脸，会一直播放随机图片动画，有人脸了会动画结束后播放
5.socket通信
用socket.io通信，实时识别到人脸后，将人脸图及时发送到大屏幕
6.ssl
因为用摄像头识别需要ssl证书，他的请求都需要ssl，所以服务都要使用ssl证书，nginx或者apache需要配置https，并且将端口转发,配置node服务以及socket服务的https
未完成tasks
- 会修改人脸飞入的动画，需要有个中间点过度
- 增加粒子的动画，任意选个图片添加爆炸成图片的效果
- 用写shader来写些效果
本文转载于猿2048:人脸实时签到（three.js+tracking.js）基于浏览器