不用学Three.js，Image2+Codex两步生成360°全景渲染

标签: GPT-Image2 / Codex / 360全景 / Three.js / AI渲染 / 前端可视化
原文: 微信公众号「三木前端笔记」https://mp.weixin.qq.com/s/uP0qHvQx0_B_y3lbb9jAcg

核心思路

360度全景渲染听起来是个技术活——要处理等距柱状投影，要用Three.js写球形贴图，还要实现鼠标交互。但用 GPT Image2 和 Codex 组合，整个流程缩减成两步：

让 Image2 生成全景图
让 Codex 把图变成可以转动的查看器

不需要学习 Three.js，不需要配置开发环境，浏览器直接打开即可。

第一步：用 Image2 生成全景图

关键是提示词。普通的"生成风景图"不够，需要明确告诉 Image2 这是等距柱状投影格式。

提示词模板

360度等距柱状全景图（equirectangular），[场景描述]，高细节，电影感，超沉浸式 VR 环境，真实 360° 空间透视，8K，2:1 宽高比

把 [场景描述] 换成具体场景。以浮空夜市为例：

360度等距柱状全景图（equirectangular），漂浮在云层中的东方幻想夜市，红灯笼、悬空木桥、蒸汽小吃摊、飞行纸鹤与远处巨大空中神殿，夜雨后的石板路有霓虹倒影，人群与摊位形成环绕式空间构图，动态烟雾与暖色灯光交织，高细节，电影感，超沉浸式 VR 环境，真实 360° 空间透视，8K，2:1 宽高比

为什么是 2:1 比例？

Image2 会生成一张 2:1 比例的图片——这是标准 equirectangular 格式，把球形空间展开成平面：水平 360 度、垂直 180 度。

如果把这张图贴到 Three.js 球体的内壁，相机放在球心，转动视角就相当于在 360 度空间里环顾。

第二步：让 Codex 生成查看器

把生成的图片上传到 Codex，输入：

生成 HTML 代码，用 Three.js 将这张全景图渲染成一个可交互的 360 度查看器

Codex 会输出完整的 HTML 文件，包含：

Three.js 球形贴图渲染
鼠标拖动控制视角
滚轮缩放

下载后直接用浏览器打开即可。

为什么这个组合能跑通？

Image2 能理解 equirectangular 格式

生成的图片不是普通风景图，而是一张"展开的球形"。水平方向是 360 度环绕，垂直方向是 180 度仰俯。

Codex 知道 Three.js 全景查看器的标准写法

Codex 生成的代码逻辑：

创建球体几何体
将全景图作为纹理从内部贴到球体上（材质设置双面渲染）
相机放在球心
监听鼠标事件控制相机旋转

这部分不需要自己写，Codex 会处理好。

2:1 比例是必须的

Equirectangular 格式的宽高比固定是 2:1，否则贴到球体上会变形。

适合哪些场景？

整个流程不需要配置环境：

Image2 在 ChatGPT 网页端直接用
Codex 生成的是单个 HTML 文件
浏览器打开即可

类型	示例
室内空间	茶馆、书房、餐厅
奇幻场景	浮空岛、地下城、神殿
城市街景	夜市、老街、广场
自然景观	山谷、森林、海岸

不推荐场景

全是平面元素的场景转起来效果有限，比如：

纯文字海报
单一物体特写
缺乏纵深感的平面构图

完整流程总结

1. 打开 ChatGPT → 调用 Image2
   ↓
2. 输入提示词：360度等距柱状全景图... + 场景描述 + 2:1比例
   ↓
3. Image2 生成全景图（下载）
   ↓
4. 打开 Codex → 上传图片
   ↓
5. 输入：生成 HTML 代码，用 Three.js 渲染成 360 度查看器
   ↓
6. Codex 输出 HTML 文件
   ↓
7. 浏览器打开 → 拖动鼠标环顾全景

技术细节（供参考）

Three.js 全景查看器核心原理

// 1. 创建球体几何体（半径、水平分段、垂直分段）
const geometry = new THREE.SphereGeometry(500, 60, 40);

// 2. 加载全景图纹理
const texture = new THREE.TextureLoader().load('panorama.jpg');

// 3. 创建材质（贴到球体内部）
const material = new THREE.MeshBasicMaterial({
  map: texture,
  side: THREE.BackSide  // 关键：从内部渲染
});

// 4. 创建网格
const mesh = new THREE.Mesh(geometry, material);

// 5. 相机放在球心
camera.position.set(0, 0, 0);

// 6. 鼠标控制相机旋转（OrbitControls 或自定义）

Codex 会生成这些代码，但理解原理有助于调试和优化。