簡(jiǎn)介這是一份krpano 1.19-pr9全景圖工具資源包面向需要制作360°全景展示的網(wǎng)頁(yè)設(shè)計(jì)師、VR內(nèi)容開(kāi)發(fā)者和攝影愛(ài)好者。資源提供從原始照片自動(dòng)拼接合成全景圖到生成可在PC與移動(dòng)端流暢瀏覽的HTML5交互頁(yè)面以及將全景拆分為六張素材圖的完整工具鏈能夠大幅降低全景項(xiàng)目落地門檻。壓縮包內(nèi)含492個(gè)文件整體約80.25MB其中215個(gè)JPG圖片為示例素材76個(gè)XML負(fù)責(zé)場(chǎng)景與熱點(diǎn)配置74個(gè)PNG用于皮膚界面元素28個(gè)HTML與27個(gè)JS構(gòu)成網(wǎng)頁(yè)演示前端其余還包括Flash組件、批處理腳本、可執(zhí)行程序及MP4/WebM演示視頻。已有1610人學(xué)習(xí)下載。借助這批droplet批處理工具可一鍵完成CUBE/SPHERE格式轉(zhuǎn)換、生成普通/多分辨率/VR版本并加密XML既適合直接搭建全景站點(diǎn)也適合深入研讀krpano腳本機(jī)制尤其適合需要快速產(chǎn)出演示項(xiàng)目的開(kāi)發(fā)者和希望系統(tǒng)掌握全景制作流程的學(xué)習(xí)者。1. krpano拿走不謝全景圖從靜態(tài)照片到可交互漫游的一站式方案“krpano拿走不謝”這個(gè)說(shuō)法在老全景制作圈里是一句相當(dāng)實(shí)在的交接語(yǔ)——意思就是這套工具鏈拿走就能用不用再去啃幾十頁(yè)英文文檔。它的核心作用是把一張或多張等距柱狀全景圖轉(zhuǎn)換成瀏覽器里可拖動(dòng)、可縮放、可加熱點(diǎn)、可串場(chǎng)景的交互式虛擬漫游。這兩年做線上展廳、樓盤漫游、景區(qū)導(dǎo)覽只要客戶給的是一批全景照片最后基本都落到這套方案上出成品。它適合誰(shuí)自己拍全景拼接的攝影師、做前端展示的開(kāi)發(fā)以及需要批量交付漫游項(xiàng)目的團(tuán)隊(duì)。接下來(lái)按“轉(zhuǎn)換原理 → 實(shí)際操作 → 交互擴(kuò)展 → 排錯(cuò) → 進(jìn)階”往下拆重點(diǎn)寫(xiě)能直接復(fù)制的參數(shù)和容易翻車的細(xì)節(jié)。2. 全景圖切片機(jī)制立方體映射與金字塔分層到底在干什么要會(huì)用 krpano得先把它的底層邏輯講透不然遇到問(wèn)題只能靠玄學(xué)。這一章說(shuō)清楚兩件事為什么一張 2:1 的矩形全景圖不能直接做成漫游以及切片參數(shù)怎么調(diào)才能兼顧畫(huà)質(zhì)和加載速度。2.1 從等距柱狀圖到立方體六張“面貼圖”是怎么來(lái)的等距柱狀圖是主流全景圖格式寬是高的兩倍像素分布不均勻兩極拉伸變形嚴(yán)重。瀏覽器直接加載一張幾千萬(wàn)像素的圖用 WebGL 貼到一個(gè)球體上不是不行但縮放、拖動(dòng)、內(nèi)存占用都會(huì)很吃力。尤其手機(jī)端一張 8000 像素的 JPEG 解碼出來(lái)就是上百 MB 的位圖一拖動(dòng)就掉幀體驗(yàn)會(huì)非常差。krpano 的做法是先把這張圖按 90 度一個(gè)面切成立方體的六個(gè)面每個(gè)面再單獨(dú)處理。這樣渲染時(shí) GPU 只需要貼當(dāng)前視野對(duì)應(yīng)的那一面而不是一張巨大的“球皮”。六個(gè)面分別命名為 f、b、l、r、u、d對(duì)應(yīng)前、后、左、右、上、下。轉(zhuǎn)換輸出的目錄里能看到這些前綴結(jié)構(gòu)類似下面這樣。source_pano.jpg (等距柱狀圖) ↓ convert ├── f前 ├── b后 ├── l左 ├── r右 ├── u上 └── d下這個(gè)轉(zhuǎn)換過(guò)程是自動(dòng)完成的你不需要手工去做。真正需要理解的是轉(zhuǎn)換之后文件數(shù)量會(huì)從“一張大圖”變成“成百上千張小圖”這是后面所有加載策略的基礎(chǔ)。2.2 金字塔切片與多級(jí)分辨率為什么能“看不清楚的地方不加載”立方體六個(gè)面生成后還會(huì)按倍率生成多級(jí)分辨率也就是從整面到更小的瓦片逐層切。打開(kāi)轉(zhuǎn)換后的目錄能看到每個(gè)面下面有一串帶數(shù)字的文件夾數(shù)字代表縮放層級(jí)。視野里離得遠(yuǎn)、不需要細(xì)節(jié)的部分只加載低層級(jí)的小圖靠近了、放大了才加載高層級(jí)的大圖塊。這和在線地圖的瓦片加載是同一種套路感知上就是你轉(zhuǎn)的時(shí)候畫(huà)面流暢放大后細(xì)節(jié)依然清楚。實(shí)際轉(zhuǎn)換流程可以手動(dòng)拖拽也可以命令行批量。常見(jiàn)做法是直接拖 droplet但我偶爾需要給幾十張圖批量輸出就會(huì)用命令行方式命令像下面這樣。不同版本的 krpano 工具參數(shù)可能略有差異我一般先用一張圖試跑打開(kāi)生成的 tour.xml 確認(rèn)參數(shù)真的生效了再整批執(zhí)行。krpanotools64.exe makepano -configtemplates/multires.config D:\pano\source.jpg -outputD:\pano\out這里的-config指定 multires.config 配置文件-output指定輸出目錄。如果路徑里有空格記得加引號(hào)Windows 下這條命令對(duì)引號(hào)尤其敏感漏一個(gè)引號(hào)就會(huì)報(bào)找不到文件。轉(zhuǎn)換產(chǎn)物中最重要的三個(gè)文件是tour.xml是漫游的“目錄”所有場(chǎng)景、熱點(diǎn)、動(dòng)作都在里面krpano.html是瀏覽器入口img/目錄下是切片。后續(xù)所有交互基本都在改tour.xml改完刷新就能看到效果不用重新轉(zhuǎn)換整批圖片。2.3 關(guān)鍵參數(shù)tilesize、levelres、quality 怎么配合multires.config 里有幾個(gè)參數(shù)直接決定輸出尺寸、清晰度和文件數(shù)量改之前先理解它們的聯(lián)動(dòng)關(guān)系。我常用的幾組經(jīng)驗(yàn)值如下表。參數(shù)作用經(jīng)驗(yàn)值tilesize單個(gè)切片邊長(zhǎng)像素512移動(dòng)端可降到 256levelres金字塔層級(jí)最清晰一級(jí)的面分辨率4096, 2048, 1024, 512qualityJPEG 壓縮質(zhì)量 0-10085 左右比較穩(wěn)妥mobile移動(dòng)端是否單獨(dú)切一套低分辨率建議開(kāi)啟levelres列出的每一級(jí)都是上一級(jí)的一半這種等比縮放切換時(shí)視覺(jué)上是連續(xù)的。如果源圖像素不高比如只有 4000x2000最高層級(jí)寫(xiě)到 2048 就夠了繼續(xù)寫(xiě) 4096 只會(huì)生成一堆重復(fù)放大、沒(méi)有更多細(xì)節(jié)的“假高清”切片白白增加請(qǐng)求數(shù)。quality我一般控制在 85。超過(guò) 90文件體積增長(zhǎng)非常明顯畫(huà)質(zhì)提升卻幾乎看不出低于 70天空這類平滑區(qū)域會(huì)浮現(xiàn)出色帶。同一個(gè)項(xiàng)目里所有場(chǎng)景最好用同一套質(zhì)量避免切換時(shí)畫(huà)質(zhì)忽好忽壞客戶來(lái)回拖動(dòng)視角很容易感知到這種差異。另一個(gè)容易漏的參數(shù)是移動(dòng)端配置。krpano 會(huì)根據(jù)設(shè)備動(dòng)態(tài)降級(jí)但老版本還需要手動(dòng)指定否則手機(jī)加載的是桌面端全部切片流量和內(nèi)存都可能扛不住。拿到別人打包的資源時(shí)先看配置里有沒(méi)有移動(dòng)端分支別等上線了才發(fā)現(xiàn)手機(jī)端卡成幻燈片。還有一點(diǎn)現(xiàn)在新項(xiàng)目默認(rèn)用 HTML5 渲染舊項(xiàng)目里常見(jiàn)的 Flash 相關(guān)參數(shù)可以不看不要因?yàn)橐环堇夏０謇锏膄lashonly卡住自己半天。3. 全景圖轉(zhuǎn)換實(shí)操?gòu)乃夭臋z查到可以跑起來(lái)的第一個(gè)漫游理論部分立住之后這一章直接進(jìn)入能復(fù)現(xiàn)的操作路徑。整個(gè)過(guò)程分為素材準(zhǔn)備、轉(zhuǎn)換執(zhí)行、輸出檢查三個(gè)環(huán)節(jié)每個(gè)環(huán)節(jié)都有可以寫(xiě)進(jìn)交付 SOP 的細(xì)節(jié)。3.1 源圖準(zhǔn)備畫(huà)幅、重疊與天空地面krpano 吃得最順的是等距柱狀圖也就是寬高比嚴(yán)格 2:1 的圖。拍攝時(shí)相機(jī)要保證云臺(tái)節(jié)點(diǎn)不偏移每張照片重疊 30% 到 50%后期用拼接軟件導(dǎo)出等距投影。如果客戶直接發(fā)來(lái)幾張普通照片或者魚(yú)眼圖需要先完成拼接不能直接進(jìn) krpano。拍攝和拼接階段最容易留坑的是天空和地面。天空部分如果曝光過(guò)度拼接后會(huì)出現(xiàn)明顯的明暗分界地面拼接縫在室內(nèi)場(chǎng)景尤其顯眼krpano 里一拖動(dòng)就能看到。我一般會(huì)在導(dǎo)出前把拼接軟件的輸出質(zhì)量調(diào)到 JPEG 95 以上同時(shí)勾選 sRGB 色彩空間否則轉(zhuǎn)到瀏覽器里色彩會(huì)發(fā)灰很難用調(diào)試補(bǔ)償回來(lái)。還有一個(gè)容易被忽略的點(diǎn)檢查畫(huà)面里有沒(méi)有明顯的移動(dòng)物體。有人走過(guò)、車輛穿過(guò)、樹(shù)葉大幅度擺動(dòng)都會(huì)在拼接縫附近產(chǎn)生鬼影。全景圖一旦生成krpano 不會(huì)幫你修復(fù)這些位置只能在拍攝時(shí)多等幾秒或者后期在拼接軟件里用遮罩處理。3.2 轉(zhuǎn)換執(zhí)行拖拽與命令行兩條路拿到合格的等距柱狀圖后最簡(jiǎn)單的操作是把它拖到 MAKE PANO (MULTIRES) droplet 上。這個(gè) droplet 本質(zhì)里是一段預(yù)設(shè)好的 makepano 命令適合單張快速出成果。輸出目錄名默認(rèn)按原文件名生成里面有 tour.xml、krpano.html、img 等文件夾打開(kāi) krpano.html 就能預(yù)覽。批量處理時(shí)拖拽就不太現(xiàn)實(shí)了我一般會(huì)寫(xiě)一個(gè)批處理腳本把某個(gè)目錄下所有 JPG 依次轉(zhuǎn)換。Windows 下批處理要注意%%f和%f的區(qū)別寫(xiě)在 bat 文件里用雙百分號(hào)直接在命令行敲用單百分號(hào)。一個(gè)可用的腳本長(zhǎng)這樣echo off set KRkrpanotools64.exe set CFGtemplates\multires.config for %%f in (D:\pano_origin\*.jpg) do ( %KR% makepano -config%CFG% %%f -outputD:\pano_out\%%~nf ) echo batch done這段腳本的邏輯并不復(fù)雜遍歷D:\pano_origin下的所有 jpg 文件每個(gè)文件單獨(dú)執(zhí)行一次轉(zhuǎn)換輸出到以原文件名命名的獨(dú)立目錄里。加引號(hào)是為了兼容帶空格的文件名路徑里有中文時(shí)最好也保持引號(hào)避免 cmd 的編碼問(wèn)題。跑完腳本后到輸出目錄檢查每個(gè)場(chǎng)景的 tour.xml 是否正常生成不要只盯著命令行里出現(xiàn)幾行 success 就收工。3.3 檢查輸出與修改初始視角轉(zhuǎn)換完成后需要在瀏覽器里確認(rèn)幾件事首屏方向是不是朝向主入口垂直方向有沒(méi)有把不該露出來(lái)的區(qū)域露出來(lái)初始視野大小是否適合當(dāng)前空間。這些都在 tour.xml 里的 scene 標(biāo)簽下配置。我通常會(huì)在轉(zhuǎn)換后直接改初始視角省得每次打開(kāi)都要手動(dòng)轉(zhuǎn)半天。修改方式是在scene里找到view標(biāo)簽調(diào)整下面的參數(shù)。view hlookat0 vlookat0 fov90 limitviewrange vmin-30 vmax30 fisheye0 /hlookat決定默認(rèn)朝向的水平角度0 代表起始方向室內(nèi)項(xiàng)目我一般對(duì)準(zhǔn)主入口或者主要展示面vlookat決定上下俯仰0 表示水平視線fov是初始視野大小80 到 110 適合室內(nèi)室外空曠場(chǎng)景可以再小一些讓畫(huà)面更有縱深感。limitview加上vmin和vmax可以把用戶的垂直旋轉(zhuǎn)限制在合理范圍內(nèi)避免看到腳下缺失的地面或者頂部燈架這個(gè)約束在交付類項(xiàng)目里很實(shí)用。本地預(yù)覽時(shí)有個(gè)容易踩的坑直接雙擊 krpano.html 時(shí)有些瀏覽器會(huì)因?yàn)楸镜匚募缬蛳拗萍虞d不出切片現(xiàn)象是頁(yè)面能開(kāi)但畫(huà)面黑屏或者一直轉(zhuǎn)圈。解決辦法是起一個(gè)本地靜態(tài)服務(wù)比如在輸出目錄里執(zhí)行python -m http.server 8080然后訪問(wèn)http://localhost:8080這樣更接近真實(shí)服務(wù)器環(huán)境后續(xù)調(diào)試熱點(diǎn)也更順手。4. 交互擴(kuò)展熱點(diǎn)、場(chǎng)景切換與小行星開(kāi)場(chǎng)的落地寫(xiě)法全景圖轉(zhuǎn)換出來(lái)只是一個(gè)會(huì)動(dòng)的“眼睛”真正讓客戶覺(jué)得是成品的是交互。這一章寫(xiě)三類最常見(jiàn)的交互寫(xiě)法圖片熱點(diǎn)、多場(chǎng)景跳轉(zhuǎn)、小行星開(kāi)場(chǎng)。代碼都能直接貼進(jìn) tour.xml 里用。4.1 圖片熱點(diǎn)給畫(huà)面加上可點(diǎn)擊的入口熱點(diǎn)是虛擬漫游里最基礎(chǔ)的交互元素。一個(gè)圖片熱點(diǎn)需要三個(gè)信息放在球面什么位置、顯示成什么樣子、點(diǎn)擊之后做什么。位置用ath和atv表示分別是水平角度和垂直角度。一個(gè)典型的入口熱點(diǎn)長(zhǎng)這樣hotspot nameroom1_door urlhotspot_arrow.png ath120 atv-5 scale0.5 onclicklookto(120,-5,70); /ath120表示這個(gè)熱點(diǎn)指向水平 120 度的方位atv-5表示略微低于地平線scale控制熱點(diǎn)圖標(biāo)在畫(huà)面里占多大。onclick里可以放任意 krpano 動(dòng)作lookto會(huì)讓視角平滑轉(zhuǎn)到指定位置適合做“看向下一處”的引導(dǎo)。如果想點(diǎn)擊后切換到另一個(gè)場(chǎng)景把onclick換成loadscene(scene_002, null, MERGE, BLEND(1));即可。放置熱點(diǎn)時(shí)最忌諱的做法是憑截圖猜坐標(biāo)。全景圖是球面投影平面截圖里“看起來(lái)在那個(gè)位置”和實(shí)際球面角度經(jīng)常有十幾度的偏差。我一般先把熱點(diǎn)放到畫(huà)面中間再在瀏覽器控制臺(tái)里用get(hotspot[spot1].ath)這類命令讀取實(shí)際坐標(biāo)然后微調(diào)效率比反復(fù)刷新頁(yè)面高不少。4.2 多場(chǎng)景切換把多個(gè)全景圖串成一套漫游交付樓盤點(diǎn)位、展館導(dǎo)覽這類項(xiàng)目時(shí)往往需要在一個(gè)頁(yè)面里串聯(lián)幾十個(gè)場(chǎng)景。轉(zhuǎn)換時(shí)把多張全景圖依次拖進(jìn) droplet輸出目錄里會(huì)有多個(gè) scene 標(biāo)簽。場(chǎng)景之間的跳轉(zhuǎn)核心是loadscene動(dòng)作配合BLEND參數(shù)實(shí)現(xiàn)淡入淡出避免生硬的跳變。下面是一個(gè)最小可用的雙場(chǎng)景結(jié)構(gòu)scene namescene_001 title客廳 onstartlookto(0,0,90); view hlookat0 vlookat0 fov90 / image cube urlimg/scene_001_%s_%v/l_%v.jpg / /image /scene scene namescene_002 title臥室 view hlookat180 vlookat0 fov80 / image cube urlimg/scene_002_%s_%v/l_%v.jpg / /image /sceneonstart在場(chǎng)景每次啟動(dòng)時(shí)都會(huì)執(zhí)行可以用它設(shè)置該場(chǎng)景的初始朝向。loadscene的第二個(gè)參數(shù)傳null表示沿用當(dāng)前相機(jī)狀態(tài)MERGE表示新場(chǎng)景和舊場(chǎng)景在過(guò)渡期間共存BLEND(1)表示過(guò)渡動(dòng)畫(huà)持續(xù) 1 秒。實(shí)際項(xiàng)目里我會(huì)把過(guò)渡時(shí)間控制在 0.8 到 1.2 秒之間太短顯得生硬太長(zhǎng)客戶會(huì)以為是卡頓。4.3 小行星開(kāi)場(chǎng)一個(gè) tween 就夠的視覺(jué)技巧小行星開(kāi)場(chǎng)是全景漫游里非常討喜的一個(gè)效果開(kāi)場(chǎng)先讓畫(huà)面在一個(gè)俯視視角然后快速轉(zhuǎn)到水平視角像一顆行星旋轉(zhuǎn)到眼前。這個(gè)效果在 krpano 里實(shí)現(xiàn)很簡(jiǎn)單不需要第三方插件核心就是tween。我常用的開(kāi)場(chǎng)動(dòng)作如下action namestartup if (not started, lookat(0, 90, 110); tween(view.vlookat, 0, 3.0, easeoutquad); tween(view.fov, 90, 3.0, easeoutquad); set(started, true); ); /actionlookat(0, 90, 110)把相機(jī)先放到頂部視角tween在 3 秒內(nèi)把垂直視角從 90 度降到 0 度同時(shí)視野從 110 收縮到 90。easeoutquad是緩動(dòng)曲線開(kāi)頭讓動(dòng)作先快后慢觀感上更自然。這段動(dòng)作掛在krpano根節(jié)點(diǎn)的onstart上只在首次加載時(shí)執(zhí)行一次。用if (not started, ...)包一層是為了防止場(chǎng)景切換時(shí)重新觸發(fā)這是新手最容易漏掉的一個(gè)判斷。5. 避坑指南全景圖制作中常見(jiàn)的五個(gè)“翻車點(diǎn)”與排查路徑工具類項(xiàng)目沒(méi)有不出問(wèn)題的krpano 的報(bào)錯(cuò)經(jīng)常藏在瀏覽器控制臺(tái)和網(wǎng)絡(luò)請(qǐng)求里。這一章記錄五條我實(shí)際遇到過(guò)并且能穩(wěn)定復(fù)現(xiàn)的坑按“現(xiàn)象 → 原因 → 解決”的結(jié)構(gòu)寫(xiě)后面做項(xiàng)目時(shí)可以直接當(dāng)排查手冊(cè)用。5.1 現(xiàn)象轉(zhuǎn)換后整體發(fā)灰飽和度明顯偏低源圖在拼接軟件里看色彩很正常轉(zhuǎn)換到 krpano 后卻像蒙了一層灰。原因大多是源圖色彩空間不是 sRGB而是 Adobe RGB 或 ProPhoto RGB。瀏覽器和 WebGL 渲染默認(rèn)按 sRGB 解析色域不匹配導(dǎo)致顏色被壓淡。解決方法是回到拼接軟件里把導(dǎo)出色彩空間改回 sRGB再重新導(dǎo)出源圖并轉(zhuǎn)換。如果原后期流程已經(jīng)鎖定了非 sRGB也可以在導(dǎo)出 JPG 時(shí)用批量工具做一次色彩空間轉(zhuǎn)換但這樣會(huì)多一步流程不如源頭解決。5.2 現(xiàn)象室內(nèi)地面拼接縫明顯轉(zhuǎn)動(dòng)時(shí)特別刺眼地面拼接縫是一個(gè)歷史遺留問(wèn)題。很多拼接軟件對(duì)地面和天空的處理比較弱尤其拍攝時(shí)底部云臺(tái)陰影、腳架入鏡會(huì)讓拼接算法在近地面區(qū)域出現(xiàn)錯(cuò)位。krpano 不會(huì)也不能修復(fù)這些拼接縫。解決思路是畫(huà)面底部如果只是輕微錯(cuò)位可以在拼接時(shí)添加地面控制點(diǎn)重新優(yōu)化如果已經(jīng)出了一版不可逆的成品可以用 krpano 的遮罩熱點(diǎn)蓋住縫隙前提是縫隙區(qū)域沒(méi)有重要內(nèi)容。注意遮罩不能做大面積的模糊貼片否則客戶轉(zhuǎn)動(dòng)看到一團(tuán)虛影觀感更糟。5.3 現(xiàn)象手機(jī)訪問(wèn)白屏刷新也沒(méi)用桌面瀏覽器表現(xiàn)正常手機(jī)一打開(kāi)就白屏或黑屏。常見(jiàn)原因是項(xiàng)目用的是舊版 Flash 渲染配置或者輸出時(shí)把html5參數(shù)寫(xiě)死成了條件比較嚴(yán)格的配置。手機(jī)瀏覽器基本都不支持 Flash白屏就是這個(gè)原因。解決方法是確認(rèn) krpano 版本支持 HTML5 渲染檢查配置文件里是否有html5only或類似的參數(shù)把它打開(kāi)。老項(xiàng)目升級(jí)皮膚時(shí)也容易踩這個(gè)坑換了一套舊模板之后手機(jī)端直接白屏排查時(shí)第一時(shí)間看配置文件比在 HTML 里改半天有效。5.4 現(xiàn)象熱點(diǎn)點(diǎn)擊沒(méi)有反應(yīng)控制臺(tái)報(bào) “unknown action”熱點(diǎn)擺好了坐標(biāo)也對(duì)但點(diǎn)擊就是沒(méi)反應(yīng)或者控制臺(tái)里報(bào)動(dòng)作名稱不認(rèn)識(shí)。原因大多不是坐標(biāo)問(wèn)題而是onclick里寫(xiě)了一個(gè)當(dāng)前場(chǎng)景沒(méi)有定義的動(dòng)作名或者動(dòng)作名拼寫(xiě)大小寫(xiě)不一致。krpano 的 XML 解析對(duì)大小寫(xiě)敏感OnClick和onclick在部分上下文里是兩個(gè)東西。解決方法是先在瀏覽器控制臺(tái)執(zhí)行g(shù)et(hotspot[spot1].onclick)確認(rèn)事件確實(shí)綁上了再看具體動(dòng)作名是否在action標(biāo)簽里定義過(guò)。如果熱點(diǎn)被皮膚導(dǎo)航條擋住也會(huì)導(dǎo)致點(diǎn)擊事件被攔截把熱點(diǎn)的zorder調(diào)到 100 以上通常能避開(kāi)大部分遮擋問(wèn)題。5.5 現(xiàn)象本地打開(kāi)正常部署到服務(wù)器后部分切片加載失敗同一個(gè)項(xiàng)目本地起服務(wù)訪問(wèn)沒(méi)問(wèn)題傳到服務(wù)器后卻有一半場(chǎng)景轉(zhuǎn)不動(dòng)網(wǎng)絡(luò)面板里能看到一堆 404 請(qǐng)求。原因通常是文件名大小寫(xiě)不一致。全景圖轉(zhuǎn)換時(shí)會(huì)生成類似l_4.jpg、F_1.jpg的切片Windows 文件系統(tǒng)不區(qū)分大小寫(xiě)但 Linux 服務(wù)器嚴(yán)格區(qū)分。解決方法是部署前把源素材統(tǒng)一命名成小寫(xiě)轉(zhuǎn)換后再檢查一下輸出目錄里有沒(méi)有大寫(xiě)文件名如果有寫(xiě)腳本批量重命名并同步修改 tour.xml 里的對(duì)應(yīng)路徑。6. 交付前驗(yàn)證用瀏覽器控制臺(tái)和切片請(qǐng)求把問(wèn)題攔在門外前面幾章解決了“怎么生成”和“怎么交互”最后一章講一個(gè)我每次交付前都會(huì)做的驗(yàn)證套路能提前發(fā)現(xiàn)至少一半的運(yùn)行時(shí)問(wèn)題。6.1 用控制臺(tái)查狀態(tài)獲取當(dāng)前視角與熱點(diǎn)坐標(biāo)打開(kāi)頁(yè)面的開(kāi)發(fā)者工具在控制臺(tái)里可以直接調(diào)用 krpano 的內(nèi)部接口。比如想看當(dāng)前視角是什么執(zhí)行krpano.get(view.hlookat)和krpano.get(view.vlookat)返回值就是當(dāng)前朝向的水平和垂直角度。這個(gè)技巧在放置熱點(diǎn)時(shí)非常有用——先把熱點(diǎn)擺到大概位置打開(kāi)控制臺(tái)讀取坐標(biāo)再回 XML 里精確修改比反復(fù)刷新頁(yè)面憑感覺(jué)調(diào)快得多。同樣地?zé)狳c(diǎn)的實(shí)際坐標(biāo)也可以讀出來(lái)。假設(shè)熱點(diǎn)名為spot1執(zhí)行krpano.get(hotspot[spot1].ath)就能拿到它的水平坐標(biāo)。如果點(diǎn)擊熱點(diǎn)后場(chǎng)景一直在轉(zhuǎn)也可以在這個(gè)階段檢查場(chǎng)景切換動(dòng)作是否被重復(fù)觸發(fā)。6.2 看網(wǎng)絡(luò)請(qǐng)求判斷金字塔切片是否真的生效加載性能問(wèn)題不能只靠感官判斷。打開(kāi)開(kāi)發(fā)者工具的網(wǎng)絡(luò)面板篩選Img請(qǐng)求緩慢拖動(dòng)視角。正常情況是網(wǎng)絡(luò)請(qǐng)求隨著視野移動(dòng)零散出現(xiàn)同一時(shí)刻只有視野內(nèi)的切片在加載。如果一次性涌出成百上千個(gè)請(qǐng)求說(shuō)明切片配置沒(méi)有生效或者轉(zhuǎn)換時(shí)直接輸出了平面大圖而不是金字塔切片這時(shí)候回到轉(zhuǎn)換配置里檢查multires相關(guān)參數(shù)。移動(dòng)端驗(yàn)證再加一步開(kāi)啟開(kāi)發(fā)者工具的設(shè)備模擬或者直接用真機(jī)訪問(wèn)重復(fù)上面的拖動(dòng)操作觀察請(qǐng)求數(shù)量和單個(gè)圖片大小。手機(jī)端一次加載幾十張 512 像素切片很正常但如果跑到一兩百?gòu)埦鸵紤]降低levelres或者單獨(dú)發(fā)布移動(dòng)端配置。6.3 一套簡(jiǎn)單的交付前檢查清單我把最近一次項(xiàng)目中踩過(guò)的問(wèn)題整理成一個(gè)短清單每次交付前都會(huì)過(guò)一遍檢查項(xiàng)驗(yàn)證方式初始視角是否正確打開(kāi)頁(yè)面第一眼是不是想要的方向和視野場(chǎng)景切換是否流暢點(diǎn)擊熱點(diǎn)后觀察BLEND過(guò)渡是否正常有沒(méi)有白屏手機(jī)端是否卡頓真機(jī) 4G 開(kāi)關(guān)下拖動(dòng)視角記錄響應(yīng)延遲切片請(qǐng)求是否合理網(wǎng)絡(luò)面板里請(qǐng)求數(shù)量是否隨視野變化而不是一次性全加載熱點(diǎn)坐標(biāo)是否準(zhǔn)確控制臺(tái)讀取ath/atv與實(shí)景位置比對(duì)那次趕一個(gè)演示項(xiàng)目我在本地把切片調(diào)得又大又全交付前忘了看一眼手機(jī)端到了現(xiàn)場(chǎng)用手機(jī)掃碼轉(zhuǎn)一下卡一下場(chǎng)面相當(dāng)狼狽。從那以后我每次交付前都強(qiáng)制走一遍這個(gè)清單清緩存重開(kāi)、手機(jī)流量訪問(wèn)、控制臺(tái)看瓦片請(qǐng)求、熱點(diǎn)坐標(biāo)抽查。這個(gè)習(xí)慣救了不少項(xiàng)目上線后的返工。希望這一整套全景圖轉(zhuǎn)換、交互和排查的思路能幫你也少翻幾次車。本文還有配套的精品資源點(diǎn)擊獲取