用 AI，0 基础复刻网页顶级特效！😀

ai超级个人
0 阅读5分钟

先看效果

螺旋效果.gif 在线访问地址包含了移动端版本和 PC 版本。

这个效果其实是我模仿 Awwwards 顶级网站的 3D 特效复刻出来的。核心框架使用的是 Three.js。

更夸张的是：

我对于 Three.js 的知识储备几乎是 0。好吧，实际上花了 4 个小时了解基本概念和学习 Shader（点击文字，会跳转到学习的视频（B站），请关注一下，是我的账号，因为有 100 粉丝后 B 站才能解锁发合集的功能， 我会将更好的酷炫动效视频教程分享给你 ）。

而实现这个效果的核心工具只有一个：AI + 正确的 Vibe Coding 方法。

过去是：学习 -> 写代码 -> 调试 -> 再学习。

现在是：理解效果 -> 拆解核心算法 -> 提示 AI -> 快速迭代

核心能力不再是手写代码。而是：如何和 AI 协作。接下来我用一个最关键的例子说明。

为什么很多人用 AI 写网页特效总是失败？

假设我们要实现这样一个效果：图片围绕形成一个 3D 圆柱画廊（如上面展示的动画效果一样，）

大多数人给 AI 的提示词是这样的：

使用 Three.js 做一个 3D 图片画廊。

要求：

1. 页面中展示多张图片卡片
2. 图片在 3D 空间中排列，看起来有层次感
3. 用户滚动页面时，图片会产生移动动画
4. 整体效果类似一个环绕的圆柱型的画廊
5. 动画需要流畅自然

请给出完整代码。

如果你这样问 AI。我可以很负责地说：90% 情况下生成不出来。即使你用的是：Claude, GPT 最强的模型。

原因很简单：提示词太模糊。,而模糊的本质是确实对这类效果知之甚少。

AI 编程的关键：给 AI “思考路径”

后来我换了一种提示方式。效果完全不一样。提示词如下:

# 角色(Role)

你是一名 Three.js 工程师。
实现一个 Cylindrical Image Gallery。

# 要求(Requirement)

1. 使用 Three.js
2. 图片使用 PlaneGeometry 提供的免费图片
3. 将图片均匀排列在一个圆柱表面

位置计算公式：

const angle = (index / total) * 2π
const x = cos(angle) * radius
const z = sin(angle) * radius

# 技术栈
html + css + javascript + threejs

# 输出
完整 HTML

你会发现一个关键区别：

我给了 AI 一个核心算法。

也就是这个：

const angle = (index / total) * 2π
const x = cos(angle) * radius
const z = sin(angle) * radius

只要 AI 有这个信息。生成效果成功率会暴涨。

真正的 Vibe Coding：不是“不会写代码”

很多人误解了 Vibe Coding。他们以为是：什么都不懂，让 AI 写代码，其实这是错的，起码目前为止做简单的效果没问题，复杂的效果还是远远不够的。

所以目前最佳的 Vibe Coding 实现酷炫的网页效果这一领域而言，需要提供一定的。核心算法素材。

比如我自己平时就会收集一些常见特效算法，例如：

  • 圆柱螺旋布局算法
  • 无限滚动算法
  • 图片弯曲 Shader（如上面展示的案例，图片是弯曲环绕的）

例如这段代码j就是 圆柱螺旋布局算法：

class RingLayoutEngine {
  calculatePosition(index, scrollProgress, config) {
    const angle = (index / config.perLevel) * Math.PI * 2 + scrollProgress * 0.03;

    const x = Math.cos(angle) * config.radius;
    const z = Math.sin(angle) * config.radius;

    let y = (baseY - scrollProgress * 0.8) % fullHeight;

    return { x, y, z, angle };
  }
}

注：文章末尾附录，会有整个网页的 ai 代码素材的链接。

复刻酷炫网页的公式

当我看到一个酷炫网站时。我只需要：

  1. 观察效果
  2. 找相似算法
  3. 给 AI 当案例
  4. 生成代码

这就是 AI 时代，当前 AI 发展阶段的酷炫网页开发流程。

对于我实现的网页特效，

如何获取更多素材

目前来说还是需要懂一定代码的人去提取，当然有兴趣的同学可以加入我的酷炫网页成长群（免费），一起沟通分享，我也会偶尔分享一些类似的代码片段。

当然也有付费的群，很便宜，目前是 199 终身（后续人多了一定会涨很多），然后至少每个月 4 个 awwwards（聚集了世界顶级网页特效的网站） 级别效果的网站源码。还有很多动效方面的学习资料。我的能力覆盖 ai 全栈开发，还有高级前端开发等等内容，完全可以作为福利分享到咋们的酷炫网页成长群。

如果你是完全编程基础很少，或者 0 基础，我也很愿意分享你很多教程，补一些基础的编程基础会更好的帮助你跟 ai 协作。

未来更多分享内容

未来我会持续分享 AI + 前端开发的内容，例如：

如果你对这些内容感兴趣，可以关注我的公众号，包括在小红书、知乎、x 等平台的账号，都叫：ai超级个人。

我是一个不断进步的人，并且会一直进步下去，还有一些隐藏技能还在提升中，例如英语的听说，坚持已经两年了，我有自己的一套方法论，如果能成，也会单独拿来分享。

最后，我希望做的事情很简单：在 AI 时代，帮助更多人掌握真正的技术杠杆。

我们一起成长。一起做出更酷的东西！加油！

附录

avatar
文章
阅读
粉丝