three+MediaPipe实现浏览器调用摄像头实现镭射眼特效代码-html代码-BFW代码库

three+MediaPipe实现浏览器调用摄像头实现镭射眼特效代码

代码语言：html

所属分类：多媒体

代码描述：three+MediaPipe实现浏览器调用摄像头实现镭射眼特效代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AR Laser Eyes - Three.js + MediaPipe</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #000; }
        
        #container { position: relative; width: 100vw; height: 100vh; }

        /* 修复 1: 将 opacity 改为 1，让视频可见 */
        #input_video {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            object-fit: cover; transform: scaleX(-1); 
            opacity: 1; /*这里原来是 0，必须改成 1 */
            z-index: 1;
        }

        /* 修复 2: 使用 mix-blend-mode: screen */
        /* 这会让画布上的黑色背景变透明，同时保留发光效果叠加在视频上 */
        #output_canvas {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 2; pointer-events: none;
            mix-blend-mode: screen; /* 关键代码：滤除黑色背景 */
        }

        #loading {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            color: #ff0033; font-family: sans-serif; font-weight: bold; font-size: 20px;
            text-shadow: 0 0 10px #ff0033; z-index: 10; letter-spacing: 2px;
        }
    </style>

    <!-- 引入 Three.js 和 MediaPipe 库 (保持不变) -->
    <script type="importmap">
        {
            "imports": {
                "three&qu.........完整代码请登录后点击上方下载按钮下载查看