一个提示词，30 秒生成 3D 网站（实测 6 个）

不少 3D 网站提示词库要么直接卖提示词文本，要么只放演示视频，不公开具体怎么写。下面这 6 条提示词可以完整复制：直接粘给 Claude，或者改一行后用于 Lovable、Bolt 和 Cursor。它们都经过真实模型运行，其中 5 条生成了可正常运行的 Three.js 页面；下方每张截图都来自实际渲染，不是效果示意图。

6 个现在就能复制的 3D 网站提示词

每条提示词都要求生成一个单文件 HTML 页面，并通过 CDN 加载 Three.js。这个限制很实用：单个文件可以直接在任意浏览器本地打开，也方便交给开发者或贴进自定义代码块；同时还能避免模型把依赖和导入拆散到整个项目里，让场景保持自包含。

1. 粒子星系首屏

Create a single-file HTML page with an interactive 3D particle galaxy hero
section using Three.js (load it from a CDN). Requirements: about 50,000
particles forming a spiral galaxy that slowly rotates; particle colors shift
from warm amber at the core to violet at the outer rim; add OrbitControls so
visitors can drag to rotate and zoom; overlay a centered hero headline that
says "Build Beyond Flat" with a short subline and a CTA button; set
pointer-events: none on the overlay container and pointer-events: auto on
the CTA button so the galaxy stays draggable behind the text; dark
background #0a0616; handle window resize. Output ONLY the complete HTML
file in a single code block.

生成耗时 27 秒，输出 3,692 个 Token。星系会旋转，拖拽环绕正常，覆盖层上的按钮也能点击。唯一的实际问题是副标题刚好压在明亮的星系核心上，可读性较差。测试笔记部分给出了修复方式。

2. 滚动驱动的产品展示

Create a single-file HTML page: a scroll-driven 3D product showcase using
Three.js loaded from a CDN. Requirements: a floating chrome torus-knot
centered in a fixed full-screen canvas; the page has 4 full-screen scroll
sections, and as the user scrolls the camera orbits the object a full 360
degrees while the object material color smoothly transitions per section
(silver, deep blue, emerald, copper); each section shows a headline and
one-line copy pinned to the left over the canvas; smooth interpolation (lerp)
on scroll so motion feels damped; dark studio look with two colored
spotlights and a soft ground shadow; handle resize. Output ONLY the complete
HTML file in a single code block.

这是 5 个成功案例中最重的一次生成：耗时 63 秒，输出 7,023 个 Token，也是视觉效果最出色的一个。滚动会带动镜头环绕物体，材质颜色也会按要求在各区块间切换：

提示词中要求的阻尼式 lerp 插值也被准确执行。整体运动不是生硬的滚动劫持幻灯片，而是有种沉稳、昂贵的代理商官网质感。

3. GLSL 流体渐变背景

Create a single-file HTML page with a full-screen animated WebGL fluid
gradient background using a custom GLSL fragment shader with Three.js loaded
from a CDN. Requirements: slow-moving organic blobs blending deep blue,
purple and coral, driven by a time uniform and simplex-style noise in the
fragment shader; add subtle film grain in the shader; overlay a centered
glass card (backdrop blur) with a white headline "Ship Immersive Sites", one
subline, and two buttons; the animation must stay smooth on a laptop (single
quad, no postprocessing passes); handle resize. Output ONLY the complete HTML
file in a single code block.

31 秒，3,830 个 Token，一次通过。single quad, no postprocessing passes 这一句是性能护栏：少了它，模型常会调用 EffectComposer 和 Bloom 等后处理，在集显设备上很容易拖垮帧率。

4. 3D 作品集穿梭浏览（最难搞的一个）

Create a single-file HTML page: a 3D portfolio using Three.js from a CDN.
Six floating project cards (rounded planes with placeholder gradient
textures and project titles rendered onto the card texture) arranged along
a gentle curve in 3D space. As the user scrolls, the camera flies forward
along the curve, bringing each card into focus one at a time; the camera
must keep the focused card fully in frame with comfortable margin and never
pass through a card; the focused card scales up slightly. Neighboring cards
stay partially visible for depth. Add subtle fog, a dark background, damped
scroll interpolation. Clicking a focused card opens a link. Handle resize.
Keep the code compact: reuse one card-building function, no comments.
Output ONLY the complete HTML file in a single code block.

这个提示词跑了 3 次，最终依然无法上线。但也正因为如此，才值得把它公开：卡片确实渲染出来了，镜头却跑到了卡片背后，标题变成镜像。第一次生成在文件尚未完成时就撞上了 16,000 Token 输出上限。第二次加入了 keep the code compact 这一句——这也是它出现在提示词里的原因——卡片可以显示，但镜头直接穿过了它们。第三次修复了穿模，却丢掉了镜头与滚动的联动。镜头路径编排加上每张卡片的纹理，对模型而言确实比前面的场景更难；要么预留一轮调试时间，要么简化成带悬停状态的静态弧形卡片网格。

5. 交互式产品查看器

Create a single-file HTML page: an interactive 3D product viewer using
Three.js from a CDN. Center a stylized wireframe-free geometric product
stand-in (a beveled cube or capsule) on a pedestal. Right-side panel with
three color swatches and a metal/matte toggle that update the material live;
OrbitControls limited to horizontal rotation; soft three-point studio
lighting and a contact shadow. Keep the panel plain HTML/CSS overlaying the
canvas. Handle resize. Output ONLY the complete HTML file in a single code
block.

一次通过，耗时 66 秒，输出 7,719 个 Token。色卡和金属/哑光切换都能实时更新材质，模型还额外加了一个贴心细节：说明旋转被锁定在水平轴上，以保证产品始终处于合适的画面范围内。

6. 单页 3D 企业官网

Create a single-file HTML page: a one-page site for a design studio with
Three.js from a CDN. Sections: hero, services, work, contact. A single
low-poly abstract shape floats top-right of the hero and slowly rotates;
as the user scrolls into each section the shape morphs its scale and color
to match that section accent. Sections otherwise use clean HTML/CSS
(no heavy 3D per section) so the page stays fast. Smooth scroll, mobile
friendly, handle resize. Output ONLY the complete HTML file in a single
code block.

耗时 62 秒，输出 7,419 个 Token。模型自行起了一个工作室名称，完成了 4 个区块，并将低多边形二十面体准确放在要求的首屏右上角。我们第一次跑这条提示词时碰到了 8,000 Token 输出上限，结果在中途被截断；如果通过 API 调用模型，针对整页网站的提示词最好把输出上限设为 16,000 Token 或更高。

实测跑下来，结果到底怎样

每条提示词只在同一个模型上跑了 3 次，这不是基准测试，只能作为 2026 年年中提示词生成 3D 效果能力的一次抽查。测试条件如下：2026 年 7 月 17 日通过 API 调用 claude-sonnet-5，使用默认设置，不设系统提示词；在搭载 Apple 芯片的 MacBook 上，以桌面版 Chrome、1280×720 分辨率完成渲染。所有成功案例中，模型都自行选择了公共 CDN 上的 Three.js r128 UMD 构建版本。

5 个成功页面里唯一的视觉缺陷，是提示词 1 的副标题正好落在星系最亮的位置，几乎无法阅读。补一句跟进提示就能解决：Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core.。这也是这批测试反复出现的规律：3D 场景本身通常能生成正确，后续迭代主要花在排版、覆盖层对比度，以及作品集案例中的镜头编排上。

这个规模下，成本几乎不是问题。整轮测试共生成 9 次，包含作品集的重试，合计约 46,000 个输出 Token，成本远低于 1 美元；我们通过 AIReiter 运行，它以官方每 Token 价格的五分之一转售 Claude API 访问，因此即使多轮反复调整，成本也只是零头。

自己写 3D 网站提示词：保留这 5 个部分

所有一次通过的提示词都有 5 个共同组成部分。把它们都写进去，首次生成成功的概率会明显提高。

1. 一个明确的场景主体。 比如星系、环面纽结或渐变场。我们的测试和社区中常见的案例都表明：当一个页面里塞进多个互不相关的 3D 功能时，模型就很容易开始遗漏要求。
2. 一个运动驱动方式。 可以是时间驱动，例如 slowly rotates、driven by a time uniform；也可以是滚动驱动，例如 as the user scrolls, the camera orbits。务必明确指定，单写“动画”通常只会让模型选一个平淡的效果。作品集失败案例也说明了一点：滚动驱动物体相对可靠，而让滚动驱动镜头沿路径穿行于多个物体之间，就更容易出问题。
3. 交互方式。 在本次所有成功案例里，OrbitControls 都能可靠实现拖拽旋转。如果画布上覆盖了文字，要明确要求覆盖层容器使用 pointer-events: none，按钮使用 pointer-events: auto；否则文字层会吞掉本该交给场景的拖拽和点击事件。
4. 覆盖层文案。 标题文字要用引号写清楚。没有指定的文案，模型会填入一些泛泛的口号，最终还是得自己替换。
5. 性能与体积护栏。 粒子数量、single quad, no postprocessing 或 low-poly 能控制页面性能；keep the code compact 则有助于让输出不超出 API Token 上限。我们的 9 次运行中，有 2 次是在代码质量尚未成为问题前就先撞上输出上限。

如果你想让模型生成真正的 3D，而不是用扁平 CSS 模拟效果，可以使用这些关键词：Three.js、particle system、GLSL fragment shader、OrbitControls、scroll-driven camera、torus-knot、lerp、fog、point lights。这些词之所以有效，是因为它们对应真实 API 名称，模型能调用训练中见过的库用法，而不是临场瞎编。

一个更省事的代码粘贴法

如果你想要的效果很难靠文字描述，还有另一种办法：在 CodePen 找一个完成度高的 Three.js 效果，把原始代码直接粘进 AI 工具，只提示 Add this 3D animation to the hero.。模型会把这段代码适配到你的技术栈中，比如 React 组件、构建配置和现有区块结构；而这通常才是最繁琐的部分。Builder.io 在他们的教程中就展示过这种方法：使用一个 50,000 粒子的星球动画，并采用同样的 pointer-events: none 分层修复方案。

想做出获奖网站级别的精致感，这往往是杠杆最高的路径：着色器数学来自真正调过细节的人，AI 只负责集成进你的项目。

哪些工具能直接吃这些提示词

上面 6 条提示词本身不依赖特定工具，只要能编写和预览 HTML/JS 的工具都能运行。真正的差别在于输出形式和代码归属，以下信息核查于 2026 年 7 月 17 日：

其中两个工具值得特别说明。VULK 的卖点是能生成真实的 React Three Fiber 代码，也就是可交互的 WebGL 场景，而不是一个循环播放的视频头图；从它展示的案例来看，这一点是成立的。对于任何“AI 3D 网站生成器”，在付费前都应确认它输出的是实际代码，还是视频头图。如果你更想浏览现成提示词而不是自己写，MotionSites 维护了一个面向 Lovable、Bolt、Cursor 和 Claude 的分类提示词库。其中一部分可以免费复制，其余内容需要订阅：

提示词的能力上限在哪里

r/lovable 和 r/web_design 讨论区里经常有人问：只靠一条提示词，能不能复刻 mont-fort.com 或 Noomo Agency labs 那种网站？坦白说，不能。那些网站依赖定制 GLTF 模型、经过艺术指导的灯光，以及专门编写的着色器；这些资产无法凭一段文字直接变出来。提示词能够帮你实现的是这类网站的机制——滚动驱动镜头、着色器背景、阻尼运动——但几何体仍会是占位内容。换成真实模型文件可以缩小一部分差距，但灯光、材质和移动端降级方案仍是实打实的设计工作。上面的作品集穿梭失败案例，其实也是这个问题的缩影：提示词越接近经过精密编排的多物体场景，就越需要人工迭代。

大多数失败生成都可以归入以下 3 类，每类都有一句修复提示：

• 黑屏，且看不到报错。 通常是 ES module 与 CDN 导入方式不匹配。修复提示：Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps.。（r128 是本次测试中模型自行选择的版本，目前仍可使用；较新的 Three.js 版本已经移除了 UMD 路径，固定版本可以避免这种不匹配。）
• 桌面端流畅，手机端卡顿。 往往是对笔记本没问题的粒子数压垮了手机。修复提示：Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.
• 3D 场景正常，但页面里的任何元素都点不了。 画布或覆盖层吞掉了事件。修复提示：Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.

还有一个来自本次测试的问题：3D 卡片上的文字呈镜像显示。 这是因为镜头看到了平面的背面。修复提示：Make card materials double-sided with the texture mirrored correctly, or rotate cards to always face the camera.

FAQ

有免费的 3D 网站提示词吗？

有。本文这 6 条都是完整且可免费复制的提示词，DocsBot 和 MotionSites 的免费套餐也提供更多选择。付费提示词库主要卖的是数量和经过测试的多样性，而不是另一种本质不同的提示词。

这些提示词能用于 Lovable 或 Bolt 吗？

可以，只要做一个调整：去掉“单文件 HTML”的要求，因为这些平台会搭建 React 项目。其余部分——场景主体、运动驱动、交互方式和性能护栏——都可以直接保留。

使用 3D 网站提示词需要懂 Three.js 吗？

生成时不需要，迭代时懂一点会更好。上面的提示词已经嵌入必要的 Three.js 术语。了解 OrbitControls 或片元着色器是什么，能让你提出精确的修改要求，而不是盲目重新生成。

做 3D 网站，哪个 AI 工具最好？

如果只是生成单文件特效或首屏区块，直接用 Claude：源码由你保留，按 Token 付费。如果需要带后端的托管网站，可以选 Lovable 或 Bolt 的免费套餐；如果你特别想导出 React Three Fiber 代码，则可以考虑 VULK。

3D 首屏会影响性能或 SEO 吗？

只有在你不加控制时才会。将 3D 限制在一个场景内，加入前面提到的移动端性能护栏，并像这 6 条提示词一样，把标题和正文作为画布上的真实 HTML 文本。爬虫能读取文字层，而 Core Web Vitals 主要取决于页面还加载了哪些其他资源。