这篇是 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 一一对应。
示意文案的边界
画面里的软装、景观描述(吊灯、天际线、岛台陈列等)是配合渲染画面写的示意,不是真实楼盘资料。若你 fork 去做真实房源,应换上测绘全景并替换所有营销文案。
和本站其他 Demo 的关系
穿越视差手机 是分层 2D 视差;3D 地球 是外观测球体加光照。本篇是室内 equirectangular 静帧 + 录屏归档,更接近虚拟样板间素材包。三条线并列放在首页轮播,避免混成「一个地球里有一套公寓」这种误解。
若你要复用这批素材
- 每张全景保持 2:1(常见 4096×2048 或 2048×1024),左右边缘对齐。
- 四张图用稳定文件名(如
Living-room.png),方便 CMS 或自建 viewer 引用。 - 文章页用录屏 + 静帧图库 + 上文说明,利于搜索理解「360 全景 / virtual tour / equirectangular interior」。
我不在这里列「十大全景插件」对比表:插件换得快,把你自己的场景图 + 命名约定写清楚,比堆外链更有维护价值。
v360.mp4 里四房间怎么串
录屏是一条连续路径:客厅先打开公园侧落地窗,硬切进入餐厅门槛(吊灯入画),再进岛台厨房(铜锅作色彩点),最后到天际线曝光的主卧。我没用叠化转场——硬切能让人立刻对照:每一段静帧都对应一张独立的 equirectangular 文件。慢速拖动进度条时,我会看门框、岛台边缘是否保持竖直;若出现桶形变形,说明源全景投影参数错了,必须重新导出再上线。
我写在罐头上的导出设定
每张静帧工作分辨率大约 8192×4096,再缩小到本文图库用的网页友好尺寸。文件名保持小写加连字符(dining-room.png),方便 Linux 主机与 GitHub Pages 大小写安全。室内球面不需要 Alpha——只要 RGB。MP4 用 H.264,海报帧取自客厅静帧,避免首屏黑场;不录旁白,因为这是视觉素材包,不是解说导览。
未来的交互壳(尚未上线)
可拖拽 WebGL 查看器会把同一套四张贴图铺在内翻球上,用 MeshBasicMaterial 保留烘焙光。本站还没上这个 HTML:手机 GPU 内存与手势体验值得另写一篇诚实手记,而不是静默换 iframe。真要上线时,本页会多一个嵌入并补一小节「相对纯 v360 多了什么」,而不是替换视频,好让旧链接继续可用。
SEO 与诚实边界
搜 apartment 360 tour 或 equirectangular interior 的人,应落到一篇清楚写明「这是示意渲染、不是真实门牌」的页面。这条边界保护信任,也和 高铁车窗合成、机舱舷窗云层 手记一致:合成画面,首段写清范围。
命名与仓库卫生
客厅文件写成 Living-room.png(大写 L)是历史遗留;其余三张已是小写开头。我没有批量重命名,因为文章、海报与本地脚本已引用旧路径——改名成本高于「记住这一处例外」。新素材一律小写连字符。仓库里不放半成品拼接工程文件;只提交可被浏览器直接打开的 PNG / MP4,避免访客误下到不可用的中间态。