◀ VibeCruiser

gesture Christmas tree 3d with photo

A free computer vision demo — play it in your browser, no install. A 3D particle Christmas tree controlled by hand gestures. Built with Three.js & MediaPipe. 🎄✨ (一个由手势控制的 3D 粒子圣诞树。基于 Three.js 和 MediaPipe 构建。)

by @Timo8848 · Timo8848/gesture-Christmas_tree-3d_with_photo on GitHubLANG JavaScript★ 39HOSTED ON TIMO8848.GITHUB.IOUPDATED 15 Sep 2026

Vote and save it — free account with email or sign in with GitHub

Made this, @Timo8848? See how many people played it → or use email

Controls: 确保浏览器允许使用摄像头,然后: · 握紧拳头: 收!粒子聚合成圣诞树 · 张开手掌: 炸裂模式,树散开成星云,左右移动手掌可以转动视角

▶ Play full screen ▲ Vote: free account with email ▲ Or sign in with GitHub

GitHub may ask you to sign in, then to let VibeCruiser “Verify your GitHub identity” and “Act on your behalf”. We only read your profile and email, and never post anything.

Open the live demo Source on GitHub

From the README

原本只是想画一棵普通的 3D 圣诞树,但觉得不够酷,于是加上了 手势识别 和 粒子特效。现在你可以通过摄像头「隔空」控制这棵树,还能把自己喜欢的照片挂上去。

这不是那种静态的网页贺卡,而是一棵由 几千个粒子 组成的动态树。接入了 Google 的 MediaPipe,所以它能看懂你的手势。

识别用的是相对比例(以手腕到中指指根的长度为基准),所以手离摄像头远一点近一点都能稳定触发。阈值可以在 js/config.js 的 gestures 里调,按 D 能实时看到原始数值。

1. 页面上传(最简单) 点右上角 Select Files 选图片,或者 Select Folder 一次性选一整个文件夹。

2. 放进 images/ 自动加载 把照片丢进 images/,再建一个 images/manifest.json 列出文件名:

纯前端,没有框架,没有打包工具,依赖通过 importmap 从 CDN 引入:

Read the full README on GitHub →

Built something like this? Submit your vibe — free account, takes a minute. How listing works.

More like this

Made this?

Claim it: create a free account, then press CLAIM THIS in the cruiser. Put the badge below in your README or on your demo page first; that link is how we know it's yours.

Your project is on the cruise, loaded live from your own site. Put the badge in your README or on the demo page: it shows your live play count, it links back to this page, and everyone who lands here is one click from running the real thing.

On VibeCruiser

How listing, the badge and claiming work →