简介这是一份面向前端开发者与机器学习爱好者的网页摄像头交互式创意演示项目源码基于TensorFlow.js与Three.js构建解决浏览器端实时人体感知与三维渲染结合的应用问题。项目集成PoseNet人体姿态识别、FaceMesh面部特征点检测与BodyPix人体分割三个预训练模型通过摄像头捕捉图像数据驱动三维场景交互适合具备一定JavaScript与WebGL基础、希望实践AI与图形学融合的中高级开发者。压缩包共147个文件约432KB以39个js脚本、29个vue组件、21个fs与16个vs着色器文件为主另含png、jpg等贴图素材及obj、mtl模型文件覆盖模型加载、着色器特效与界面组件等模块。目前已有64人学习下载。读者可获得完整的模型调用与Three.js渲染整合思路、着色器特效实现参考以及项目目录组织方式便于快速理解机器学习与三维图形技术在网页端的结合点并二次开发。1. 网页摄像头交互创意演示TensorFlow.js 三模型与 Three.js 的碰撞打开浏览器就能让摄像头识别你的姿态、面部特征和身体轮廓并实时驱动 3D 场景——这个项目把 TensorFlow.js 的 PoseNet、FaceMesh、BodyPix 三个模型和 Three.js 渲染管线串成了一条完整的交互链路。它解决的核心问题是不依赖后端 GPU 服务器纯前端完成从视频流采集、模型推理到 3D 视觉反馈的闭环。适合做互动装置、线上活动页、体感小游戏原型的前端和创意开发者。你拿到的是一个可直接运行的网页项目包解压后用本地服务器打开就能看到摄像头画面与 3D 元素的实时联动。下面从模型选型、代码结构到实际部署把这条链路拆开讲清楚。2. 三个模型的分工与选型PoseNet、FaceMesh、BodyPix 各管什么2.1 为什么不是用一个模型全包PoseNet 输出的是 17 个关键点坐标鼻子、肩膀、手腕、脚踝等适合做骨架驱动的动作触发FaceMesh 输出 468 个面部特征点精度足以捕捉眉毛和嘴唇的微小变化BodyPix 做的是逐像素的人体语义分割输出的是遮罩而非坐标。三者定位完全不同PoseNet 管“动没动、动在哪”FaceMesh 管“表情是什么”BodyPix 管“人站在画面的哪个区域”。项目把三个模型并行加载各自独立推理再在 Three.js 场景里按需取用。常见做法是给每个模型分配独立的 canvas 层或纹理单元避免相互覆盖。2.2 模型加载与初始化代码// 三个模型并行加载减少等待时间 const [poseNet, faceMesh, bodyPix] await Promise.all([ posenet.load({ architecture: MobileNetV1, // 轻量版适合实时 outputStride: 16, // 输出步长16 精度与速度平衡 inputResolution: { width: 640, height: 480 }, multiplier: 0.75 // 通道缩放越小越快 }), facemesh.load({ maxFaces: 1, // 只检测一张脸降低开销 refineLandmarks: true // 启用虹膜和嘴唇细化 }), bodyPix.load({ architecture: MobileNetV1, outputStride: 16, multiplier: 0.75, quantBytes: 2 // 量化字节数2 比 4 省内存 }) ]);这段代码的关键在于Promise.all并行加载三个模型如果串行加载在中等网络下可能要等 8-10 秒。outputStride和multiplier是两个最直接的性能旋钮outputStride 从 16 降到 8 会让关键点更精细但帧率明显下降multiplier 从 0.75 提到 1.0 精度提升有限但推理时间增加约 40%。我一般先在 0.75/16 的组合下跑通再根据设备表现微调。2.3 视频流采集与帧同步const video document.getElementById(webcam); const stream await navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480, facingMode: user }, audio: false }); video.srcObject stream; await video.play(); // 用 requestAnimationFrame 驱动推理循环 async function detectLoop() { const pose await poseNet.estimateSinglePose(video, { flipHorizontal: true // 前置摄像头镜像翻转 }); const faces await faceMesh.estimateFaces(video); const segmentation await bodyPix.segment(video); updateThreeScene(pose, faces, segmentation); requestAnimationFrame(detectLoop); }flipHorizontal: true是前置摄像头的必要设置否则你抬右手画面里的骨架会抬左手。推理循环用requestAnimationFrame而不是setInterval因为前者与浏览器渲染帧对齐避免不必要的重复推理。注意三个模型的推理是串行 await 的如果设备性能吃紧可以把 FaceMesh 和 BodyPix 降频到每两帧跑一次PoseNet 保持每帧。3. Three.js 场景搭建把关键点坐标映射到 3D 空间3.1 坐标系转换的核心逻辑PoseNet 输出的坐标是视频像素坐标原点在左上角Three.js 用的是归一化设备坐标NDC原点在屏幕中心范围 -1 到 1。转换公式是function toNDC(x, y, videoWidth, videoHeight) { return { x: (x / videoWidth) * 2 - 1, y: -(y / videoHeight) * 2 1 // Y 轴翻转 }; }这个转换看起来简单但实际用的时候要注意视频的videoWidth和videoHeight是实际采集分辨率不是 CSS 显示尺寸。如果视频被 CSS 拉伸过还要按显示比例做二次校正。我见过不少人在这里翻车——骨架点总是偏移查了半天发现是拿clientWidth当成了videoWidth。3.2 用关键点驱动 3D 物体// 以右手腕驱动一个 3D 球体为例 const wrist pose.keypoints.find(k k.part rightWrist); if (wrist.score 0.5) { // 置信度阈值 const ndc toNDC(wrist.position.x, wrist.position.y, 640, 480); sphere.position.x ndc.x * 5; // 映射到场景坐标范围 sphere.position.y ndc.y * 5; sphere.position.z Math.sin(Date.now() * 0.002) * 2; // 呼吸感 }score 0.5这个阈值是血泪经验低于 0.5 的关键点基本是模型在瞎猜直接忽略比强行使用更稳定。场景坐标的缩放系数这里用了 5取决于你的相机视锥体设置透视相机下fov: 75时z0 平面上可见范围大约是 ±5 左右。3.3 BodyPix 分割遮罩作为纹理BodyPix 输出的遮罩可以转成 ImageData 贴到 Three.js 的平面或粒子系统上做出“人体区域发光”或“背景替换”效果。常见做法是把遮罩画到一个离屏 canvas再用THREE.CanvasTexture作为材质贴图。注意遮罩的更新频率不需要跟渲染帧一致每 3-4 帧更新一次纹理就够了否则 GPU 上传开销会拖垮帧率。4. 性能调优与避坑帧率、内存与模型切换的实战记录4.1 帧率从 12 提到 30 的三个操作第一个操作是降低输入分辨率。PoseNet 的inputResolution从 640×480 降到 320×240推理时间直接减半关键点精度损失在可接受范围内。第二个是给 FaceMesh 加maxFaces: 1多人脸检测在单人场景下纯属浪费。第三个是把 BodyPix 的quantBytes设为 2模型体积从约 4MB 降到 2MB 左右加载和推理都更快。这三个改完中端笔记本上帧率能从 12fps 提到 28-30fps。4.2 内存泄漏的隐蔽来源TensorFlow.js 的 tensor 不会自动回收。每次调用estimateSinglePose或segment都会产生新的 tensor如果不手动管理几分钟后内存就会飙到几百 MB。解决办法是在推理循环里用tf.tidy()包裹或者手动调用.dispose()const segmentation await bodyPix.segment(video); // 使用完后释放 segmentation.data.dispose(); segmentation.segmentationMap?.dispose();BodyPix 的返回对象里data和segmentationMap都是 tensor容易漏掉。我一般会在循环末尾统一检查一遍。4.3 避坑清单现象页面打开后摄像头灯亮但画面全黑。原因video.play()在部分浏览器需要用户手势触发。解决加一个“开始”按钮点击后再调getUserMedia和play()。现象骨架点抖动严重像在抽搐。原因模型逐帧独立推理没有时序平滑。解决对关键点坐标做指数移动平均smoothed prev * 0.7 current * 0.3简单但有效。现象切换模型时页面卡死。原因旧模型的 tensor 没释放就加载新模型内存爆了。解决切换前先model.dispose()再加载新模型。现象Three.js 场景里的物体位置和摄像头画面对不上。原因视频显示区域有 CSS padding 或 object-fit 导致偏移。解决用getBoundingClientRect()获取实际渲染区域重新计算映射比例。现象移动端 Safari 上模型加载失败。原因Safari 对 WebGL 纹理尺寸有限制默认模型输入可能超限。解决把inputResolution降到 256×256 以下并确保使用 WebGL2 上下文。5. 从演示到落地把交互逻辑抽成可配置的触发规则5.1 用关键点距离做手势触发单纯把关键点映射到 3D 物体位置只是演示级别。要做出可用的交互需要定义触发规则。比如“双手合十”可以检测左右手腕距离小于阈值const leftWrist pose.keypoints.find(k k.part leftWrist); const rightWrist pose.keypoints.find(k k.part rightWrist); const distance Math.hypot( leftWrist.position.x - rightWrist.position.x, leftWrist.position.y - rightWrist.position.y ); if (distance 50 leftWrist.score 0.6 rightWrist.score 0.6) { triggerAction(pray); }阈值 50 是像素单位在 640×480 下大约对应双手靠近到 8 厘米左右。这个值需要根据实际摄像头视野调整没有万能参数。5.2 面部特征点驱动表情映射FaceMesh 的 468 个点里眉毛内侧点索引 55 和 285的垂直距离可以判断挑眉嘴唇上下点索引 13 和 14的距离可以判断张嘴。把这些距离归一化后映射到 3D 物体的缩放或颜色变化就能做出“挑眉变色”“张嘴放大”的效果。关键是要做基线校准启动时先记录中性表情下的距离值后续用相对变化量触发。5.3 验证方法部署后按这个顺序验证先确认摄像头画面正常显示再检查控制台有没有模型加载报错然后看骨架点是否跟随动作最后测试触发规则是否在预期姿态下生效。如果骨架点跟随但触发不生效大概率是置信度阈值设太高如果触发偶尔生效偶尔不生效检查是否有其他关键点干扰了距离计算。从那以后我每次部署这类摄像头交互项目都会先在目标设备上跑一遍完整的“加载-识别-触发”链路确认帧率和内存曲线平稳后再做视觉打磨。希望帮到你。本文还有配套的精品资源点击获取