开发者利用 GPT 6 Astra 与 Codex 制作 3D 交互版《桃花源记》

开发者利用 GPT 6 Astra 与 Codex 制作 3D 交互版《桃花源记》 作者利用 ChatGPT Pro 中的 GPT 6 Astra 结合详细的结构化提示词，将《桃花源记》制作成支持“循文入境”的 3D 交互网页，并通过引入真人朗诵与 Codex 工程化收尾完成了体验优化。 利用 GPT 6 Astra 依据课文顺序与空间连通要求生成了包含 20 幕的 3D 网页原型。 将系统 TTS 替换为李立宏的真人朗诵并结合 SRT 字幕，实现音画同步与镜头留白叙事。 通过 Codex 拆分外置 Base64 音频并混入自然环境音，使 HTML 文件从 5.6 MB 缩减至约 777 KB。 分享了明确空间与审美验收标准的提示词模板，并总结了大模型原型构建与 Codex 工程收尾的协作分工。 从文本到 3D 原型的生成 作者使用 GPT 6 Astra 编写了一套详细提示词，核心要求是“循文入境”，即严格依照原文顺序推进，且空间关系必须真实连通，禁止使用黑屏与瞬移。模型最终交付了一个包含 20 幕的 3D HTML 网页，支持逐章慢读以及原文与白话文的切换展示。 真人朗诵与音画同步 因原生系统 TTS 过于平淡缺乏文学感染力，作者引入了央视李立宏的真人朗诵音频并生成带时间戳的 SRT 字幕。通过将 MP3 与字幕交付给 GPT，系统实现了章节切换、镜头移动、文字高亮以及序奏和留白停顿与朗诵节奏的完全同步。 工程化收尾与体积优化 针对 GPT 将 MP3 采用 Base64 编码内嵌导致 HTML 体积膨胀至 5.6 MB 的问题，作者交由 Codex 处理。Codex 将朗诵音频独立提取，加入低音量循环的溪水与林间鸟鸣环境音，并设定进入模式后自动播放，最终将 HTML 体积压缩至约 777 KB。 提示词标准与协作经验 作者指出成品质量依赖于清晰的验收标准，而非模糊的形容词，提示词需明确镜头走位、情节取舍及禁止混入无关文化符号等规则。在协作分工上，GPT 6 Astra 适合快速构建完整原型，而 Codex 更擅长处理文件结构拆分、资源优化与运行测试。

开发者利用 GPT 6 Astra 与 Codex 制作 3D 交互版《桃花源记》 作者利用 ChatGPT Pro 中的 GPT 6 Astra 结合详细的结构化提示词，将《桃花源记》制作成支持“循文入境”的 3D 交互网页，并通过引入真人朗诵与 Codex 工程化收尾完成了体验优化。 利用 GPT 6 Astra 依据课文顺序与空间连通要求生成了包含 20 幕的 3D 网页原型。 将系统 TTS 替换为李立宏的真人朗诵并结合 SRT 字幕，实现音画同步与镜头留白叙事。 通过 Codex 拆分外置 Base64 音频并混入自然环境音，使 HTML 文件从 5.6 MB 缩减至约 777 KB。 分享了明确空间与审美验收标准的提示词模板，并总结了大模型原型构建与 Codex 工程收尾的协作分工。 从文本到 3D 原型的生成 作者使用 GPT 6 Astra 编写了一套详细提示词，核心要求是“循文入境”，即严格依照原文顺序推进，且空间关系必须真实连通，禁止使用黑屏与瞬移。模型最终交付了一个包含 20 幕的 3D HTML 网页，支持逐章慢读以及原文与白话文的切换展示。 真人朗诵与音画同步 因原生系统 TTS 过于平淡缺乏文学感染力，作者引入了央视李立宏的真人朗诵音频并生成带时间戳的 SRT 字幕。通过将 MP3 与字幕交付给 GPT，系统实现了章节切换、镜头移动、文字高亮以及序奏和留白停顿与朗诵节奏的完全同步。 工程化收尾与体积优化 针对 GPT 将 MP3 采用 Base64 编码内嵌导致 HTML 体积膨胀至 5.6 MB 的问题，作者交由 Codex 处理。Codex 将朗诵音频独立提取，加入低音量循环的溪水与林间鸟鸣环境音，并设定进入模式后自动播放，最终将 HTML 体积压缩至约 777 KB。 提示词标准与协作经验 作者指出成品质量依赖于清晰的验收标准，而非模糊的形容词，提示词需明确镜头走位、情节取舍及禁止混入无关文化符号等规则。在协作分工上，GPT 6 Astra 适合快速构建完整原型，而 Codex 更擅长处理文件结构拆分、资源优化与运行测试。

先放成品： 在线体验： 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，结合中国山水长卷的疏密、留白和远近层次。默认氛围为春日清晨，薄雾刚散，光线清晰而柔和。 空间依次为：沿溪分布的外部桃林、桃林尽头的停舟山口、真实狭窄的步行通道、群山围合的开阔田园、村后的桑树竹林与层层远山。桃林与内部桑竹明确区分。渔舟留在入口外，不能直接驶入村落。 默认打开时，从洞口内侧略有高度的斜向视角看见田园全景。前景有岩石和少量枝条框景，一条小径向村落延伸；中景以平旷的春日田地、池塘、水渠和错落屋舍形成重心；远景逐渐过渡为桑竹、坡地和山林。不要为了展示所有区域而把山体劈开。 开始“循文入境”后，从溪上行进进入桃林，经历发现、好奇、舍舟、入山和空间骤然打开；随后走入田间与村舍，观察劳动、鸡犬与老幼生活，经历相遇、做客、交谈、停留与辞别。继续完成归舟、留下标记、报告太守、重新寻找和篇末后记，不要在田园全景处提前结束。郡下与后记可以使用明确交代的叙事切镜。 村落应像有人长期生活的中国古朴田园：朴素土墙与木构屋舍，少量竹篱、柴堆、农具和院落；人物动作有差异，不要整齐排列或同时挥手。所有生活细节保持克制。 【特别强调与禁止项】 重点打磨“忽逢桃花林，夹岸数百步”和“芳草鲜美，落英缤纷”。 桃树应有苍劲但自然分叉的老枝、细嫩新枝，以及沿枝组织的花苞和花朵。近处能看见花瓣层次、花蕊和深浅变化，树冠具有不规则轮廓与透空。不能用几个粉色球体或大量粉色方块代替桃花。 落花要形成有纵深、有节奏的动态画面：远处细碎飘落，中景有局部花雨，近处偶尔有花瓣缓慢回旋掠过；阵风带动枝梢与花瓣产生同向变化。溪面有随水漂流的落花，岸边和树下有疏密不同的积花。绚丽来自花瓣形态、运动层次和受光变化，而不是全屏撒彩纸或金色光点。 桃林漂亮但不要堵住溪流前方的视线。进入幽暗狭道后，落花逐渐减少；出洞时重点转向开阔天地、清晨光线与真实生活，不能让粉色粒子持续覆盖整个村落。 禁止鸟居、日式石灯笼、神社、巨大佛塔、悬浮山、发光仙宫、遍地红灯笼和商业古镇式装饰。禁止盛开的桃花与满地金黄秋稻同时出现。 再放一次成品地址： 桃源·豁然开朗 打开它，点一下“循文入境”。那条小时候背过很多遍的路，会从文字里慢慢长出来。 注：真人朗诵音频版权归原权利人所有，作品仅作技术与学习交流展示。