最近在尝试构建科幻题材的互动场景时很多开发者会卡在同一个问题上飞船模型做得再精致如果内部不可进入、路线不连贯玩家也只能远远看一眼。而传统的方案是建模、展UV、贴图、关卡摆放、碰撞体设置、交互脚本一套流程走下来做一艘能“探索”的飞船往往要按周计。GPT-Astra 这类思路给我提供了一个很直接的解借助大模型一次生成结构化、可探索的飞船场景数据再交给三维引擎实时渲染。本文就以“GPT-Astra 一次生成可探索科幻飞船”为切入点完整拆解一套可运行的原型方案。内容包括一次生成的核心思路、飞船数据模型设计、提示词工程、Python 生成链路、Three.js 三维预览与第一人称漫游。无论你是游戏开发者、AI 应用开发者还是刚接触三维可视化方向的学生都可以照着本文学会从文本提示到可探索场景的完整闭环。1. 背景与核心概念1.1 什么是可探索科幻飞船可探索科幻飞船不只是“一个长得像飞船的模型”。它内部必须有舱室、走廊、门、功能区并且用户可以移动视角进入其中观察设备、灯光、结构件甚至在关键交互点上触发事件。简单说它既是一个三维模型资产也是一个带空间关系的关卡地图。常见元素包括舰桥飞船控制核心通常有全息星图、指挥席、大屏幕。反应堆舱高能核心区适合用橙红色灯光和动态粒子表现。船员休息区体现生活化细节比较适合做故事线索。货运舱面积大、结构简单适合做仓储和任务目标点。走廊与气闸门连接各舱室决定玩家的行进路线。传统开发中这些内容需要依靠人工摆放空间关系相对松散。而在生成式工作流里我们可以把“舱室位置”“尺寸”“连接关系”等抽象成结构化数据让模型一次生成整艘飞船的布局。1.2 “一次生成”的含义这里的“一次生成”不是指一句话把最终的工程文件全部吐出来而是指输入一段场景描述后由大模型一次性输出完整、可解析的场景数据包而不是分多次交互再手工拼接。一次生成的好处很明显数据完整性高房间、门、走廊、坐标、尺寸都在同一份 JSON 里。降低交互成本不需要用户反复追问“左边是什么”“走廊在哪里”。便于工程化只要输出格式符合预先定义的 Schema就能自动进入渲染管线。便于版本管理每次生成的结果可以保存为一个独立文件随时回滚比较。当然一次生成也有挑战。模型生成的内容可能缺少连接关系、坐标越界、房间重叠、颜色材质不统一等。所以我们需要在数据模型层和校验层做足够的约束后续章节会重点讲这一点。1.3 GPT-Astra 的思路拆解GPT-Astra 可以理解为一套面向科幻飞船场景的生成式工作流代号。它不局限于某一个工具而是强调用大模型做空间布局设计用结构化数据驱动三维场景生成。整体思路可以拆成四步第一步定义数据结构飞船 JSON Schema 第二步设计提示词模板约束大模型输出格式 第三步运行生成脚本解析输出、校验数据、落盘 第四步加载到三维渲染器Three.js / Unity / Unreal这个思路最有价值的地方是把“不可控的自然语言生成”转换成了“可控的结构化数据生成”。我们不再直接让 AI 输出一个 3D 模型而是让 AI 输出一个场景蓝图再由程序把蓝图实例化为实际几何体。这样既降低了对生成式 3D 模型的依赖也让结果更容易修改和调试。2. 系统架构与准备工作2.1 整体流程设计本文原型项目采用前后端分离的思路。后端负责与大模型交互、解析和校验数据前端负责三维渲染与交互。流程图可以描述为用户描述文本 ↓ 提示词模板封装 ↓ 大模型接口调用GPT-Astra 一次生成 ↓ 返回 Markdown / 纯文本 ↓ 正则提取 JSON 并解析 ↓ 数据校验与坐标规整 ↓ 写盘为 ship.json ↓ Three.js 加载并渲染 ↓ 第一人称漫游探索在这个流程里最容易出问题的是“大模型输出不可解析”和“三维渲染穿模”两个环节。因此后续章节我会重点提供对应的代码和排查方案。2.2 技术栈说明为了让示例尽量轻量本文使用以下技术栈Python 3.9负责提示词封装、结果解析和校验。Flask可选用于提供静态文件服务方便本地预览。Three.js r160负责浏览器端三维渲染。PointerLockControlsThree.js 官方扩展用于实现第一人称视角。本地静态服务器用于解决浏览器加载 JSON 的跨域限制。版本方面不需要严格固定。只要你的环境满足 Python 3.9 和较新的 Node.js 18都可以正常运行本文示例。2.3 项目目录结构建议按下面的结构组织项目gpt-astra-ship/ ├── scripts/ │ ├── generate_ship.py # 生成链路入口 │ └── parse_llm_output.py # 解析大模型输出 ├── public/ │ ├── index.html # 三维页面入口 │ ├── main.js # Three.js 渲染逻辑 │ └── ship.json # 最终生成结果 ├── data/ │ └── sample_ship.json # 本地样例数据 └── README.md这样的目录结构把“生成脚本”和“前端展示”分开后续接入真实大模型接口时可以保持前端代码完全不变。3. 飞船数据模型设计3.1 数据模型为什么是关键在做生成式场景时很多失败的根源都在于“让大模型自由发挥”。如果不规定字段含义、坐标范围和连接关系模型经常生成出变量名的混乱内容。因此这里先定义飞船数据的 JSON 结构。它的作用相当于一份“合同”告诉大模型必须输出什么也告诉渲染程序可以消费什么。核心字段建议如下project项目名称。name飞船名称。style整体风格描述。rooms舱室列表。doors连接关系列表。每个舱室需要描述id唯一编号。type舱室类型如 bridge、reactor、living。name展示名称。center底面中心坐标 [x, 0, z]y 坐标固定为 0。size长宽高 [xSize, ySize, zSize]。color主色调使用十六进制数字。desc舱室描述用于 UI 展示。每个门需要描述from起始舱室 id。to目标舱室 id。width门宽度。height门高度。3.2 舱室类型与坐标约定坐标约定非常重要。在本文中整个飞船采用三维空间坐标但布局主要发生在 XOZ 平面。每个房间的 center 表示底面中心y 固定为 0这样方便人物在地面行走。房间高度通过 size[1] 控制渲染时再从 height/2 的高度向上生成立方体。为了让场景比例合理我们需要控制房间尺寸数量级。比如舰桥为 6mx4mx6m反应堆为 5mx5mx5m休息区为 6mx3mx6m。不要出现“一个房间 1000 米宽”这种夸张数据。3.3 JSON Schema 示例下面是一份完整示例你可以直接保存为data/sample_ship.json。{ project: GPT-Astra 演示, name: 曙光号调查舰, style: 工业科幻 / 黄色警示灯, rooms: [ { id: 1, type: bridge, name: 舰桥, center: [0, 0, 0], size: [6, 4, 6], color: 0xffffff, desc: 全息星图与指挥席位 }, { id: 2, type: reactor, name: 聚变反应堆, center: [8, 0, 0], size: [5, 5, 5], color: 0xffcc33, desc: 高能聚变核心区 }, { id: 3, type: living, name: 船员起居区, center: [0, 0, -8], size: [6, 3, 6], color: 0x66aaff, desc: 睡眠与休闲设施 }, { id: 4, type: cargo, name: 货运舱, center: [-8, 0, 0], size: [6, 4, 6], color: 0x88cc88, desc: 物资与货物存储 } ], doors: [ { from: 1, to: 2, width: 2.0, height: 2.6 }, { from: 1, to: 3, width: 1.6, height: 2.4 }, { from: 1, to: 4, width: 1.6, height: 2.4 } ] }这里舰桥作为中心枢纽连接反应堆、休息区、货运舱形成一个简单的星型拓扑结构。后续渲染时可以沿着连接方向生成走廊或门框。4. 大模型“一次生成”提示词设计4.1 提示词的目标一次生成提示词设计的目标是让大模型输出一个我们可以直接解析的 JSON。而不是一段散文、一个表格或夹杂大量解释的文本。为了实现这个目标需要在提示词中明确以下几点角色设定你是一个科幻飞船关卡设计师。输出格式仅输出 JSON不要包含解释。字段约束必须包含 rooms 和 doors。数值约束坐标范围、数量上限、类型列表。示例参考给出一个极简 JSON 示例让模型模仿结构。4.2 提示词模板下面是一个可以直接复用的模板放置位置为scripts/generate_ship.py顶部。PROMPT_TEMPLATE 你是科幻飞船关卡设计师。请根据用户的描述设计一艘可探索的科幻飞船并输出一个 JSON 数据。 要求 1. 只能输出 JSON不要输出任何解释文字。 2. 不要使用 markdown 代码块包裹。 3. 必须包含 rooms 和 doors 两个数组。 4. 房间数量控制在 4 到 6 个。 5. center 使用 [x, 0, z] 数组y 固定为 0。 6. size 使用 [xSize, ySize, zSize] 数组单位是米。 7. 所有房间必须通过 doors 互相连通不要出现孤立房间。 8. 风格要符合硬科幻工业感。 飞船描述 {user_description} 输出格式参考 {{ name: 飞船名称, style: 风格描述, rooms: [ {{id: 1, type: bridge, name: 舰桥, center: [0, 0, 0], size: [6, 4, 6], color: 0xffffff, desc: 描述}} ], doors: [ {{from: 1, to: 2, width: 2.0, height: 2.6}} ] }} 注意模板中示例尽量短避免模型直接照抄整个示例输出导致房间种类和数量不符合需求。4.3 输出结果解析与修正大模型返回的内容即便声明“只输出 JSON”实际也可能携带 markdown 代码块、前后解释文字甚至少量中英文字符。因此我们需要在 Python 侧做解析和清理。创建scripts/parse_llm_output.pyimport json import re def extract_json(text: str) - dict: 从大模型输出文本中提取 JSON 对象。 支持直接 JSON、markdown 代码块、前后解释文字等常见情况。 # 去掉常见代码块标记 text re.sub(r(?:json)?, , text).strip() # 提取第一个 { 到最后一个 } 之间的内容 start text.find({) end text.rfind(}) if start -1 or end -1: raise ValueError(未找到有效的 JSON 对象) raw text[start:end 1] # 避免十六进制颜色被解析失败这里做一层保护 try: data json.loads(raw) except json.JSONDecodeError as e: raise ValueError(fJSON 解析失败{e}) from e return data def validate_ship_data(data: dict) - dict: 对关键字段做基础校验返回修正后的数据。 if rooms not in data: raise ValueError(缺少 rooms 字段) rooms data[rooms] if not isinstance(rooms, list) or len(rooms) 0: raise ValueError(rooms 必须是非空数组) for room in rooms: if id not in room: room[id] rooms.index(room) 1 if center not in room or len(room[center]) ! 3: raise ValueError(f房间 {room.get(name, )} center 格式错误) room[center][1] 0 return data这段代码有两点值得注意一是用rfind(})而不是简单找最后一个右括号防止 JSON 里嵌套对象造成截断错误。二是将center[1]强制设为 0确保所有房间都位于同一水平面避免后续渲染时浮空或陷入地面。5. 用 Three.js 加载生成数据5.1 搭建三维页面创建public/index.html引入 Three.js 模块。这里使用 importmap 方式方便在浏览器中直接使用three模块。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / titleGPT-Astra 可探索飞船 Demo/title style body { margin: 0; overflow: hidden; font-family: Microsoft YaHei, sans-serif; } #info { position: absolute; top: 16px; left: 16px; color: #fff; background: rgba(0, 0, 0, 0.65); padding: 10px 16px; border-radius: 8px; font-size: 14px; line-height: 1.8; z-index: 10; pointer-events: none; max-width: 360px; } #start { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px 28px; font-size: 18px; cursor: pointer; border: none; border-radius: 8px; background: #ffcc33; color: #111; z-index: 20; } #hint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0, 0, 0, 0.5); padding: 6px 14px; border-radius: 6px; font-size: 13px; z-index: 10; } /style /head body div idinfo点击“开始探索”后请使用鼠标控制视角WASD 移动/div button idstart开始探索/button div idhint/div script typeimportmap { imports: { three: https://unpkg.com/three0.160.0/build/three.module.js, three/addons/: https://unpkg.com/three0.160.0/examples/jsm/ } } /script script typemodule src./main.js/script /body /html这里我把入口按钮单独放在中间只有用户点击后才锁定鼠标指针。这样可以避免页面一打开就被鼠标锁定影响阅读。5.2 编写渲染逻辑创建public/main.js核心逻辑分为三部分创建场景、相机、灯光、地面网格。根据ship.json渲染房间。实现第一人称漫游与碰撞限制。完整代码如下import * as THREE from three; import { PointerLockControls } from three/addons/controls/PointerLockControls.js; // 1. 基础场景 const scene new THREE.Scene(); scene.background new THREE.Color(0x0a0a1a); scene.fog new THREE.Fog(0x0a0a1a, 40, 100); const camera new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 200 ); camera.position.set(0, 1.8, 4); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled true; document.body.appendChild(renderer.domElement); // 2. 灯光 const ambient new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambient); const dirLight new THREE.DirectionalLight(0xffffff, 1.2); dirLight.position.set(10, 20, 10); scene.add(dirLight); // 3. 地面网格 const gridHelper new THREE.GridHelper(40, 40, 0x445566, 0x223344); scene.add(gridHelper); // 4. 加载飞船数据并渲染 let shipData null; let roomMeshes []; async function loadShipData() { const res await fetch(./ship.json); if (!res.ok) { throw new Error(无法加载 ship.json请确认已使用静态服务器启动页面。); } shipData await res.json(); } function buildRoom(room) { const group new THREE.Group(); const [w, h, d] room.size; const [x, y, z] room.center; // 半透明地面 const floorMat new THREE.MeshStandardMaterial({ color: room.color, roughness: 0.7, transparent: true, opacity: 0.4, }); const floor new THREE.Mesh( new THREE.BoxGeometry(w, 0.2, d), floorMat ); floor.position.set(x, y, z); floor.receiveShadow true; group.add(floor); // 房间轮廓线框 const outlineMat new THREE.LineBasicMaterial({ color: room.color }); const outlineBox new THREE.BoxGeometry(w, h, d); const outline new THREE.LineSegments( new THREE.EdgesGeometry(outlineBox), outlineMat ); outline.position.set(x, y h / 2, z); group.add(outline); // 屋顶线框 const roofMat new THREE.MeshStandardMaterial({ color: room.color, transparent: true, opacity: 0.15, }); const roof new THREE.Mesh(new THREE.BoxGeometry(w, 0.1, d), roofMat); roof.position.set(x, y h, z); group.add(roof); return group; } function buildShip() { shipData.rooms.forEach((room) { const group buildRoom(room); scene.add(group); roomMeshes.push(group); }); } // 5. 第一人称控制器 const controls new PointerLockControls(camera, document.body); const startBtn document.getElementById(start); const hint document.getElementById(hint); startBtn.addEventListener(click, () { controls.lock(); }); controls.addEventListener(lock, () { startBtn.style.display none; hint.textContent 鼠标控制视角 | WASD 移动 | ESC 退出; }); controls.addEventListener(unlock, () { startBtn.style.display block; hint.textContent ; }); // 6. 键盘移动逻辑 const keys {}; document.addEventListener(keydown, (e) { keys[e.code] true; }); document.addEventListener(keyup, (e) { keys[e.code] false; }); function updateMovement() { if (!controls.isLocked) return; const speed 0.1; const front new THREE.Vector3(); const right new THREE.Vector3(); camera.getWorldDirection(front); front.y 0; front.normalize(); right.crossVectors(front, new THREE.Vector3(0, 1, 0)); const moveDir new THREE.Vector3(); if (keys[KeyW]) moveDir.add(front); if (keys[KeyS]) moveDir.sub(front); if (keys[KeyD]) moveDir.add(right); if (keys[KeyA]) moveDir.sub(right); if (moveDir.length() 0) { moveDir.normalize(); camera.position.addScaledVector(moveDir, speed); } // 固定视线高度防止角色贴地或飞起来 camera.position.y 1.6; } // 7. 动画循环 function animate() { updateMovement(); renderer.render(scene, camera); requestAnimationFrame(animate); } async function main() { try { await loadShipData(); buildShip(); animate(); } catch (e) { hint.textContent e.message; console.error(e); } } window.addEventListener(resize, () { camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); main();这段代码体现了三个关键点房间使用半透明材质和线框组合视觉上既能看到内部结构又不会完全遮挡视线。移动方向基于相机当前朝向计算符合第一人称游戏直觉。每一帧强制将相机 y 设为 1.6 米相当于默认身高避免穿到地下。5.3 运行静态服务器直接双击打开index.html时浏览器会因跨域策略阻止 fetch 加载本地 JSON。因此需要用静态服务器启动。这里我建议使用npx servecd gpt-astra-ship/public npx serve -l 3000然后在浏览器访问http://localhost:3000如果你安装了 Python也可以用cd gpt-astra-ship/public python3 -m http.server 8000访问http://localhost:8000即可。6. 完整运行演示6.1 生成链路入口下面把生成链路整合到一个脚本中。创建scripts/generate_ship.pyimport json import os import sys from parse_llm_output import extract_json, validate_ship_data def generate_ship(user_description: str, output_path: str ../public/ship.json): 实际项目中可在这里调用大模型接口。 例如 from openai import OpenAI client OpenAI(api_keyyour-key) resp client.chat.completions.create( modelgpt-4o, messages[ {role: system, content: PROMPT_TEMPLATE.format(user_descriptionuser_description)} ], temperature0.7, ) response_text resp.choices[0].message.content 为了离线演示这里直接读取 data/sample_ship.json。 sample_path os.path.join( os.path.dirname(__file__), ../data/sample_ship.json ) with open(sample_path, r, encodingutf-8) as f: sample json.load(f) # 模拟一次生成结果 data extract_json(json.dumps(sample)) data validate_ship_data(data) # 写入 public 目录 output_path os.path.join(os.path.dirname(__file__), output_path) os.makedirs(os.path.dirname(output_path), exist_okTrue) with open(output_path, w, encodingutf-8) as f: json.dump(data, f, ensure_asciiFalse, indent2) print(f生成完成{os.path.abspath(output_path)}) print(f房间数量{len(data[rooms])}) print(f门数量{len(data.get(doors, []))}) if __name__ __main__: desc sys.argv[1] if len(sys.argv) 1 else 一艘中型调查舰包含舰桥、反应堆、休息区和货运舱 generate_ship(desc)运行方式cd gpt-astra-ship/scripts python3 generate_ship.py预期输出类似生成完成/path/to/gpt-astra-ship/public/ship.json 房间数量4 门数量3这一步就完成了“文本描述到场景数据”的一次生成。6.2 前端验证当ship.json被生成后再启动静态服务器访问页面可以看到以舰桥为中心的四个半透明房间。房间之间有明确的空间距离。可以通过鼠标锁定视角后用 WASD 在房间之间穿行。每个房间拥有不同颜色方便区分功能区。整体体验接近一个简化版第一人称飞船巡检场景。如果你的目标是做更完整的项目可以在后续加入设备模型、UI 提示、任务触发等能力。7. 高频问题与排查清单在实际运行中生成链路和三维渲染都容易遇到问题。我整理了一张排查表可以直接对照处理。问题现象常见原因解决思路大模型返回内容无法解析输出中包含 markdown 代码块或额外解释使用 extract_json 中的正则提取逻辑若仍失败可要求模型按“仅 JSON”重新输出房间显示在很远或重叠大模型生成的 center 坐标范围过大在提示词中限制坐标范围如 -15 到 15再在 validate_ship_data 中校验范围存在孤立房间模型没有生成相应 doors 或门表不完整生成后校验每个房间可达性并记录缺失连接页面黑屏未正常加载 Three.js 或未启动静态服务器打开浏览器控制台查看报错确认使用 http 协议而非 file 协议鼠标点击后视角未锁定PointerLockControls 初始化失败或按钮事件异常检查 importmap 地址是否可用确认 three 版本一致角色走进房间墙体里面Room 是实体模型但未做碰撞检测本文示例采用线框示意生产环境可添加 Three.js 的 Raycaster 或物理引擎做碰撞房间地板颜色过暗场景光照不足增加 AmbientLight或提高 DirectionalLight 的强度注意上面的“房间重叠”“房间穿模”问题在数据侧解决往往比在渲染侧解决更高效。因为数据是生成一次得到的如果生成时坐标合理前端就不需要做大量物理碰撞计算。8. 工程化建议与实际项目优化8.1 数据结构优先提示词次之很多生成式项目会把大量精力放在“怎么让大模型说得更好”但其实真正重要的是数据结构是否稳定。建议先定义一份严格的 JSON Schema让所有提示词、解析器、渲染器和测试用例都围绕它展开。数据结构稳定后哪怕换一个模型只需要调整提示词整体流程不需要推翻重来。在更完整的项目中可以使用 JSON Schema 校验工具例如 Python 中的jsonschema库pip install jsonschema然后在校验环节增加格式检查包括字段类型、数值范围、必填项。8.2 两阶段生成思路如果要生成更复杂的飞船建议拆成两个阶段第一阶段生成布局蓝图包括房间坐标、尺寸、门连接。第二阶段根据房间类型生成设备列表、灯光方案、道具点位。这样做的好处是每一阶段结果都可验证。如果第一阶段的布局不稳定就不要让第二阶段继续生成否则错误会被放大。8.3 渲染与性能优化当飞船规模变大时一次性渲染全部房间可能会导致帧率下降。建议采用以下手段使用懒加载只有玩家接近某个房间时才创建这个房间的网格。合并静态几何体把同一批静态房间合并为一个 BufferGeometry。使用 LOD远距离显示简化线框近距离展示高模细节。限制动态光源动态灯光数量控制在个位数否则开销很大。在本文示例中所有房间都是基础几何体性能影响很小。但一旦加入大量道具和材质后必须关注 draw call 数量。8.4 版本管理与多方案对比一次生成最大的优势之一是每次结果可以作为一个独立文件保存。建议生成时自动记录以下信息生成时间。用户输入描述。大模型版本。提示词版本。数据文件的哈希值。这样当团队需要对比不同方案时可以快速回滚。尤其在游戏关卡设计中这个能力非常重要因为不同布局会直接影响玩法节奏。8.5 安全与合规注意事项在接入真实大模型接口时需要考虑几点用户输入可能会包含恶意指令需要做输入过滤和长度限制。不要把私有的飞船美术资源、策划文档直接放进系统提示词中发给外部模型。如果服务部署在公网需要做好鉴权避免任何人都能触发高成本生成接口。出于最小权限原则生成脚本应只读取必要的输入文件只写入指定输出目录不执行系统级危险操作。9. 总结与后续学习方向通过这套原型你已经掌握了一条从“一段文本描述”到“可探索科幻飞船场景”的完整链路。核心不是某一个高深算法而是四个工程化动作定义数据结构、设计一次生成提示词、解析并校验输出、用三维引擎渲染。如果继续深入你可以往这几个方向展开一是使用物理引擎让玩家与舱门、设备产生真实碰撞二是把房间内部的灯光、箱子、控制台都资产化并接入任务系统三是把生成结果从 JSON 升级为更多维度的场景描述语言比如 Godot 的.tscn或 Unity 的 Scene 文件四是研究如何把多房间走廊自动生成成真实 Mesh让飞船从“线框示意”变成“实心结构”。实际操作时记得先跑通本文的最小示例再逐步增加复杂度。毕竟“一次生成”并不是万能的它只是在某个环节上帮你压缩了重复劳动。真正决定飞船是否好玩、是否可探索的仍然是数据设计的合理性和你的迭代验证能力。希望能对你接下来的项目有所启发也欢迎根据自己的业务场景去做改造和扩展。