手势操控 Three.js！效果炸裂！

太牛了！手势操控 Three.js！效果炸裂！

部署运行你感兴趣的模型镜像一键部署

作为一名前端开发者，我一直热衷于界面效果展示，尤其喜欢那些炫酷 的 3D 效果。

最近发现了一个很赞的开源项目 "stark-shapes"，它将手势识别 与 3D 动画 完美结合，借助 Three.js 和 MediaPipe 手势跟踪技术，实现了通过手势操控 3D 粒子动画的效果，视觉体验非常出色。

stark-shapes 亮点

多样的手势操控

项目支持丰富手势操作。

右手捏合能放大或缩小场景，左手旋转能让摄像机环绕场景，拍手可切换动画模式，交互方式简单又有趣。

精美的 3D 几何图案

项目包含多种 3D 几何图案 ，如立方体、球体、螺旋、星系等，这些图案由粒子系统生成，具有动态、流动的效果。

螺旋图案粒子沿轨迹旋转延伸，星系图案模拟宇宙星系旋转运行，视觉效果极佳。

强大的后处理效果

项目引入后处理效果，如 Bloom 效果。它能让场景中明亮部分添加光晕，使画面更柔和梦幻，增强视觉层次感和氛围感。

技术实现

Three.js 的关键作用

Three.js 是基于 WebGL 的 3D 绘图库，负责创建、渲染 3D 几何体及动画处理。

"stark-shapes" 项目中，它管理场景的摄像机位置、光照设置及动画循环等，呈现流畅且视觉效果出色的 3D 世界。

MediaPipe Hands 的手势识别功能

MediaPipe Hands 是强大的手势识别库，能实时跟踪手部关键点位置和动作。

在项目中，它与 Three.js 紧密结合，实现手势与 3D 场景的无缝交互。

快速本地运行

项目体验起来很有趣，手势操作简单，并且这个项目是开源的，对前端开发者来说是个很好的学习资源。

特别是想在 3D 领域深入学习的开发者，可以通过阅读和研究该项目的代码，了解如何结合 Three.js 和 MediaPipe 实现复杂的交互效果。

如果你也对这个项目感兴趣，不妨动手下载源码试试。以下是下载和运行项目的教程：

克隆项目仓库：

git clone git@github.com:collidingScopes/stark-shapes.git
智能体编程go
运行

安装项目依赖：

cd stark-shapes
npm install
智能体编程go
运行

启动项目：

npm start
智能体编程go
运行

在浏览器中打开 http://localhost:8080 即可查看项目效果。

总之， "stark-shapes" 项目实现手势操控 3D 粒子动画，带来新交互体验，是优质学习平台，拓展应用前景广阔。

感兴趣的朋友可体验在线预览或克隆源码深入研究。

• stark-shapes Github 地址 ：https://github.com/collidingScopes/stark-shapes/tree/main
• stark-shapes 在线体验地址 ：https://collidingscopes.github.io/stark-shapes/

（首次访问体验地址较慢，耐心等待资源加载。当摄像头里的手势出现识别圆点连线后，就可以体验了。）