全网爆火的Gemini圣诞树，我们帮你做出来了(附模版) !

点击上方卡片关注【秋叶 AI 知识星球】

回复：98

免费领取 Gemini 同款圣诞树

作者：苼苼

编辑：苼苼

文末免费领取 Gemini 同款圣诞树~

大家好，这里是秋叶编辑部~

最近爆火的 Gemini 生成圣诞树的交互视频，你刷到了没？

对！就是这个能散开、能贴照片、还能把对象、家人直接「挂」树上的 AI 圣诞树。

我们边刷视频边感叹：这要是能自己做一个，圣诞节的时候送对象、送家人，送自己，多有仪式感呐。

结果下一秒我们路过工位……

发现秋叶研发老师@欣眉，正在低头猛敲键盘，屏幕上赫然就是：同款圣诞树！

啊这？这是……做给谁的呢？

当然是做给你们的呀~

为了让大家都能无门槛玩起来，欣眉老师直接爆肝迭代了30 个版本， 最终把这个玩法做成了一个 html圣诞树网页版，不用 Gemini，直接打开网页，就能拥有同款圣诞树。

文末免费领取秋叶独家原创 AI 圣诞树 html 版！

接下来，我们就把欣眉老师为大家整理的圣诞树完整教程双手奉上。

跟着一步一步来，你也能亲手做出一棵属于自己的电子圣诞树。

当然了，如果你想解锁 AI 的更多创意玩法，用办公提效、甚至副业变现，那就来《秋叶 AI 智能办公 3 天实战营》学一学，

我们将会带你深入学习豆包、即梦、飞书、扣子等AI工具的实用办公技能和创意玩法！

秋叶 AI 智能办公 3 天实战营

办公提效｜自媒体创意｜副业变现

现在限时免费学

立刻扫码报名

还能免费领取

秋叶独家 AI 学习资料包

6 套飞书多维表格模板

60+ 秋叶自研智能体

先把圣诞树搭出来

我们用到的工具是 Gemini Cavas。

然后，直接对它发出这样一段指令

你是一位精通 Three.js、WebGL和计算机视觉的创意前端开发专家。任务目标：编写一个包含 HTML、CSS和JavaScript的单文件应用。该应用需要结合Three.js来创建一个基于鼠标控制的3D粒子圣诞树。

具体要求：圣诞树的形态精细，为3D立体效果整体氛围：主色系为哑光绿+金色+圣诞红色；有电影感的辉光与光量效果。交互逻辑：圣诞树有合拢态、散开态、照片放大态。通过鼠标来控制交互。合拢态和散开态的差距不大。散开态时，照片漂浮在圣诞树散开的粒子中，像悬浮在宇宙中的颗粒。鼠标动作：左移/右移=切换形态；往上推=散开；鼠标画圈=旋转画面；单击鼠标=放大照片交互要求:状态之间平滑切换，带有过渡动画。可能用到的技术栈:Three.js、WebGL

这一步的目标只有一个：先有一棵树，别管好不好看。

所以你会发现，Gemini 最初给到的结果，大概是这样的「丑丑的锥状物。」

别急，这很正常。

AI 创作的第一步，基本都是：先搭骨架，再磨细节。

接下来，我们要做的就是告诉它：你想要一棵什么样的圣诞树。

比如这样

视觉重构：一棵满载礼物的树不是一个空心的圆锥，而是构建一棵有层次的树。 树叶层：深绿色、有蓬松感的粒子，粒子的颗粒大小错落，构建树的主体体积。 氛围灯带：白色彩带呈螺旋状从树顶垂下，带有流动光效。 主题挂饰：是随机分布的3D粒子，圣诞老人、麋鹿、袜子、礼物盒。

这一次，效果明显就不一样了。

树叶有层次了， 灯带开始绕着树旋转，挂饰也不再是随便糊上去的感觉。

如果你还觉得哪里不满意，就继续发指令，改到满意为止。

到这里，一个静态版圣诞树就完成了。

接下来，我们要让它动起来。

让圣诞树动起来

这一步就是让圣诞树从静态展示，变成一个可以互动的作品。

它需要能合拢、能散开、能在空间中漂浮，并且支持添加和查看照片。

我们把这些指令一次性丢给 Gemini

接下来我们来完善一下交互功能和其它的页面。 圣诞树一共有3个形态：圣诞树状态： 1.合拢态（初始状态）：所有元素收拢、聚合为一个圣诞树圆锥体，不需要显示照片仅显示粒子。 2.散开态：所有元素在空间中无序漂浮、散落，显示照片 3.照片放大态：在背景保持散开态的同时，放大单张照片，此时照片呢不需要增加额外的辉光效果，确保照片清晰可见即可。 我希望把散开态的光球中多一些金色的球，少一些白色的。另外就是切换至散开态之后，希望可以在其中的几个光球里显示我的照片，单击鼠标后，照片会放大，这个放大过程要丝滑流畅。为了实现上述功能，我需要你添加一个上传图片的功能。

基本上，这一步做完 一棵能合拢、能散开、还能放照片的圣诞树，就已经成型了。

是不是比想象中简单？ 全程都是在对话。

在我们的实测中，你可能还会遇到一些小卡点，比如：

✔ 图片分布太集中，不好点；

✔ 鼠标一滑，树就突然散开，不太好控制。

没关系，处理方式还是继续跟 Gemini 说清楚你的不爽点。

你会发现，它真的会自己想办法帮你改。

抠细节，让画面更有氛围感

到这一步，其实已经有 80% 完成度了。

剩下的，就是让它更好看、更有氛围一点。

比如你觉得左上角的 UI 太普通？那就直接说

指令：「设计要灵动一些，参考哈利波特那种魔法感。」 「左上角的UI要换成中文，字体颜色用白色。」

再比如，整体氛围还不够？那就继续加细节

1、照片在分散状的时候排布可以再开一点，然后在分散状态的时候散布的星云围绕中心轴缓慢公转。 2、呼吸动画：使用 Tween.js 在状态切换时动态改变粒子的 size 属性，让树在散开时有一种“能量爆发”的膨胀感 3、双重旋转：在散开状态下，我们保留了鼠标控制视角的逻辑，同时给所有粒子增加了一个极慢的自动公转。这造成了一种即使我不动，世界也在流转的梦幻效果。 4、全景落雪 ：不再是漆黑的背景，而是漫天飘洒的细腻雪花，营造冬日氛围。5、魔法光标拖尾 ：鼠标移动时会留下一串金色的魔法粒子拖尾，增强交互感，就像挥舞魔杖一样。 6、呼吸闪烁：树上的彩灯会随着时间随机闪烁、忽明忽暗，让树看起来是活的。

加点音乐，仪式感拉满

最后，我们给圣诞树加一段背景音乐，指令也很简单

添加一个圣诞背景音乐，默认播放。播放音乐的按钮要放在右上角，不用加文字说明，展示一个音乐图标就可以。

音乐音色这里，我们还特意补充了八音盒的声音描述，让 AI 更好理解你想要的感觉。

金属簧片被凸起音筒拨动时的振动，发出的声音干净纯粹，带有金属的明亮感，常被形容为「清凉悦耳的叮咚声。」

最后的效果就是打开页面，音乐自动响起，右上角按钮随时开关。

如果遇到「AI 说加了，但实际没响」的情况，也别慌。继续追问，它会给你解决方案。

为了更好触发音乐播放，我们还加了一个启动页面，记得让启动页和圣诞树页面的文字风格保持一致。

到这里，一棵完整、可互动、能放照片、带音乐的圣诞树，就真的做好了。

下一次，不管是圣诞树、生日贺卡，还是任何你想做的互动小作品，你都可以用同样的思路，再来一遍。

你有没有发现 ？很多过去只有程序员才能完成的小程序、交互作品，现在普通人也可以通过指挥 AI 亲手做出来。

这正是 AI 带给普通人的最大变化，它正在不断打破能力边界。

如果你希望把这种能力从好玩的创作，进一步用到真实的工作场景中，用 AI 实现效率提升，甚至发展成新的 AI 技能和变现能力。

那就来《秋叶 AI 智能办公 3 天实战营》学一学。

秋叶金牌导师会带你，用豆包、飞书、扣子、即梦， 把 AI 真正用进高频办公场景：

AI PPT：一键生成PPT，汇报不再熬夜；

AI 数据分析：自动分析、总结，把复杂数据可视化；

AI 设计：不会设计，也能做出专业物料；

AI 写作：方案、总结、内容输出效率全面提升；

更重要的是，你学到的不是某一个工具，而是一整套可复用的 AI 工作方法，帮你逐步打通 AI 技能进阶与副业变现的可能路径。

现在报名，还可以免费领取：

秋叶独家 AI 学习资料包

6 套飞书多维表格模板

60+ 秋叶自研智能体

秋叶 AI 智能办公 3 天实战营

✅直播授课：专业导师在线教学

✅实战练习：边学边练，融会贯通

✅助教答疑：1V1 群内点评，随时答疑

扫码免费学

关注【秋叶 AI 知识星球】

回复关键词【98】

免费领取

Gemini 同款圣诞树