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 做可拖拽漫遊,常見寫法是 SphereGeometry 再 scale(-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

示意文案的邊界

畫面裡的軟裝、景觀描述(吊燈、天際線、島臺陳列等)是配合渲染畫面寫的示意,不是真實樓盤資料。若你 fork 去做真實房源,應換上測繪全景並替換所有營銷文案。

和本站其他 Demo 的關係

穿越視差手機 是分層 2D 視差;3D 地球 是外觀測球體加光照。本篇是室內 equirectangular 靜幀 + 錄屏歸檔,更接近虛擬樣板間素材包。三條線並列放在首頁輪播,避免混成「一個地球裡有一套公寓」這種誤解。

若你要複用這批素材

  1. 每張全景保持 2:1(常見 4096×2048 或 2048×1024),左右邊緣對齊。
  2. 四張圖用穩定文件名(如 Living-room.png),方便 CMS 或自建 viewer 引用。
  3. 文章頁用錄屏 + 靜幀圖庫 + 上文說明,利於搜索理解「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,避免訪客誤下到不可用的中間態。