---
layout: post.njk
source: https://baoyu.io/blog/gpt-6-astra-peach-blossom-land
speaker: baoyu.io
title: 我用 GPT 6 Astra 做了一个 3D 版的《桃花源记》（文中含提示词） | 宝玉的分享
date: '2026-09-19'
summary: 作者利用GPT 6 Astra将《桃花源记》转化为可交互的3D网页，通过真人朗诵同步与Codex工程优化，实现了“循文入境”的沉浸式文学体验。文章分享了从原型生成到工程化收尾的完整工作流，并提供了可复用的AI提示词模板。
area: PAI
category: ai-workflow
tags:
- gpt-6-astra
- 3d-web-development
- prompt-engineering
- immersive-narrative
- codex
people:
- baoyu
- li-lihong
companies_orgs:
- cctv
products_models:
- gpt-6-astra
- codex
- three.js
media_books: []
draft: true
status: evergreen
---
宝玉的分享
Menu
See all posts
Published on 2026-09-19
# 我用 GPT 6 Astra 做了一个 3D 版的《桃花源记》（文中含提示词）
作者：
宝玉
先放成品：
在线体验：3D 版《桃花源记》：桃源·豁然开朗
打开后建议戴上耳机，点右下角的“循文入境”——不要只停在首页拖视角，完整体验从这个按钮开始。
你会打开一个可以实时拖动、切换视角、控制进度的 3D 网页，从“缘溪行”出发，坐船穿过桃林，入洞、豁然开朗、进村、做客、辞别，一直到“后遂无问津者”。
做完忍不住想：当年上学时要是有这东西，这篇课文理解起来、背起来应该容易不少。
## 第一步：用 GPT 6 Astra 把课文变成 3D 世界
我用的是 ChatGPT Pro 里的 GPT 6 Astra，写了一套比较长的提示词（附在文末），核心要求是能“循文入境”——读者要跟着文章顺序和人物行动完整经历全文，原文里的空间关系必须真实连通，不能靠黑屏和瞬移切换。
GPT 6 Astra 交付了一个可以直接打开的 HTML 文件，把全文拆成了 20 幕，支持连贯体验和逐章慢读，也能在“原文＋白话”“只看原文”“只看白话”之间切换。
但第一版有个问题：朗诵用的是系统自带 TTS——能听，但不好听。
## 第二步：换成真人朗诵
我试了几个 TTS，单独听都还行，放进场景里就不对。《桃花源记》不是说明书，声音一旦过于平、过于干净，画面做得再好，体验也会掉下来。
最后找到了央视李立宏老师的真人朗诵。我把音频转录成 SRT 字幕带上时间戳，然后把 MP3 和 SRT 一起发给 GPT，只补了一句：
> 帮我把朗诵替换为我提供的 MP3，句子和时间对应可以参考 SRT。
效果明显好了很多。GPT 按照 SRT 时间做了完整同步：章节切换、镜头进度、当前句子高亮、暂停继续和跳转，都跟着真人朗诵走。尤其是开头的序奏和“豁然开朗”后的音乐留白，给画面留了停顿——文学体验里，停顿本身也是叙事的一部分。
## 第三步：让 Codex 做工程化收尾
第二版体验不错，但 GPT 把整段 MP3 用 Base64 嵌进了 HTML，文件膨胀到 5.6 MB，而且背景音效不够自然。于是交给 Codex 优化：
> 帮我优化一下，MP3 作为独立文件；再找两个更好的溪水、鸟鸣环境音；进入“循文入境”后自动打开朗诵音频。
Codex 把朗诵提取成独立文件，换上了真实的溪流声和林间鸟鸣，两条环境音独立循环、低音量混合，HTML 从 5.6 MB 缩回约 777 KB。到这一步才算真正完成。
## 几点体会
成品质量取决于你有没有把判断标准说清楚。 我的提示词里没写“画面要唯美”“交互要丰富”之类的形容词，重点是反复规定：空间关系怎样才算忠实、镜头为什么要这样走、哪些情节不能省略、哪些文化符号绝对不能混进来，给它一套审美和验收标准。
声音也是交互的一部分。 朗诵的气息、重音和停顿直接决定镜头该怎么走、场景该停多久。
第一次生成不必承担所有工作。 GPT 6 Astra 适合把想法迅速做成完整原型，Codex 适合接着处理文件结构、资源拆分和浏览器测试。一个造世界，一个收拾成可交付的作品。
## 提示词可以复用
下面的提示词是一个模板。保留前面关于文学理解、3D 空间、叙事镜头、交互和测试的部分，只替换最后的课文与场景描述就行。比如做《小石潭记》，把重点换成“隔篁竹—闻水声—伐竹取道—下见小潭”的视线和路线，水的清澈、石底形态、竹林遮挡、鱼影和幽邃气氛写清楚，AI 会帮你继续细化。
完整 ChatGPT 会话：制作 3D 文学场景网页
## 完整提示词
```
你是一位兼具文学理解能力的场景艺术导演、叙事交互设计师和资深网页 3D 开发者。
请根据文末提供的【课文全文】和【场景描述】，直接制作一个高完成度、可在浏览器中实时交互的 3D 文学场景网页。作品不仅要能自由观景，还要支持"循文入境"：读者跟随原文的顺序、人物的行动和视线的变化，完整经历文章，而不是只看几个景点或读一组说明卡片。
使用 HTML、CSS、JavaScript，可使用 Three.js 等成熟网页 3D 技术。交付可实际打开的网页成品，不要只给方案、伪代码、片段组件或效果描述。不要生成图片，不要用照片、全景图、视频或视差背景冒充真实 3D。非关键设计细节自行作出一致选择，不必逐项向我确认。
优先级：原文含义与空间关系、全文体验完整性 > 叙事与镜头连续性 > 默认画面构图与光照 > 关键景物细节 > 附加功能。功能应服务于作品，不要堆出一个按钮很多、场景粗糙的技术演示。
一、先理解文章，再建造世界
使用我提供的全文作为原文依据；如果输入是附件或链接，先完整读取。不要只根据标题、摘要或熟悉的名句制作，也不要把自己补写的文字当作原文。
先在内部梳理文章的时间顺序、空间顺序、人物、活动、情绪变化，以及明确写出的数量、位置和因果关系。再建立"原文段落—叙事阶段—场景位置—镜头路径—人物或环境变化"的对应关系，以此组织实现。无需先停下来输出一份设计方案。
按文章的自然节奏分幕，不固定章节数量，不强行一句一镜。原文顺序和内容应完整保留；相邻句子可以共用一个镜头，但开头、转折、离开、结局与后记不能因为不够好看就被省略。
叙事文章跟随人物行动；游记跟随路线和视线；写景文章跟随观察层次、方位与时序；诗歌可以按意象和情绪推进。不要给所有文章套上"入口—村庄—出口"的同一种结构，也不要把比喻和想象都解释成真实地理。
原文明确的内容必须忠实。没有交代的细节可以克制推演，但保持时代、地域、建筑、衣着、工具和植物的一致性。不要混搭不相关的文化符号，不要宣称是某个真实地点或历史遗址的精确复原。
二、建立可以理解、真正存在的三维空间
先设计地形、建筑尺度、水系、道路和人物动线，再布置景物。室外场景要从前景、中景自然延伸到远景，不能成为悬浮岛、盆景、带底座的沙盘或突然结束的地板；室内场景要具有真实的墙体、门窗、进深和可理解的内外关系。
原文中相邻、可行走的区域必须实际连通。山洞、门洞、廊道、桥梁、船只等关键空间要有真实几何和合理尺度。需要经过的通道必须存在，不能用黑屏、穿墙或传送掩盖缺失的空间。
对于跨越很远地点、很长时间、回忆或后记的内容，可以使用明确的叙事切镜，并用简短文字交代时空变化。不必为了"连续"伪造原文没有的地理连接。区分正常的叙事转场与本应可行走却没有实现的道路。
水体应嵌入地形，道路应有合理坡度，人物脚底落在地面上。建筑、植物、水位和季节相互协调；远景通过真实地形和空气透视延续，而不是用浓雾掩盖空场景。
三、把"循文入境"做成核心体验
默认打开时先呈现经过设计、最能代表作品意境的优美全景，并提供醒目的"循文入境"入口。开始后从文章开头推进到篇末，不要让用户先找菜单，也不要只演示最有名的几句。
用一条可暂停、回看和跳转的叙事时间线协调原文显示、镜头、人物动作、环境变化和可选朗读。每幕都要回答：此时读到哪里、人在何处、正在看什么、发生了什么。不要只是镜头在场景上空移动、字幕却与画面无关。
镜头应体现文章的观看方式和情绪：远望时看见层次，行进时出现遮挡与引导，接近物体时看见细节，转折处有空间揭示，交谈时保留人物关系，结尾给意境留出停顿。避免全程高空俯瞰、匀速绕圈、突然转向或大幅摇晃。
路线必须避开山石、墙壁、屋顶、树干和地面。需要步行的段落采用合理的行走高度；乘舟、登高、入室等视角变化要有依据。场景连续段落之间平顺衔接，不能每读一句就跳到另一个位置。
重要事件要在场景中有所表现。例如来访、相遇、招待、劳动、停留、辞别、留下标记和再次寻找，应通过人物位置、姿态、道具或环境状态的变化呈现，而不是仅靠说明文字代替。已经发生的变化在回看或跳转时，应能按剧情正确重建，不能重复生成道具或残留后续人物。
提供两种节奏：
"连贯体验"：自动推进，每幕时长根据文字和动作需要安排，不给所有章节设置相同秒数。
"逐章慢读"：每幕结束后停留，等用户继续。停留时可观察环境，但关键剧情不自行进入下一幕。
提供暂停／继续、上一幕、下一幕、重新开始、退出导览、章节目录与进度回看。拖动环顾不能直接退出导览；允许在当前镜头基础上小幅观察，并能回正。暂停时镜头与朗读保持在同一叙事位置，不要继续错位推进。
开启朗读时，镜头和动作的节奏应适配实际朗读，不要画面已经演完、语音还长时间继续。需要等待时保留自然的停留构图与轻微生活动作。不要为了跟上语音而突然加速穿越场景。
四、让原文陪伴体验，而不是覆盖体验
在画面边缘用小面积、清晰易读的字幕呈现当前原文，突出当前正在体验的句子。提供"原文＋白话""只看原文""只看白话"的切换，默认白话简短，不把画面变成课件。
章节目录应能查看全文并跳转到对应场景；每一段原文都有可到达的体验位置。可以点击少量关键词看释义，点击少量关键景物看对应原文与简短解释。说明默认收起，不要满屏浮动卡片和标注。
朗读默认关闭，由用户主动开启。可使用浏览器可用的中文语音；没有合适语音或播放失败时明确提示，并保留完整的无声体验。按实际可获得的朗读事件进行句段同步，不假装实现了未经验证的逐字精准对齐。环境音同样默认静音，不依赖用户填写密钥才能完成基本体验。
五、让重要景物值得近看，让关键段落真正动人
整体风格服从输入的场景描述。未指定时，采用精致、清晰、具有材质层次的风格化 3D。若采用体素或低多边形语言，应保留细小几何面的表现力，而不是粗大积木、低分辨率像素滤镜或简单几何体的随意堆放。
为文章最重要的景物与段落分配更多细节。近景应经得起停下和靠近，中景要有清楚的活动与构图，远景要有层次，不要平均分配模型和装饰。重要景物不能只靠换颜色辨认：植物应有枝叶和生长结构，建筑应有用途与生活痕迹，人物应有可识别的衣着轮廓与不同动作。
如果输入强调花林、落花、雨雪、瀑布、萤火等效果，不要仅仅增加粒子数量。要同时设计形状、材质、前中后景分布、疏密节奏、受光与运动轨迹，并使效果扎根于场景：花从枝头飘落、风有方向、水面有承接、地面有积留，而不是把屏幕当作撒彩纸的平面。
例如花林近景需要可辨认的花瓣、花蕊、花苞和透空的枝条；落花应有零星飘落、局部成簇、随风回旋、掠过镜头、落地或顺水漂流的不同层次。远处简化，近处精细。增强美感时保留视野与呼吸空间，不要用满屏发光粒子代替文学意境。
默认镜头要有经过设计的前景框景、中景主体和远景延伸，具有疏密变化与留白。光线有方向，阴影柔和，色彩有主次；不要用单一色罩把所有物体染成同一种颜色，不要让关键人物或建筑被前景遮住。
动态保持有节奏、非机械重复，关键文学段落可以出现更明显但克制的视觉变化。可选的天气或时段切换应同步影响天空、雾、主光、环境光与局部灯火；不适合文章的模式不必硬加，剧情要求的时间与季节优先。
六、操作、工程与运行要求
支持鼠标拖动观察、滚轮缩放、触屏拖动与双指缩放，以及重置镜头、暂停动态、隐藏界面和保存当前画面。提供少量精心设计的观景机位。自由移动不是必需项；若实现，必须限制穿墙、穿地和进入不可见背面。
界面克制，字体、配色与作品气质协调。桌面和手机都要给场景留出主要面积，字幕与控制区不能互相遮挡。隐藏界面后必须有容易发现的恢复方式。
尽量交付单个 HTML 文件，CSS 与业务 JavaScript 内嵌。优先使用程序化几何与材质，不依赖外部照片或现成模型。允许固定版本、相互兼容的成熟依赖；能内嵌则内嵌，必须联网时明确说明。不要把访问密钥写入文件。
合理使用实例化、空间分组、远近细节分级与视野裁剪，控制阴影、反射、粒子和分辨率成本。提供高画质与轻量模式，手机默认轻量。尊重"减少动态效果"偏好。加入加载反馈、资源失败提示与 WebGL 不可用提示。没有实际测量，不承诺固定帧率。
代码内部应将课文与章节配置、场景构建、叙事状态、镜头、声音和界面职责分开。避免散落的计时器驱动剧情，让暂停、恢复、重播与跨章跳转稳定一致。
七、完成后自行验收，再交付
在支持浏览器测试的环境中，实际运行网页并检查，不要只做语法检查。至少检查默认构图、开场与关键视觉段落、所有章节的到达与跳转、真实通道、关键人物活动、结尾，以及暂停、回看、触屏布局、声音回退和截图功能。
重点检查：全文是否遗漏；镜头是否穿模或眩晕；朗读与场景是否错位；跳转后剧情状态是否正确；植物与季节是否冲突；水体与道路是否相交错误；是否出现重复网格、闪烁、过曝、阴影条纹、错误遮挡；核心景物近看是否仍然粗糙。
使用真实浏览器截图检查效果，发现明显问题先修正。没有完成的测试要如实说明，不能把预期效果或未运行的检查写成已验证结果。
最终交付：可实际打开的 HTML 文件或当前环境支持的交互预览；环境支持时附真实浏览器渲染截图；简短说明入口、主要操作、运行条件与测试限制。不要只输出代码块让我手动拼装，不要在成品之前停留于方案阶段。
==================== 以下为本次输入 ====================
【作品名称】
[填写网页作品名称；也可留空，由你根据文章拟定。]
【课文信息】
篇名：[填写]
作者：[填写；未知则留空]
时代、地域或必要背景：[选填。没有依据的背景不要自行断言。]
【课文全文】
[在这里粘贴完整原文，保留段落与标点。也可提供可读的附件或链接。]
【场景描述】
[用自然语言描述希望还原的世界，不必提供技术方案。
建议写清：主要空间与行进方向；外部和内部、远处和近处的关系；重要建筑、植物、人物与活动；季节、天气、光线与美术风格；希望出现的默认构图。
没有特别要求的部分，依据课文作克制、一致的艺术推演。场景描述若与原文明确信息冲突，优先忠实原文。]
【特别强调与禁止项】
最希望做出感染力的段落：[选填]
需要重点近看或互动的景物：[选填]
必须准确保留的数量、方位、路线或情节：[选填]
不希望出现的元素与表现方式：[选填]
其他偏好：[选填，例如以手机阅读为主、偏安静、偏电影化、指定体素风格。]
```
场景：
```
【场景描述】
作品名称：《桃源 · 豁然开朗》。
这是一片藏在群山之中的完整田园世界。采用现代精细体素与柔和风格化 3D，结合中国山水长卷的疏密、留白和远近层次。默认氛围为春日清晨，薄雾刚散，光线清晰而柔和。
空间依次为：沿溪分布的外部桃林、桃林尽头的停舟山口、真实狭窄的步行通道、群山围合的开阔田园、村后的桑树竹林与层层远山。桃林与内部桑竹明确区分。渔舟留在入口外，不能直接驶入村落。
默认打开时，从洞口内侧略有高度的斜向视角看见田园全景。前景有岩石和少量枝条框景，一条小径向村落延伸；中景以平旷的春日田地、池塘、水渠和错落屋舍形成重心；远景逐渐过渡为桑竹、坡地和山林。不要为了展示所有区域而把山体劈开。
开始“循文入境”后，从溪上行进进入桃林，经历发现、好奇、舍舟、入山和空间骤然打开；随后走入田间与村舍，观察劳动、鸡犬与老幼生活，经历相遇、做客、交谈、停留与辞别。继续完成归舟、留下标记、报告太守、重新寻找和篇末后记，不要在田园全景处提前结束。郡下与后记可以使用明确交代的叙事切镜。
村落应像有人长期生活的中国古朴田园：朴素土墙与木构屋舍，少量竹篱、柴堆、农具和院落；人物动作有差异，不要整齐排列或同时挥手。所有生活细节保持克制。
【特别强调与禁止项】
重点打磨“忽逢桃花林，夹岸数百步”和“芳草鲜美，落英缤纷”。
桃树应有苍劲但自然分叉的老枝、细嫩新枝，以及沿枝组织的花苞和花朵。近处能看见花瓣层次、花蕊和深浅变化，树冠具有不规则轮廓与透空。不能用几个粉色球体或大量粉色方块代替桃花。
落花要形成有纵深、有节奏的动态画面：远处细碎飘落，中景有局部花雨，近处偶尔有花瓣缓慢回旋掠过；阵风带动枝梢与花瓣产生同向变化。溪面有随水漂流的落花，岸边和树下有疏密不同的积花。绚丽来自花瓣形态、运动层次和受光变化，而不是全屏撒彩纸或金色光点。
桃林漂亮但不要堵住溪流前方的视线。进入幽暗狭道后，落花逐渐减少；出洞时重点转向开阔天地、清晨光线与真实生活，不能让粉色粒子持续覆盖整个村落。
禁止鸟居、日式石灯笼、神社、巨大佛塔、悬浮山、发光仙宫、遍地红灯笼和商业古镇式装饰。禁止盛开的桃花与满地金黄秋稻同时出现。
```
再放一次成品地址：桃源·豁然开朗
打开它，点一下“循文入境”。那条小时候背过很多遍的路，会从文字里慢慢长出来。
> 注：真人朗诵音频版权归原权利人所有，作品仅作技术与学习交流展示。
See all posts
Built by 宝玉. RSS . 本站原创内容，独家授权赛博禅心公众号发布。
Toggle theme