金马奔腾

项目介绍

项目背景 说明：项目把传统春节的金马、元宝、钱袋、饺子、铜钱和家庭照片转化为可参与的数字艺术体验。面向展览观众和家庭用户，用户无需手柄，只用摄像头手势即可控制高密度粒子金马的形态与视角，并把自己的照片融入作品。 核心亮点 使用 4,800 个身体粒子和 800 个尾部粒子构成实体感金马，另有 2,000 个环境尘埃粒子。 通过 MediaPipe HandLandmarker 识别手掌开合和位置，实现聚合/散开及视角控制。 粒子不仅是点，而是饺子、钱袋、元宝和铜钱等 Three.js 实体几何体。 支持一次上传多张照片，自动按画框比例适配，并将照片粒子融入 3D 场景。 使用环境贴图、雾效、ACES 色调映射、聚光灯与 UnrealBloomPass 营造红金节庆氛围。 项目成长与反思 成长与反思：项目让我学习了 Three.js 场景、相机、材质、后处理、粒子动画和 MediaPipe 手部识别的组合。最大难点是 5,600 个实体粒子带来的性能压力，以及摄像头权限/模型加载失败。源码通过限制像素比、分批复用几何、设置 AI 初始化超时和离线降级来保证基本展示。下一版可引入 InstancedMesh、移动端性能档位和更清晰的手势教学。 完整说明书 需求：用低门槛自然交互呈现传统文化主题，让观众成为作品的一部分。 功能模块：粒子金马、手势识别、照片上传、形态切换、视角跟随、灯光与后处理。 技术实现：Three.js/WebGL 渲染；MediaPipe 获取手部关键点；用手指尖到手腕的平均距离判断握拳/张手，并将掌心位置映射为旋转。 踩坑与解决：高粒子数导致卡顿，因此限制 devicePixelRatio 并复用几何；AI 资源可能加载失败，因此设置超时并保留键盘/自动展示模式。 复盘：视觉完成度较高，但网络依赖、首次加载、低性能设备和隐私提示仍可进一步优化。