我使用 Gemini Vibe Coded 了一个 3D 作品集

Source: Dev.to

这是一篇提交给由 Google AI 主办的“新年·新你”作品挑战赛的作品

关于我

嗨，我叫 “the bugged dev” 👋

和很多人一样，我在今年初立下了一个简单的目标：学习使用 AI 构建网站，并在 Twitter 上分享我的进展。最初只是一个小小的决心，结果却演变成了 vibe‑coding 许多 3D 网站，最终形成了这个完整的作品集。

// Detect dark theme
var iframe = document.getElementById('tweet-2015677079040426134-135');
if (document.body.className.includes('dark-theme')) {
  iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2015677079040426134&theme=dark";
}

Twitter 社区的反馈远超我的预期，我会在今年剩余的时间里继续创作。

作品集

Live:

我的构建过程

我使用 React.js、Three.js 和 Google Gemini 1.5 Pro（在 Google AI Studio 中）完成了这个项目。一切始于我在 Twitter 上看到 Wahaj Khan 的一张精美的 hero‑section 设计稿。

// Detect dark theme
var iframe = document.getElementById('tweet-2015852029466574859-540');
if (document.body.className.includes('dark-theme')) {
  iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2015852029466574859&theme=dark";
}

因为我只有页面顶部的设计稿，所以必须自己想办法完成其余部分。

我采用了一套自己创建的工作流：编写非常长且细致的提示词，告诉 AI 如何精准复现图像的外观。实际上，我会让 AI 帮我撰写这些庞大的提示——让 AI 为 AI 生成更好的指令。

当我对第一部分满意后，就会针对下一个功能单独编写提示。我的指令保持严格，以确保 AI 在同一设计系统内工作，不会产生混乱。

对于 3D 部分，我会提供其他灵感设计图，并明确告诉 AI 使用哪些 Three.js 技术来实现几何体。

你看到的每一个 3D 模型都是由 AI 以代码形式生成的。 这是一段看似枯燥但效果极佳的逐步过程。

我最自豪的地方

我最自豪的是 hero 区域和技能区的 Three.js 元素——每个技能都显示在一个 3D 硬币上。这些都是使用着色器实现的，而我以前从未自己动手过。我本想花整整一年时间学习 Three.js，却一直抽不出时间。现在，借助 AI，我可以在不到手工完成时间一半的时间里构建这些创意网站。

此外，流畅的动画和整体 UI 也是重要的收获。我与 AI 合作，确保网格线和布局能够正确对齐并在所有设备上正常工作。仅凭 AI 就实现如此细致的效果，让我非常满意。

我的下一个目标是进一步完善 hero 模型，并加入基于滚动的动画，使其更加交互。

下次 vibe‑coded 应用见！ :D