当前位置：首页 > news >正文

天啊！0 基础复刻网页顶级特效！Vibe Coding 正确姿势居然是这样的！

news 2026/4/4 9:12:05

先看效果

在线访问地址包含了移动端版本和 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 };}
}