基于Three.js和MindAR实现的网页端WebAR人脸识别追踪功能的京剧换脸Demo(含源码)

前言

近段时间一直在玩MindAR的功能，之前一直在弄图片识别追踪的功能，发现其强大的功能还有脸部识别和追踪的功能，就基于其面部网格的例子修改了一个国粹京剧的换脸程序。如果你不了解MindAR的环境配置可以先参考这篇文章：基于MindAR实现的网页端WebAR图片识别叠加动作模型追踪功能，其中包含了大致的配置步骤和图片识别的功能。本文就以仓库中的面网案例的基础上进行了修改，将部分托管在cdn服务器的脚本库进行了本地化关联（解决加载太慢的问题），同时在网上随便找了个京剧面具图片，利用了笔者的超低PS技术进行了京剧面网的p图，实现了该效果。按MindAR作者的说法是可以在手机上运行，但是笔者在进行手机测试的时候，一直在转圈加载中，并未在手机上成功使用该功能，如果有大佬知道是啥问题也请指点一下。

效果

开发工作

主要还是在准备面网贴图上，还有进行代码修改的工作，通过mindar-face-three添加面网，然后替换面网材质的贴图，并设置透明属性（transparent）和需要更新属性（needsUpdate），再把面网添加到三维场景中即可。

面网贴图准备

面部网格贴图是贴在三维网格上的图，这个的准备还是比较费事的，主要笔者ps技术超低，从上面的效果能看出来贴图比较粗糙，如果更精细的贴图效果会更出色。案例中给出了标准的人脸模型可视化uv贴图（canonical_face_model_uv_visualization.png）：

将上面的面网图放大不难看出，每个顶点都有编号，

MindAR在脸上提供了486个锚点，您可以将3D模型或者贴图对象挂接定在任何一个锚点上，这里使用面部网格贴图就不用单个锚点的挂接了，因为面部识别后会自动将面部uv贴图拉伸贴合在对应的顶点上。但是我们的贴图也需要按标准的人脸模型可视化uv贴图进行制作，例如眼睛、鼻子等部位的贴图和网格的位置得对应上，不然会出现贴图便宜等情况，笔者使用的ps方法就是将标准的面网作为底图层，将京剧的面网的贴图新建个图层盖上去，然后对该图层进行缩放、拉伸和变形使其各个部位与标准的面网的部位对应上。
如下制作方式：

关闭背景和标准的面网导出png即可。

编码

该功能基于mind-ar-js-master\examples\face-tracking\example1.html案例修改而来，主要是将部分托管在cdn服务器的脚本库进行了本地化关联（解决加载太慢的问题）和替换了面部网格贴图。核心代码如下：

    import * as THREE from 'three';import {MindARThree} from 'mindar-face-three';const mindarThree = new MindARThree({container: document.querySelector("#container"),});const { renderer, scene, camera } = mindarThree;const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);scene.add(light);const faceMesh = mindarThree.addFaceMesh();const texture = new THREE.TextureLoader().load('./assets/京剧面具.png'); faceMesh.material.map = texture;faceMesh.material.transparent = true;faceMesh.material.needsUpdate = true;scene.add(faceMesh);const start = async () => {await mindarThree.start();renderer.setAnimationLoop(() => {renderer.render(scene, camera);});}start();

主要是通过const texture = THREE.TextureLoader().load(‘./assets/京剧面具.png’)加载了京剧面具贴图；并且faceMesh.material.map = texture;将贴图赋值。

服务器部署

我这里直接使用了IIS作为了本地的服务器，在打开网页测试之前还需要进行MIME类型的添加：
application/binarypb:

application/wasm:

application/data:

如果有其它的后缀名类型，需要自行添加上去，不然没办法运行网页或者功能不正常。
同时需要配置SSL证书（这个教程网上多，自行搜索配置吧）：

源码

https://download.csdn.net/download/qq_33789001/87554552
（打不开说明暂未通过审核）