<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">
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();
</script>
<style>
body {
margin: 0;
}
#container {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
基于Three.js和MindAR实现的网页端WebAR人脸识别追踪功能的京剧换脸Demo源码（可独立部署）
版权申诉
5星 · 超过95%的资源 15 浏览量
2023-03-10
14:24:41
上传
评论 2
收藏 8.71MB 7Z 举报 
WebARFaceDemo.7z （15个子文件） 
WebARFaceDemo assets 
京剧面具.png 3.17MB 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
facemesh-jingjumask.html 1KB 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
- 1
- 2
- 3
前往页