我用 Gemini 3 手搓了一个“赛博电风扇”试用地址: https://eee1023.github.io/3d-f

试用地址: eee1023.github.io/3d-fan/

今天突发奇想，既然天气（虽然是冬天但心里）有点燥热，不如让 AI 给我写个电风扇吹吹。于是我找来了 Google 的 Gemini 3 模型，开启了一场“赛博造物”之旅。

这不仅仅是一个代码生成的记录，更像是一个产品经理（我）和全栈工程师（Gemini）之间的极限拉扯。

第一阶段：这就……是个风扇？

我给出的需求很简单直接：

“帮我写一个网页电风扇，可以开关、调1 2 3挡，还可以左右摇头。”

Gemini 反应很快，刷刷刷几下，HTML、CSS、JS 全套代码就出来了。打开一看，嘿，还真有模有样！

复古造型，蓝色的扇叶。
按钮能点，1/2/3 档转速肉眼可见地变快。
还有一个“SWING”开关，点了之后风扇头确实在左右晃。

但是！ 作为一个对生活品质有要求的人，我发现了一个大问题：这摇头太假了！ 它就像一个纸片人在那里左右倾斜（Rotate Z），完全没有那种“转头”的空间感。

于是我直接怼了回去：

“你这摇头不对啊，风扇不够立体，你知道风扇怎么摇头的吗？”

第二阶段：3D 化的“降维打击”

被我“嫌弃”之后，Gemini 显然是去反思了。它立马意识到我需要的是 3D 旋转。

它没有找借口，直接对 CSS 进行了重构：

引入 3D 空间：给容器加了 perspective，让网页有了纵深感。
真·摇头：把之前的平面旋转改成了 rotateY，现在风扇头是真实地绕着轴心左右转动。
细节狂魔：
- 给电机加了后盖，转头的时候能看到侧面。
- 前网罩和后网罩拉开了距离（translateZ），有了层次感。
- 连底座的阴影都变得更真实了。

再次刷新页面，哇！这次是真的“立”起来了。看着它在屏幕里摇头晃脑，我甚至感觉到了屏幕里吹出来的风。

第三阶段：注入灵魂的“白噪音”

看着这个 3D 风扇转啊转，我总觉得缺了点什么。对，是声音！没有“呼呼”声的风扇，是没有灵魂的。

“我想要电风扇转动的时候伴随声音，你实现一下。”

这次 Gemini 给了我一个惊喜。它没有让我去下载什么 mp3 文件（那样太 low 了，还得加载），而是直接用 Web Audio API 写了一段代码，实时生成声音！

它利用“布朗噪声（Brown Noise）”模拟低频的轰鸣声。
动态音效：
- 1档：轻微的嗡嗡声。
- 2档：明显的风声。
- 3档：狂暴的呼啸声！
- 关机时，声音还会随着扇叶减速慢慢淡出。

成果展示

纯代码绘制（没有一张图片）。
真 3D 建模（CSS 3D Transform）。
自带音效（Web Audio API）。
交互丝滑的赛博电风扇。

这一通操作下来，我不得不感叹：Gemini 3 不仅代码写得快，理解能力和"审美"也是在线的。从一个平面的"纸片风扇"，到被我挑刺后进化成 3D 版，最后加上听觉反馈，它完美地执行了我的每一个脑洞。

第四阶段：极限拉扯，功能狂飙

但故事到这里还没结束。我突然觉得，既然都做到这份上了，不如再"折腾"一下？

飘带与惯性：让风"看得见"

"你这个飘带好假，完全没有飘动的效果。"

第一版的飘带只是僵硬地旋转，毫无灵动感。于是 Gemini 重新设计了物理模型：

使用 rotate、skewX、scaleY 组合，模拟布料的扭曲和拉伸
不同档位有不同的飘动幅度：1档微微飘，3档几乎被吹平
加上渐变色和圆角，看起来像真的丝绸

还有物理惯性：关机后，扇叶不会立刻停下，而是会滑行 4 秒钟才慢慢停止，非常真实。

夜间模式与俯仰调节

Night Mode：点击月亮图标🌙，整个界面变暗，按钮发出红色荧光，赛博朋克感拉满
Tilt Control：新增滑杆，可以上下调节风扇角度（±20度）

小狗登场：意外的"剧情"

"我觉得还差一条小狗，享受这个风扇的凉爽，外面很热。"

这个需求一出，Gemini 立刻开始"造狗"：

纯 CSS 绘制的卡通小狗，有头、耳朵、身体、腿
风扇关闭时：小狗热得冒汗（💧汗珠动画）
风扇开启时：小狗伸出舌头，耳朵随风扇档位疯狂扇动
- 1档：轻轻扇
- 3档：耳朵几乎要飞起来，舌头被吹得更长！

但问题来了……

位置大战：小狗你别挡着我的风扇！

接下来的对话变成了一场"空间规划"的拉锯战：

第一次：小狗挡住了风扇
第二次：还是挡住了
第三次："哎哟喂，你没听懂吗，小狗挡住我的风扇按钮了！"

我甚至上传了截图给它看。Gemini 终于理解了，把小狗移到了风扇的左边。

室内外对比：营造氛围感

"再优化一下画面，小狗在风扇旁边很凉快，外面太阳很热烈，整个画面有对比感。"

Gemini 的解决方案：

室内：深灰色墙壁，凉爽的蓝色光晕（风扇开启时）
窗户：右上角加了一个带木质边框的窗户，里面是：
- 橙红金黄的渐变天空
- 巨大的太阳☀️在跳动
- 热浪在窗户里扭曲飘动

视觉对比瞬间拉满：外面火炉，里面冰爽！

沙发与女孩：温馨的最后一笔

"再加上一个沙发，里面还有一个短发女孩子。"

Gemini 又开始"造人"：

紫色渐变的沙发，有靠背和扶手
短发女孩，穿着粉色上衣和蓝色牛仔裤
女孩会眨眼，风扇开启时头会轻轻摆动（放松状态）

然后又是一轮位置调整……

"小狗和女孩子都坐到沙发上，不要和风扇重叠。" "把沙发、人和狗放到风扇左边，不要挡住风扇。"

经过多次调整，最终布局：

左边：女孩和小狗坐在紫色沙发上
中间：电风扇（完全清晰可见）
右上角：窗外的炎热太阳

最终成果

一个完整的夏日午后场景：

🪟 窗外太阳炙烤，热浪滚滚
🏠 室内深色墙壁，凉爽舒适
💨 3D电风扇在中间，可以摇头、调速、俯仰
🛋️ 女孩和小狗坐在沙发上，享受凉风
🎵 风扇转动时有真实的声音
🎀 红飘带随风飘动
🌙 还有夜间模式可以切换

技术栈：

纯 HTML/CSS/JavaScript
CSS 3D Transform（3D效果）
Web Audio API（实时音效生成）
复杂的 CSS 动画（飘带、耳朵、惯性）

开发时长：约1小时（包括无数次"你挡住我的风扇了"）

感想

这次体验让我深刻感受到 Gemini 3 的几个特点：

理解力强：从"摇头不对"到"3D旋转"，它能准确理解我的意图
执行力高：每次需求都能快速实现，代码质量很高
有耐心：被我反复挑刺（尤其是位置问题），它没有崩溃，而是一次次调整
有创意：Web Audio API 生成声音、飘带的物理模型，都是它主动提出的优化方案

当然，也有一些小问题：

空间位置的理解有时需要多次沟通（或者上传截图）
对"不要挡住"这种负向需求，需要更明确的指令

但总体来说，这是一次非常愉快的"人机协作"体验。我像一个产品经理一样提需求，Gemini 像一个全栈工程师一样实现，最终我们一起"造"出了一个有趣的作品。

部署上线

做完之后，我想让别人也能看到这个作品。Gemini 给我推荐了几种部署方案。

方案选择

最初我问能不能部署到 GitBook，但 Gemini 指出 GitBook 主要用于文档，不太适合这种交互式应用。它推荐了更合适的方案：

GitHub Pages（我选择的方案）：

✅ 完全免费
✅ 部署简单
✅ 自动生成网址
✅ 支持自定义域名

部署步骤

方法一：网页上传（最简单）

访问 GitHub 并登录
创建新仓库：
- 点击右上角 "+" → "New repository"
- 仓库名：3d-fan（或任意名称）
- 选择 Public（公开）
- 点击 "Create repository"
上传文件：
- index.html
- style.css
- script.js
- 在新仓库页面，点击 "uploading an existing file"
- 将 fan 文件夹里的所有文件拖拽上传
- 点击 "Commit changes"
启用 GitHub Pages：
- 进入仓库的 Settings（设置）
- 左侧菜单找到 Pages
- Source 选择 main 分支
- 文件夹选择 / (root)
- 点击 Save

等待几分钟，访问：

https://your-username.github.io/3d-fan/

方法二：命令行（适合熟悉 Git 的人）

# 1. 初始化仓库
git init

# 2. 添加文件
git add fan/

# 3. 提交
git commit -m "Add 3D fan project"

# 4. 连接到 GitHub
git remote add origin https://github.com/your-username/3d-fan.git

# 5. 推送
git push -u origin main

然后在 GitHub 仓库设置中启用 Pages。

方法三：一键部署（最快）

使用 Vercel 或 Netlify：

直接拖拽 fan 文件夹
自动生成网址
支持自动部署

最终效果

部署完成后，任何人都可以通过网址访问我的 3D 电风扇

下次再热的时候，我就把这网页打开，开到 3 档，看着女孩和小狗在沙发上吹风，听着那呼呼的风声……嗯，心静自然凉。🌬️