先看效果

在线访问地址，同时提供 PC 端和移动端版本。

这个效果模仿自一些出现在 Awwwards 上的 3D 网页动画。核心技术使用的是 Three.js。

比较有趣的是：在实现这个效果之前，我几乎没有任何 Three.js 的经验。实际开发过程中，大约花了 4 小时了解基本概念，并简单学习了一些 shader 的基础知识。

实现这个效果所依赖的核心工具只有两个：

• AI
• 一种更适合 AI 编程的思考方式（通常被称为 vibe coding）

过去常见的开发流程通常是：

学习 → 编写代码 → 调试 → 再学习

而在 AI 参与的情况下，流程往往变成：

理解效果 → 拆解算法 → 提示 AI → 快速迭代

在这种模式下，开发者最重要的能力不再只是 手写代码，而是 如何与 AI 协作解决问题。下面用一个具体例子说明。

为什么很多人用 AI 写网页特效会失败

假设我们希望实现这样一个效果：

多张图片围绕形成一个 3D 圆柱画廊（cylindrical gallery），用户滚动页面时产生动画。

很多人给 AI 的提示词大致如下：

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

要求：
1. 页面中展示多张图片卡片
2. 图片在 3D 空间中排列
3. 用户滚动页面时产生动画
4. 整体效果类似一个圆柱型画廊
5. 动画流畅自然

请给出完整代码。

如果使用这样的提示词，大多数情况下 AI 很难生成正确的效果。即使使用较强的模型，也经常会失败。

原因很简单：

提示词缺少关键的算法信息。

换句话说，问题并不在 AI，而在于描述过于模糊。

AI 编程的关键：提供「思考路径」

后来我换了一种提示方式，效果明显不同。

# 角色
你是一名 Three.js 工程师，实现一个 Cylindrical Image Gallery。
# 要求
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

关键区别在于：

提示词中提供了核心算法。

也就是这三行代码：

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

只要 AI 获得这个信息，生成正确结果的成功率就会大幅提高。

「Vibe Coding」并不等于不会写代码

很多人误解了 vibe coding 的含义。

一种常见误解是：

什么都不懂，让 AI 自动写代码。

这种方式在实现简单功能时可能有效，但在复杂动画或图形效果中往往很难成功。

目前更有效的方式是：

开发者提供关键算法，AI 负责实现细节。

例如，一些常见的视觉算法包括：

• 圆柱布局算法
• 无限滚动算法
• 图片弯曲 shader
• 粒子系统算法

下面是一个简化版的 圆柱布局引擎示例：

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 可以更容易生成完整的实现代码。

一个简单的 AI 网页开发流程

当我看到一个视觉效果出色的网站时，通常会按照以下步骤进行分析：

• 观察动画效果
• 寻找对应的算法模型
• 将算法提供给 AI
• 生成并迭代代码

在当前阶段的 AI 工具环境中，这是一种效率较高的开发方式。

结语

AI 正在改变前端开发的方式。

在很多场景下，开发者的角色逐渐从 代码编写者转变为 问题拆解者与系统设计者。就可以用更短的时间实现更复杂的视觉效果。

附录

• 图片螺旋效果 AI 素材库