mediapipe+three实现摄像头实时识别人物表情同步三维人脸模型代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：mediapipe+three实现摄像头实时识别人物表情同步三维人脸模型代码

代码标签： mediapipe three 摄像头实时识别人物表情同步三维人脸模型代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>GNM Head · 实时人脸驱动 3D 头像 (facecap.glb)</title>
<style>
:root{--acc:#38e6c3;--acc2:#7b6bff;--panel:rgba(15,20,28,.88);--line:rgba(255,255,255,.09);--tx:#dfe7ee;--tx2:#8fa1b3}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--tx);
     background:radial-gradient(1200px 800px at 50% 38%,#16202e 0%,#0b0f16 55%,#07090d 100%)}
#scene{position:fixed;inset:0}canvas{display:block}
header{position:fixed;top:16px;left:20px;z-index:5;pointer-events:none}
header h1{font-size:19px;letter-spacing:.5px}header h1 em{font-style:normal;color:var(--acc)}
header p{font-size:11.5px;color:var(--tx2);margin-top:4px}
#camCard{position:fixed;left:20px;bottom:20px;z-index:5;width:256px;background:var(--panel);
         border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(10px);overflow:hidden}
#camHead{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:12px;color:var(--tx2);border-bottom:1px solid var(--line)}
#dot{width:8px;height:8px;border-radius:50%;background:#666;flex:none;transition:.2s}
#dot.on{background:#2fe08a;box-shadow:0 0 8px #2fe08a}#dot.off{background:#ff5d5d;box-shadow:0 0 8px #ff5d5d}
#fps{margin-left:auto;font-variant-numeric:tabular-nums}
#camWrap{position:relative;width:100%;aspect-ratio:4/3;background:#000}
#video,#overlay{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);object-fit:cover}
#camTip{padding:6px 12px;font-size:10.5px;color:var(--tx2);border-top:1px solid var(--line);line-height:1.5}
#panel{position:fixed;right:14px;top:14px;bottom:14px;width:306px;z-index:6;display:flex;flex-direction:column;gap:9px;overflow-y:auto;padding-right:2px}
#panel::-webkit-scrollbar{width:5px}#panel::-webkit-scrollbar-thumb{background:#2a3542;border-radius:3px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;backdrop-filter:blur(10px);padding:11px 13px;flex:none}
.card h3{font-size:12.5px;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.card h3::before{content:"";width:4px;height:12px;border-radius:2px;background:linear-gradient(var(--acc),var(--acc2))}
.row{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:12px}
.row>span:first-child{width:70px;flex:none;color:var(--tx2)}
.row input[type=range]{flex:1;accent-color:var(--acc)}
.row b{width:40px;flex:none;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;font-size:11px}
.row input[type=color]{width:32px;height:20px;border:none;background:none;padding:0;cursor:pointer}
.chk{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--tx2);margin:3px 10px 2px 0;cursor:pointer}
.chk input{accent-color:var(--acc)}
details summary{cursor:pointer;list-style:none}details summary::-webkit-details-marker{display:none}
.meter{display:grid;grid-template-columns:98px 1fr 32px;gap:7px;align-items:center;margin:4px 0;font-size:11px;color:var(--tx2)}
.track{height:5px;border-radius:3px;background:#1d2733;overflow:hidden}
.fill{height:100%;width:0%;border-radius:3px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.meter b{text-align:right;font-variant-numeric:tabular-nums;font-weight:500;color:var(--tx);font-size:10px}
#angles{font-size:11px;color:var(--tx2);margin-top:7px;font-variant-numeric:tabular-nums}
#modeLine{font-size:12p.........完整代码请登录后点击上方下载按钮下载查看