aogl.cn — 生成式 AI 工具与大模型动态(个人书签)

← 返回首页 · 本站原创

公寓 360° 全景:四房间等距柱状图与漫游录屏

Living-room · dining · kitchen · master-bedroom · v360.mp4

· 本站原创

这篇是 aogl.cn 归档的第 9 篇原创手记,素材在 original/360-degree-panorama/。文件夹里是一套公寓内景 360° 素材:四张 2:1 等距柱状全景图,外加一段把客厅→餐厅→厨房→主卧串起来的 v360.mp4 录屏。不是房产中介落地页,也不教你怎么买某款 SaaS;只记这次导出、命名和上线时的取舍。

文件夹里有什么

  • Living-room.png — 北欧风客厅,落地窗对公园
  • dining-room.png — 法式餐厅,水晶吊灯与长桌
  • kitchen.png — 岛台厨房,大理石台面与铜锅陈列
  • master-bedroom.png — 主卧,城市天际线落地窗
  • v360.mp4 — 四房间连贯漫游录屏(文章内嵌播放)

四张图都是完整一圈的室内全景:宽高比约 2:1,适合直接当 equirectangular 贴图。若比例不对,球体接缝会有一条竖线或天空/地面被拉扁——我导出前会先看一眼左右边缘能否无缝衔接。

等距柱状图与「内翻球」思路

若用 Three.js 做可拖拽漫游,常见写法是 SphereGeometryscale(-1, 1, 1),相机在球心、贴图朝内——人站在房间中间转头,而不是绕物体公转。这和本站 交互 3D 地球 同属 WebGL 球体,但地球是外观测、带光照;室内全景往往只要 MeshBasicMaterial 单张贴图,避免平行光把烘焙细节洗平。

本站现已只保留静帧与录屏,不再托管交互壳页;下面视频里仍能看到房间之间的转场节奏,四张 PNG 则方便对照单帧构图与文件名。

漫游录屏(v360.mp4)

录屏覆盖四个空间,首屏比加载 WebGL 更轻,适合文章页直接嵌入。可用播放器暂停、逐帧看接缝与曝光是否一致。

录屏:v360.mp4 — 客厅、餐厅、厨房、主卧连贯预览。

四张全景静帧(对照用)

需要对照单帧构图时,可看下面四张 equirectangular 静图;文件名与场景 id 一一对应。

360° 全景 — 客厅 Living-room 360° 全景 — 餐厅 dining-room 360° 全景 — 厨房 kitchen 360° 全景 — 主卧 master-bedroom

示意文案的边界

画面里的软装、景观描述(吊灯、天际线、岛台陈列等)是配合 AI/渲染画面写的示意,不是真实楼盘资料。若你 fork 去做真实房源,应换上测绘全景并替换所有营销文案。

和本站其他 Demo 的关系

穿越视差手机 是分层 2D 视差;3D 地球 是外观测球体加光照。本篇是室内 equirectangular 静帧 + 录屏归档,更接近虚拟样板间素材包。三条线并列放在首页轮播,避免混成「一个地球里有一套公寓」这种误解。

若你要复用这批素材

  1. 每张全景保持 2:1(常见 4096×2048 或 2048×1024),左右边缘对齐。
  2. 四张图用稳定文件名(如 Living-room.png),方便 CMS 或自建 viewer 引用。
  3. 文章页用录屏 + 静帧图库 + 上文说明,利于搜索理解「360 全景 / virtual tour / equirectangular interior」。

我不在这里列「十大全景插件」对比表:插件换得快,把你自己的场景图 + 命名约定写清楚,比堆外链更有维护价值。