这篇是 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 做可拖拽漫游,常见写法是 SphereGeometry 再 scale(-1, 1, 1),相机在球心、贴图朝内——人站在房间中间转头,而不是绕物体公转。这和本站 交互 3D 地球 同属 WebGL 球体,但地球是外观测、带光照;室内全景往往只要 MeshBasicMaterial 单张贴图,避免平行光把烘焙细节洗平。
本站现已只保留静帧与录屏,不再托管交互壳页;下面视频里仍能看到房间之间的转场节奏,四张 PNG 则方便对照单帧构图与文件名。
漫游录屏(v360.mp4)
录屏覆盖四个空间,首屏比加载 WebGL 更轻,适合文章页直接嵌入。可用播放器暂停、逐帧看接缝与曝光是否一致。
v360.mp4 — 客厅、餐厅、厨房、主卧连贯预览。四张全景静帧(对照用)
需要对照单帧构图时,可看下面四张 equirectangular 静图;文件名与场景 id 一一对应。
示意文案的边界
画面里的软装、景观描述(吊灯、天际线、岛台陈列等)是配合 AI/渲染画面写的示意,不是真实楼盘资料。若你 fork 去做真实房源,应换上测绘全景并替换所有营销文案。
和本站其他 Demo 的关系
穿越视差手机 是分层 2D 视差;3D 地球 是外观测球体加光照。本篇是室内 equirectangular 静帧 + 录屏归档,更接近虚拟样板间素材包。三条线并列放在首页轮播,避免混成「一个地球里有一套公寓」这种误解。
若你要复用这批素材
- 每张全景保持 2:1(常见 4096×2048 或 2048×1024),左右边缘对齐。
- 四张图用稳定文件名(如
Living-room.png),方便 CMS 或自建 viewer 引用。 - 文章页用录屏 + 静帧图库 + 上文说明,利于搜索理解「360 全景 / virtual tour / equirectangular interior」。
我不在这里列「十大全景插件」对比表:插件换得快,把你自己的场景图 + 命名约定写清楚,比堆外链更有维护价值。