mediapipe实现摄像头检测手势操控二维布料交互效果代码-html代码-BFW代码库

mediapipe实现摄像头检测手势操控二维布料交互效果代码

代码语言：html

所属分类：其他

代码描述：mediapipe实现摄像头检测手势操控二维布料交互效果代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>二维布料手势交互模拟</title>
  
  <!-- 引入 MediaPipe 必需的 CDN 依赖 -->
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>

  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body, html {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #0d0d11;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    /* 1. 最底层：背景 MP4 视频 */
    #bg-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }

    /* 2. 中间层：物理布料 Canvas */
    #cloth-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: auto; /* 允许鼠标/触屏与之交互 */
    }

    /* 3. 最顶层：镜像摄像头画面（半透明叠加，用于手势对齐） */
    #webcam {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scaleX(-1); /* 镜像水平翻转，符合镜面习惯 */
      z-index: 3;
      pointer-events: none; /* 穿透点击事件给下方的 Canvas */
      opacity: 0.3; /* 默认半透明 */
      mix-blend-mode: screen; /* 滤色混合模式，视觉效果更具科技感 */
      transition: opacity 0.3s;
    }

    /* 控制面板 */
    .control-panel {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 10;
      background: rgba(15, 15, 25, 0.75);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 12px;
      padding: 20px;
      color: #fff;
    .........完整代码请登录后点击上方下载按钮下载查看