基于Three.js和MindAR实现的网页端人脸识别功能和仿抖音猫脸特效换脸的各种面罩实现源码

上传者: 33789001 | 上传时间: 2023-04-19 11:59:12 | 文件大小: 48.25MB | 文件类型: 7Z
建议先看说明:https://blog.csdn.net/qq_33789001/article/details/129622266 在抖音上玩的猫脸特效完全可以通过制作猫脸的贴图的效果来模仿它的效果。于是收集了很多贴图,加上我的超低的ps技术处理后,实现了这个算是换脸功能相对完善的工程。 这里基于mind-ar-js-master\examples\face-tracking\example1.html案例修改而来,主要是将部分托管在cdn服务器的脚本库进行了本地化关联(解决加载太慢的问题)和然后UI上新增了各个面部贴图的小图按钮,通过点击对应面部贴图按钮后切换对应的效果。 我这里采用直接修改网页地址的face参数进行切换面部贴图效果,然后在网页加载场景创建的时候先解析face参数,没有face参数则直接使用默认面部贴图,加载贴图,创建faceMesh,并设置材质贴图。这一步主要就是找素材,然后将素材和标准的人脸模型可视化uv贴图进行脸部的贴合,详情的说明建议看前言中的博客内容。手机上不能使用该功能成功的问题依然存在。

文件下载

资源详情

[{"title":"( 24 个子文件 48.25MB ) 基于Three.js和MindAR实现的网页端人脸识别功能和仿抖音猫脸特效换脸的各种面罩实现源码","children":[{"title":"WebARFaceMasks","children":[{"title":"assets","children":[{"title":"facemeshes","children":[{"title":"京剧面具.png <span style='color:#111;'> 3.17MB </span>","children":null,"spread":false},{"title":"派对面具.png <span style='color:#111;'> 4.35MB </span>","children":null,"spread":false},{"title":"猫咪面具.png <span style='color:#111;'> 9.76MB </span>","children":null,"spread":false},{"title":"默认网格.png <span style='color:#111;'> 451.77KB </span>","children":null,"spread":false},{"title":"铁面罩.png <span style='color:#111;'> 824.32KB </span>","children":null,"spread":false},{"title":"V字面具.png <span style='color:#111;'> 2.17MB </span>","children":null,"spread":false},{"title":"绿色系面具.png <span style='color:#111;'> 3.82MB </span>","children":null,"spread":false},{"title":"金属鬼脸面具羽化.png <span style='color:#111;'> 6.71MB </span>","children":null,"spread":false},{"title":"蓝蝴蝶.png <span style='color:#111;'> 4.34MB </span>","children":null,"spread":false},{"title":"威尼斯狂欢面具羽化.png <span style='color:#111;'> 7.64MB </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":"facemeshdata","children":[{"title":"face_mesh_solution_simd_wasm_bin.js <span style='color:#111;'> 242.23KB </span>","children":null,"spread":false},{"title":"face_mesh.binarypb <span style='color:#111;'> 939B </span>","children":null,"spread":false},{"title":"face_mesh_solution_packed_assets_loader.js <span style='color:#111;'> 8.61KB </span>","children":null,"spread":false},{"title":"face_mesh_solution_packed_assets.data <span style='color:#111;'> 3.80MB </span>","children":null,"spread":false},{"title":"face_mesh_solution_simd_wasm_bin.wasm <span style='color:#111;'> 5.91MB </span>","children":null,"spread":false}],"spread":true},{"title":"libs","children":[{"title":"controller.008258e8.js <span style='color:#111;'> 2.06MB </span>","children":null,"spread":false},{"title":"three.module.js <span style='color:#111;'> 1.12MB </span>","children":null,"spread":false},{"title":"aframe.min.js <span style='color:#111;'> 1.89MB </span>","children":null,"spread":false},{"title":"ui.4498bf0c.js <span style='color:#111;'> 5.08KB </span>","children":null,"spread":false},{"title":"mindar-face-three.prod.js <span style='color:#111;'> 6.14KB </span>","children":null,"spread":false},{"title":"CSS3DRenderer.js <span style='color:#111;'> 6.58KB </span>","children":null,"spread":false},{"title":"es-module-shims.js <span style='color:#111;'> 46.87KB </span>","children":null,"spread":false},{"title":"mindar-face-aframe.prod.js <span style='color:#111;'> 1.99MB </span>","children":null,"spread":false}],"spread":true},{"title":"arfacemasks.html <span style='color:#111;'> 3.55KB </span>","children":null,"spread":false}],"spread":true}],"spread":true}]

评论信息

免责申明

【只为小站】的资源来自网友分享,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论 【只为小站】 经营者是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二条之规定,若资源存在侵权或相关问题请联系本站客服人员,zhiweidada#qq.com,请把#换成@,本站将给予最大的支持与配合,做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明