<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>飘渺之旅 on idiotfan</title><link>https://idiotfan.wang/tags/%E9%A3%98%E6%B8%BA%E4%B9%8B%E6%97%85/</link><description>Recent content in 飘渺之旅 on idiotfan</description><generator>Hugo</generator><language>zh-cn</language><lastBuildDate>Sat, 15 Aug 2026 10:20:00 +0800</lastBuildDate><atom:link href="https://idiotfan.wang/tags/%E9%A3%98%E6%B8%BA%E4%B9%8B%E6%97%85/index.xml" rel="self" type="application/rss+xml"/><item><title>用 Codex 把《飘渺之旅》的世界观装进浏览器</title><link>https://idiotfan.wang/posts/use-codex-to-build-piaomiao-3d-universe/</link><pubDate>Sat, 15 Aug 2026 10:20:00 +0800</pubDate><guid>https://idiotfan.wang/posts/use-codex-to-build-piaomiao-3d-universe/</guid><description>读完整本 28 集 292 章的《飘渺之旅》，用 Three.js 搭了一个零依赖、可离线打开的 3D 世界观宇宙：五层界域、修炼阶梯、主角旅程三种视图。</description><content:encoded><![CDATA[<p>《飘渺之旅》算得上修真小说的开山之作，我一直挺喜欢。最近突发奇想：能不能让 AI 先把整本小说读完，再用 Three.js 把书里的世界观宇宙&quot;架构&quot;出来——不是画几张概念图，而是做成一个能在浏览器里拖拽、缩放、点击的 3D 宇宙。</p>
<p>于是有了这个项目：一个<strong>零依赖、纯静态、完全离线</strong>的单页应用，双击 <code>index.html</code> 就能打开。</p>
<h2 id="第一步先让-ai-把小说读完">第一步：先让 AI 把小说读完</h2>
<p>原始文本是 5.8MB 的 txt，46,806 行，GB18030 编码，而且尾部拖了两段垃圾——一段第 14 集的残章，加一段第 15~24 集的逐字重复拷贝（约 12,000 行）。</p>
<p>第一件事就是把语料洗干净：</p>
<ul>
<li>删掉全部垃圾，46,806 行 → <strong>34,311 行</strong>，精确统计出 <strong>28 集 × 292 章</strong></li>
<li>编码从 GB18030 转成 UTF-8，macOS 直接能打开</li>
<li>修了第 2 集标题里的 <code>??</code> 乱码（&ldquo;星星宫??寒冰原&rdquo; → &ldquo;星星宫·寒冰原&rdquo;）</li>
<li>修了 2 处 GB18030 私有区字符（&ldquo;水流突然化作…&quot;、&ldquo;突然出现一个巨大的黑洞&rdquo;）</li>
</ul>
<p>干净的语料是一切的基础。后面 AI 写的所有世界观数据，都要能回到这份原文里查到出处。</p>
<h2 id="第二步逐条考据世界观">第二步：逐条考据世界观</h2>
<p>这一步是最好玩的。书里那些设定散落在 292 章里，我让 Codex 全文检索核对，不许自由发挥：</p>
<ul>
<li><strong>五层主界域</strong>：凡人界 → 修真界 → 仙界 → 原界 → 神界（书中正式叫法其实是&quot;天神界&rdquo;）</li>
<li><strong>平行界与神秘地带</strong>：灵鬼界、黑魔界、佛宗，以及鑫波角、幻星神阵</li>
<li><strong>修真界七颗星球</strong>：封缘星、天庭星、潜杰星、霖明星、坦邦星、幻树星、紫魂星</li>
<li><strong>修炼体系</strong>：修真十一境（加散仙旁支）→ 仙界七级 → 修神九重天（九重 × 三境 = 27 境）</li>
<li><strong>主角线</strong>：李强从第 1 集&quot;误入天庭&quot;一路到第 28 集&quot;神罚之眼&quot;</li>
</ul>
<p>顺便考据出几个有意思的冷知识：神界在书里叫<strong>天神界</strong>，全书没有&quot;大罗金仙、仙帝、神域&quot;这些说法；傅山用<strong>紫炎心</strong>给李强筑基；赤明魔尊是李强师弟，两人同拜青帝；原界大约只有幻星神阵的十分之一；神之战魂来自紫魂星。</p>
<h2 id="第三步一个单文件的-3d-宇宙">第三步：一个单文件的 3D 宇宙</h2>
<p>最终交付物非常朴素：一个 <code>index.html</code>（946 行，HTML + CSS + 内联 JS）+ <code>vendor/</code> 里两个本地文件（<code>three.min.js</code> r128 + <code>OrbitControls.js</code>）。没有构建步骤、没有 npm、没有 CDN，<code>file://</code> 直接双击打开，断网也能玩。这是故意的——越简单的交付越长寿。</p>
<p>页面有三种视图模式：</p>
<ol>
<li><strong>宇宙总览</strong>：五层界域竖直堆叠，加上三个平行界、两处神秘地带、七颗星球，以及连接凡人界与修真界的&quot;逆行通道&quot;</li>
<li><strong>修炼阶梯</strong>：修真十一境 → 仙界七级 → 修神九重天，27 个境界排成一条螺旋阶梯，像在爬一座无形的塔</li>
<li><strong>主角旅程</strong>：李强 28 集剧情节点的紫色螺旋线，从误入天庭一路到神罚之眼</li>
</ol>
<p>交互上就是常规三板斧：OrbitControls 拖动旋转、滚轮缩放、raycast 点击节点弹出详情面板。细节上花心思的是<strong>标签系统</strong>：所有标签都是 DOM 元素，每帧把 3D 坐标投影到屏幕坐标，还要做防重叠排版（固定组先放，可移动组最多重试 10 次下移）和 SVG 引导线，保证缩放之后不会糊成一团。另有侧栏 chip 跳转、自动旋转开关、920px / 640px 两档响应式断点。</p>
<h2 id="验证headless-跑一遍才算数">验证：headless 跑一遍才算数</h2>
<p>写完不是直接交付，而是用无头 Chrome + SwiftShader 软件 WebGL 实测了一轮：</p>
<ul>
<li><strong>0 个 JS 错误</strong></li>
<li>三种模式切换正常</li>
<li>点击&quot;元婴&quot;标签 → 面板正确显示元婴期；点击&quot;第 28 集&quot; → 显示&quot;神罚之眼&quot;</li>
<li>侧栏 chip 跳转、自动旋转、700px 移动端视口全部正常</li>
</ul>
<p>软件渲染下 13~18 FPS，真实 GPU 上应该满帧——这不是性能问题。</p>
<h2 id="几点收获">几点收获</h2>
<ol>
<li><strong>动手前先定&quot;事实底线&quot;</strong>。中途有一次 review 误报章数应该是 296，其实是把垃圾残章的 4 个标题数进去了。定死&quot;原文是唯一考据源、292 章是清洗后的精确数&quot;，AI 才不会在细节上自由发挥。</li>
<li><strong>无构建交付很舒服</strong>。一个 HTML 文件加两个本地库，没有依赖链可以坏，拷到任何电脑都能开。</li>
<li><strong>vendor 文件要成对升级</strong>。three.js r128 和它的 OrbitControls 是配对关系，只换一半必然出问题；换版本必须全量回归三个视图。</li>
<li><strong>清洗语料是最值的苦力活</strong>。5.8MB 的脏文本 → 34,311 行干净的 UTF-8，决定了后面所有 AI 工作的质量上限。</li>
</ol>
<p>目前这个 3D 宇宙已经挂到博客上了，在线可以直接玩：<a href="https://idiotfan.wang/piaomiao/">飘渺之旅 · 世界观宇宙</a>。整个项目以 Hugo 静态文件的形式原样托管，没有加任何依赖和构建步骤，双击本地 <code>index.html</code> 和在线打开是同一个版本。</p>
<p>这次自娱自乐的 AI 折腾算是闭环了——从读小说、考据、建模到上线，全程只花了一个周末的碎片时间。</p>
]]></content:encoded></item></channel></rss>