大多数 3D 网站提示词库要么会对提示词文本本身收费，要么只给你看演示视频，却对具体文案守口如瓶。这里有六个完整提示词：你可以直接原样粘贴到 Claude，或为 Lovable、Bolt 和 Cursor 调整其中一行。六个都经过了实时模型测试；其中五个返回了可正常运行的 Three.js 页面，而且下面的每一张截图都是这些渲染结果之一，而不是模型图。
六个你现在就可以复制的 3D 网站提示词
每个提示都要求一个单文件 HTML 页面，并通过 CDN 加载 Three.js。这个限制很重要：单个文件可以在任何浏览器中本地打开，也便于交给开发者或粘贴到自定义代码块中，而且它会迫使模型保持场景自包含，而不是把导入分散到整个项目中。
1. 粒子星系主视觉
创建一个单文件 HTML 页面，包含一个交互式 3D 粒子星系 hero
区块，使用 Three.js（从 CDN 加载）。要求：大约 50,000
个粒子形成一个缓慢旋转的螺旋星系；粒子颜色从核心处的温暖琥珀色逐渐过渡
到外缘的紫罗兰色；添加 OrbitControls，以便访客可以拖动来旋转和缩放；叠加一个居中的 hero 标题，内容为 "Build Beyond Flat"，并带有一行简短副标题和一个 CTA 按钮；在 overlay 容器上设置 pointer-events: none，并在 CTA 按钮上设置 pointer-events: auto，以便星系在文本后方仍可拖拽；深色
背景 #0a0616；处理窗口大小调整。仅输出完整的 HTML
文件，放在一个代码块中。
在 27 秒内生成，输出了 3,692 个 token。星系在旋转，拖拽环绕视图可以正常工作，而且按钮在覆盖层下仍然保持可点击。一个真正的缺陷是：副标题落在明亮的银河核心上，难以阅读。修复方法见下方测试说明。
2. 滚动驱动的产品展示
创建一个单文件 HTML 页面：使用从 CDN 加载的 Three.js 制作一个由滚动驱动的 3D 产品展示。要求：一个悬浮的镀铬环面结，居中显示在固定的全屏画布中；页面包含 4 个全屏滚动区块，随着用户滚动，摄像机围绕物体完整旋转 360 度，同时物体材质颜色按区块平滑过渡（银色、深蓝色、祖母绿、铜色）；每个区块在画布左侧固定显示一个标题和一行文案；滚动时进行平滑插值（lerp），使运动感觉有阻尼；深色工作室风格，带有两盏彩色聚光灯和柔和的地面阴影；处理窗口大小调整。仅输出完整的 HTML 文件，放在一个单独的代码块中。
这是五个工作生成中最繁重的一次（63 秒，7,023 个输出 token），也是最令人印象深刻的结果。滚动会驱动相机围绕对象移动，而且材质会按要求在每个部分精确重新着色：
阻尼 lerp 插值也得到了尊重；这种运动具有机构网站那种沉重、昂贵的感觉，而不是被滚轮劫持的幻灯片展示。
3. GLSL 流体渐变背景
创建一个单文件 HTML 页面，使用自定义 GLSL 片段着色器和从 CDN 加载的 Three.js，实现一个全屏动画 WebGL 流体
渐变背景。要求：缓慢移动的有机色块融合深蓝、
紫色和珊瑚色，由片段着色器中的时间 uniform 和 simplex 风格噪声驱动；在着色器中加入细微的胶片颗粒感；叠加一个居中的玻璃卡片（backdrop blur），其中包含白色标题“Ship Immersive Sites”、一
行副标题和两个按钮；动画在笔记本电脑上必须保持流畅（单个四边形，无后处理通道）；处理窗口大小调整。仅输出完整的
HTML 文件，放在一个代码块中。
31 秒，3,830 个 token，一次通过。 “single quad, no postprocessing passes” 这条是性能护栏：没有它，模型往往会倾向于使用 EffectComposer 和 bloom pass，这些会让集成 GPU 的帧率大幅下降。
4. 3D 作品集飞行浏览（那个曾奋力反抗的）
创建一个单文件 HTML 页面：使用 CDN 中的 Three.js 实现一个 3D 作品集。
六张悬浮的项目卡片（圆角平面，带占位渐变纹理和渲染在卡片纹理上的项目标题）沿着 3D 空间中的一条柔和曲线排列。随着用户滚动，摄像机沿着曲线向前飞行，每次将一张卡片带入焦点；摄像机必须始终以舒适的边距将聚焦的卡片完整保留在画面中，并且绝不能穿过任何卡片；当前聚焦的卡片会轻微放大。相邻卡片保持部分可见，以增强深度感。添加细微的雾效、深色背景、带阻尼的滚动插值。点击聚焦的卡片会打开一个链接。处理窗口大小调整。
保持代码简洁：重用一个卡片构建函数，不要注释。
仅输出完整的 HTML 文件，放在单个代码块中。
这次花了三轮，还是无法交付，而上面的截图说明了我们为什么还是要发布它：卡片能渲染出来，但摄像机停在了它后面，所以标题看起来是镜像的。第一轮在文件中途就超过了我们 16,000 token 的输出上限。第二轮（带上了“保持代码紧凑”这句，也就是为什么提示里会有那一行）渲染出了卡片，但把摄像机直接穿了过去。第三轮修复了裁剪问题，却丢失了摄像机与滚动的联动。摄像机路径编排加上每张卡片的纹理，对模型来说确实比上面的场景更难；请预留一次调试时间，或者简化为带悬停状态的静态弯曲网格。
5. 交互式产品查看器
创建一个单文件 HTML 页面：使用来自 CDN 的 Three.js 制作一个交互式 3D 产品查看器。将一个风格化、无线框的几何产品替代物（带倒角的立方体或胶囊体）居中放置在底座上。右侧面板包含三个颜色色块和一个金属/哑光切换开关，可实时更新材质；OrbitControls 仅限水平旋转；柔和的三点式工作室照明和接触阴影。保持面板为覆盖在画布上的纯 HTML/CSS。处理窗口大小调整。仅输出完整的 HTML 文件，并放在一个单独的代码块中。
首次尝试通过，66 秒，7,719 tokens。色板和金属/哑光切换会实时更新材质，模型还主动添加了一条贴心说明：脚注解释旋转被锁定在水平轴上，以保持产品居中构图。
6. 一页式 3D 商业网站
创建一个单文件 HTML 页面：一个设计工作室的一页式网站，使用来自 CDN 的 Three.js。章节：hero、services、work、contact。在 hero 的右上方有一个单一的低多边形抽象形状漂浮并缓慢旋转；当用户滚动进入每个章节时，该形状会改变其缩放和颜色以匹配该章节的强调色。除此之外，各章节使用简洁的 HTML/CSS（每个章节不使用繁重的 3D），以保持页面流畅。平滑滚动，适配移动设备，处理 resize。仅输出完整的 HTML 文件，放在一个代码块中。
62 秒，7,419 个 token。模型编造了一个工作室名称，构建了四个部分，并且准确地在要求的位置放置了一个低多边形二十面体。我们对这个提示的第一次尝试触发了 8,000 token 的输出上限，并且返回时被截断——如果你通过 API 调用模型，请将输出限制设置为 16,000 token 或更多，以适配整页提示。
当我们运行它们时发生了什么
每个提示词在单一模型上运行三次只是一个轶事，不是基准测试；可将其视为对 2026 年中期提示词到 3D 生成现状的一次抽查。方法说明：于 2026 年 7 月 17 日通过其 API 使用 claude-sonnet-5，默认设置，不使用 system prompt，结果在 Apple 芯片 MacBook 上的桌面版 Chrome 中以 1280×720 渲染；在成功的运行中，模型自行从公共 CDN 选择了 Three.js r128 UMD 构建版本。
| 提示词 | 输出 token | 时间 | 结果 |
|---|---|---|---|
| 粒子星系主视觉 | 3,692 | 27.4s | 首次运行即正常；副标题对比度过低 |
| 滚动驱动展示 | 7,023 | 63.4s | 首次运行即正常，4 个颜色阶段都正确 |
| GLSL 流体渐变 | 3,830 | 31.6s | 首次运行即正常，在测试用 MacBook 上未见掉帧 |
| 作品集飞越 | 3 runs | 84–163s | 无法交付：先是 token 溢出，然后是摄像机裁剪，最后是标题镜像 |
| 产品查看器 | 7,719 | 65.8s | 首次运行即正常，支持实时材质切换 |
| 单页商业网站 | 7,419 | 62.4s | 在将输出 token 上限调高后重跑一次即正常 |
这五个正常工作的页面中唯一的视觉缺陷是：提示 1 的副标题正好落在银河最亮的部分上，变得几乎无法阅读。一条后续提示修复了它——Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. 这些运行的整体模式都是这样：3D 场景本身往往能做对，而迭代预算则主要花在排版、叠加层对比度，以及（在作品集案例中）镜头编排上。
在这个规模下，成本根本不是问题。完整的测试运行——包括 portfolio 重试在内的九代，大约 46,000 个输出 token——花费远低于一美元；我们通过 AIReiter 运行，它以官方按 token 价格的五分之一转售 Claude API 访问权限，所以即使是一次顽固的迭代会话，成本也仍然只是零钱级别。
如何编写你自己的 3D 网站提示词
通过测试的提示词都有五个部分。保留这五个部分，你首次通过的几率就会大幅提高。
1. 一个场景主体。 一个星系、一个环面结、一个渐变场。在我们的运行和大多数共享的社区示例中，要求在一页里包含多个互不相关的 3D 特征的提示，是模型开始遗漏要求的地方。2. 一个运动驱动因素。 要么是时间（slowly rotates，driven by a time uniform），要么是滚动（as the user scrolls, the camera orbits）。要明确指出是哪一种；仅写“animated”会让模型随便选一个无聊的方案。根据作品集失败案例的说明：用滚动驱动一个*对象*是可靠的，用滚动驱动一条*在对象之间路径上移动的摄像机*时就会出问题。3. 交互。 我们测试中每一次成功运行，OrbitControls 的拖拽旋转都有效。如果你在画布上叠加文本，请要求在覆盖层容器上使用 pointer-events: none，并在按钮上使用 pointer-events: auto —— 否则文本层会吞掉本应作用于场景的拖拽和点击。4. 覆盖层内容。 用引号给出确切的标题文本。模型会用泛泛的标语去填补未指定的文案，而这些你最终还是得替换。5. 性能和尺寸护栏。 粒子数量、single quad, no postprocessing，或 low-poly 可以保持页面快速；keep the code compact 可以让输出保持在 API token 限制内——我们的九次运行中有两次在出现任何代码质量问题之前就因为输出上限而失败了。
能推动模型朝真正的 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 在 their walkthrough 中记录了这个技巧，展示了一个 50,000 粒子行星动画，包括相同的 pointer-events: none 层叠修复。
当你想要获奖网站般的精致效果时，这是最高杠杆的路径：着色器数学来自一位对其进行了调优的人，而 AI 只负责集成。
哪些工具接受这些提示词
上面的六个提示与工具无关；任何能够编写并预览 HTML/JS 的工具都可以运行它们。工具之间的差异在于输出形式和代码所有权（已于 2026 年 7 月 17 日核实）：
| 工具 | 免费路径 | 你将获得 | 代码所有权 |
|---|---|---|---|
| Claude (chat or Claude Code) | 免费层级 | 原始单文件 HTML 或完整仓库 | 归你所有，完整源码 |
| Lovable | 免费层级 | 托管的 React 应用 | 可导出 |
| Bolt | 免费层级 | 托管的全栈应用 | 可导出 |
| Cursor | 免费层级 | 你自己的仓库中的代码 | 归你所有，完整源码 |
| VULK | 无 — 3 天入门价从 €3.99 起，套餐从 €19.99/月 起 | 生成的 React Three Fiber 网站，PostgreSQL 后端 | 完整导出到 GitHub |
| Spline Omma | 候补名单/限量 | 添加到现有网站上的 3D 图层 | 平台托管 |
其中有两个值得一提。VULK 的卖点是，它能生成真正的 React Three Fiber 代码——是交互式 WebGL 场景，而不是循环播放的视频头图——而且它的展示站点也证明了这一点。在为任何“AI 3D 网站构建器”付费之前，真正的代码输出与视频头图之间的区别，正是你需要确认的关键。如果你更愿意浏览提示词而不是自己编写，MotionSites 维护了一个按类别整理的库，面向 Lovable、Bolt、Cursor 和 Claude。其中一部分可免费复制，其余内容则需订阅才能查看：
提示词的局限在哪里
在 r/lovable 和 r/web_design 讨论串中，一个反复出现的问题是：合适的提示词是否能复现像 mont-fort.com 或 Noomo Agency labs 页面这样的站点。坦白地说：仅靠提示词不行。这些站点建立在自定义 GLTF 模型、艺术指导过的光照以及定制着色器工作之上——这些资产不是文本提示词能凭空生成的。提示词能为你提供的是这些站点的*机制*（滚动驱动的摄像机、着色器背景、阻尼运动），并配上占位几何体。替换成真实的模型文件只能弥合其中一部分差距，但其后的光照、材质以及移动端回退方案仍然是真正的设计工作。上面我们作品集飞行穿越的失败也是同样的道理：提示词越接近编排好的多对象场景，就越需要人工迭代。
三种失败模式涵盖了大多数错误生成，每种都有一个单行修复方案：
- 黑屏，没有可见错误。 通常是 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 路径，因此锁定版本可以避免不匹配。） - 桌面端很流畅，手机上却卡顿。 适合笔记本的粒子数量。修复提示：
在宽度小于 768px 的屏幕上将粒子数量减半，并将 devicePixelRatio 上限设为 2。 - 3D 场景可运行，但页面上没有任何内容可点击。 canvas 或覆盖层正在吞掉事件。修复提示：
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.
常见问题
是否有免费的 3D 网站提示词？
是的。本文中的这六个提示已完整提供，可自由复制，DocsBot 和 MotionSites 的免费套餐还提供更多。付费库主要为你提供数量和经过预先测试的多样性，而不是另一种不同类型的提示。
这些提示词在 Lovable 或 Bolt 中有效吗？
是的，但有一个调整：去掉“单文件 HTML”这一要求，因为那些平台会脚手架化 React 项目。其他一切都保持不变——场景主体、运动驱动、交互和性能护栏都可以直接迁移。
我需要了解 Three.js 才能使用 3D 网站提示词吗？
不用于生成，而是用于少量迭代。上面的提示词嵌入了必要的 Three.js 词汇。了解 OrbitControls 或片段着色器是什么，有助于你提出精确的修改，而不是盲目重新生成。
适合 3D 网站的最佳 AI 工具是什么？
对于单文件效果或 hero section，Claude 直接使用：你保留源文件并按 token 付费。对于带后端的托管站点，使用 Lovable 或 Bolt 的免费套餐，或者如果你明确想要导出的 React Three Fiber 代码，则使用 VULK。
3D 英雄区会影响性能或 SEO 吗？
只有在你允许的情况下才会这样。将 3D 限制在一个场景内，添加上面的移动端护栏，并像所有六个提示那样，将你的标题和正文文案保留为画布上方的真实 HTML。爬虫会读取文本层，而 Core Web Vitals 主要取决于页面还加载了什么。