当前位置：首页 > news >正文

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

news 文章来源：https://blog.csdn.net/qq_33789001/article/details/129442180 2024/12/15 15:00:27

前言

近段时间一直在玩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();