<html>
<head>
<title>面网识别--贴图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script async src="./libs/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "./libs/three.module.js",
"three/addons/": "https://unpkg.com/three@0.136.0/examples/jsm/",
"mindar-face-three":"./libs/mindar-face-three.prod.js"
}
}
</script>
<script type="module">
var params = {};
getParams();
//获取参数
function getParams() {
var str = window.location.search.substr(1);
var arrList = str.split('&');
arrList.forEach(function (item) {
var arr = item.split('='); //["name", "%E5%BC%A0%E4%B8%89"]
params[arr[0]] = window.decodeURIComponent(arr[1]); //{name: "张三", age: "18"}
});
}
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);
if (params["face"] === undefined)
var facetex = './assets/facemeshes/默认网格.png';
else
var facetex = './assets/facemeshes/' + params["face"] + '.png';
//console.log("imgurl:" + facetex);
const faceMesh = mindarThree.addFaceMesh();
const texture = new THREE.TextureLoader().load(facetex);
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();
</script>
<style>
body {
margin: 0;
}
#container {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
.options-panel {
position: fixed;
top: 0;
left: 50%;
display: flex;
transform: translateX(-50%);
z-index: 2;
}
.options-panel img {
border: solid 2px;
width: 50px;
height: 50px;
object-fit: cover;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<div class="options-panel">
<a href="arfacemasks.html?face=京剧面具">
<img id="VFace" src="./assets/facemeshes/京剧面具.png" her /></a>
<a href="arfacemasks.html?face=猫咪面具">
<img id="VFace" src="./assets/facemeshes/猫咪面具.png" her /></a>
<a href="arfacemasks.html?face=V字面具">
<img id="VFace" src="./assets/facemeshes/V字面具.png" her /></a>
<a href="arfacemasks.html?face=金属鬼脸面具羽化">
<img id="JingShuFace" src="./assets/facemeshes/金属鬼脸面具羽化.png" /></a>
<a href="arfacemasks.html?face=蓝蝴蝶">
<img id="LHDFace" src="./assets/facemeshes/蓝蝴蝶.png" /></a>
<a href="arfacemasks.html?face=绿色系面具">
<img id="LSMJFace" src="./assets/facemeshes/绿色系面具.png" /></a>
<a href="arfacemasks.html?face=派对面具">
<img id="PDMJFace" src="./assets/facemeshes/派对面具.png" /></a>
<a href="arfacemasks.html?face=铁面罩">
<img id="TMZFace" src="./assets/facemeshes/铁面罩.png" /></a>
<a href="arfacemasks.html?face=威尼斯狂欢面具羽化">
<img id="WNSFace" src="./assets/facemeshes/威尼斯狂欢面具羽化.png" /></a>
</div>
</div>
</body>
</html>
基于Three.js和MindAR实现的网页端人脸识别功能和仿抖音猫脸特效换脸的各种面罩实现源码
版权申诉
5星 · 超过95%的资源 146 浏览量
2023-03-17
15:42:05
上传
评论 3
收藏 48.25MB 7Z 举报 
WebARFaceMasks.7z （24个子文件） 
WebARFaceMasks assets facemeshes 
京剧面具.png 3.17MB 派对面具.png 4.35MB 猫咪面具.png 9.76MB 默认网格.png 452KB 铁面罩.png 824KB V字面具.png 2.17MB 绿色系面具.png 3.82MB 金属鬼脸面具羽化.png 6.71MB 蓝蝴蝶.png 4.34MB 威尼斯狂欢面具羽化.png 7.64MB facemeshdata 
face_mesh_solution_simd_wasm_bin.js 242KB face_mesh.binarypb 939B face_mesh_solution_packed_assets_loader.js 9KB face_mesh_solution_packed_assets.data 3.8MB face_mesh_solution_simd_wasm_bin.wasm 5.91MB libs controller.008258e8.js 2.06MB three.module.js 1.12MB aframe.min.js 1.89MB ui.4498bf0c.js 5KB mindar-face-three.prod.js 6KB CSS3DRenderer.js 7KB es-module-shims.js 47KB mindar-face-aframe.prod.js 1.99MB
arfacemasks.html 4KB
- 1
- 2
- 3
前往页