引言

前几篇博客中我们介绍了用gemini3搭建了几个非常有意思的app，但是只在网页上运行肯定是满足不了我们的需求的，这篇博客讲教大家如何把app部署到自己的电脑上（依托于浏览器），可以随时随地打开并且不用担心随时找不到自己做好的应用

准备工作：环境搭建

在开始部署前，我们需要确保本地计算机具备必要的运行环境：

Node.js环境
- 这是运行现代JavaScript应用的基础，推荐安装v16及以上版本
- 下载地址：https://nodejs.org/
- 安装完成后，打开终端验证：
  bash 复制代码
```
node -v  # 应显示v16.x.x或更高版本
npm -v   # 应显示7.x.x或更高版本
```
现代浏览器（大部分电脑都有的不用担心）
- 推荐Chrome或Edge浏览器，对WebGL和摄像头API支持更好

步骤一：获取应用代码

从AI Studio的界面下载代码压缩包（通常是ZIP格式）
解压到本地任意目录

通过终端进入解压后的项目目录：

bash 复制代码

cd /path/to/particle-hand-3d  # 替换为实际的项目路径

步骤二：安装项目依赖

该应用使用了多个现代前端库，包括React、Three.js和MediaPipe等，需要通过包管理器安装：

在项目根目录下运行安装命令：
bash 复制代码
```
npm install
```
等待安装完成（首次安装可能需要几分钟）
- 安装过程中会显示依赖包的下载和安装进度
- 成功完成后，项目目录会新增node_modules文件夹（存放所有依赖）

常见问题解决：

若安装失败，尝试使用管理员权限运行终端

网络问题可尝试切换网络或使用npm镜像：npm install --registry=https://registry.npm.taobao.org

依赖冲突可删除node_modules和package-lock.json后重新安装

步骤三：启动开发服务器

完成上述准备后，即可启动本地开发服务器：

运行启动命令：
bash 复制代码
```
npm run dev
```

等待服务器启动，成功后会显示类似信息：

复制代码

VITE v6.2.0  ready in 300ms
➜  Local:   http://localhost:3000/
➜  Network: http://192.168.1.100:3000/

打开浏览器，访问终端显示的本地地址（通常是http://localhost:3000）

步骤四：授权与使用

首次访问应用时，需要完成摄像头授权：

浏览器会弹出摄像头权限请求，点击"允许"
稍等片刻（首次加载需要下载MediaPipe模型）
应用启动后会显示：
- 全屏的3D粒子场景
- 左下角的摄像头实时画面（带手部关键点标记）
- 当你将手放在摄像头前时，粒子会跟随手部动作形成3D效果

注意：如果摄像头无法启动，检查：

浏览器权限是否已授予

其他应用是否占用了摄像头

防火墙设置是否阻止了浏览器访问摄像头

项目结构解析

了解项目结构有助于你更好地理解和定制应用：

复制代码

particle-hand-3d/
├── components/          #  React组件
│   ├── HandParticles.tsx  # 3D粒子效果组件
│   └── VideoOverlay.tsx   # 摄像头画面与手部标记组件
├── node_modules/        # 项目依赖
├── dist/                # 生产构建产物（构建后生成）
├── .env.local           # 环境变量（需手动创建）
├── index.html           # 入口HTML文件
├── App.tsx              # 应用主组件
├── package.json         # 项目配置与依赖
└── vite.config.ts       # 构建工具配置

核心功能模块：

MediaPipe：处理手部检测与关键点识别
Three.js：创建3D场景和粒子效果
React + React Three Fiber：UI框架与3D渲染集成

常见问题与解决方案

应用启动后白屏
- 检查浏览器控制台（F12）是否有错误
- 确认Three.js相关依赖是否安装成功
- 尝试清除浏览器缓存
手部追踪不灵敏
- 确保光线充足
- 保持手部在摄像头可见范围内
- 避免背景过于复杂
端口被占用
- 更改vite配置中的端口：修改vite.config.ts中的server.port
- 或终止占用端口的进程后重新启动
依赖安装错误
- 升级Node.js到最新稳定版
- 尝试使用yarn替代npm安装依赖

总结

通过以上步骤，你已经成功将Gemini生成的3D手部粒子追踪应用部署到了本地计算机。这个过程涵盖了从环境准备到应用运行的完整流程，适用于大多数基于Vite和React的现代Web应用部署。

这类AI生成的应用不仅展示了大语言模型在代码生成方面的能力，也为开发者提供了快速实现创意的新思路。你可以在此基础上进一步定制粒子效果、调整交互方式，甚至结合Gemini API添加更智能的交互功能。

希望本文能帮助你顺利运行和探索这个有趣的3D交互应用，开启更多创意开发的可能性！

人工智能：一分钟将Gemini生成应用部署到本地计算机的保姆级教程

引言