29 發(fā)布到網站

發(fā)布到網站

ptgui查看器插件可用于在網站上發(fā)布360度或全球形全景。這個插件可以讓網站訪問者通過鼠標點擊和拖動來“環(huán)視”全景圖。


fabu (1).jpg

ptgui可以在一次點擊中生成所有必要的文件邑飒,以便在網站上發(fā)布全景圖。ptgui查看器支持多種技術:

  • Flash:Adobe Flash Player插件(10.0或更高版本)
  • CSS3D:HTML級聯樣式表標準的3D擴展
  • WebGL:用于Web瀏覽器的OpenGL實現。

所有現代網頁瀏覽器(包括智能手機和平板電腦)都支持CSS3D或WebGL(或兩者都支持)田绑。在舊的瀏覽器上,Flash插件通常是可用的抡爹。通過ptgui查看器自動地選擇適當的技術掩驱。你只需要發(fā)布一次全景圖就可以在幾乎每臺電腦、平板電腦或智能手機上看到它冬竟。

用法

首先應該將全景圖縫合成一個等距投影全景圖像欧穴。接下來,使用“發(fā)布到網站”工具轉換生成的全景圖泵殴。最后涮帘,生成的文件需要上傳到Web服務器,例如通過ftp笑诅。

縫合全景圖

縫合全景圖時调缨,最好以等矩形投影創(chuàng)建全景圖疮鲫;為此,請單擊全景編輯器中的按鈕弦叶。使用兩個滑塊調整視場俊犯,直到全景填充整個畫布。不要在全景編輯器中使用黃色裁剪線:這會導致不對稱裁剪伤哺,而ptgui查看器不支持這種裁剪燕侠。

記下全景的水平視野:這顯示在全景編輯器窗口的底部狀態(tài)欄中。例如立莉,如果全景編輯器中的狀態(tài)欄顯示“360°x 180°等矩形”绢彤,則水平視野為360度。建議僅對寬度大于180度的全景使用“發(fā)布到網站”工具:在內部桃序,全景轉換為360°x 180°的完整表示杖虾;如果全景的可視部分只是一小部分,則會浪費大量空間媒熊。

要創(chuàng)建全景圖奇适,請選擇“最佳大小”->“最大大小”。然后以tiff或jpeg格式呈現全景圖芦鳍。

轉換為Web顯示

創(chuàng)建全景圖后嚷往,選擇工具->發(fā)布到網站…打開轉換工具。

單擊添加文件以加載縫合的全景圖柠衅。通過將多個全景圖添加到列表中皮仁,可以一次轉換多個全景圖。如果需要從列表中刪除全景菲宴,請使用“刪除”贷祈。

設置投影和水平視場以匹配全景的屬性(即等距投影和上述視場)。

在輸出部分喝峦,指定生成文件的目標文件夾和文件名势誊。該工具生成.jpg圖塊、一個.htm文件和兩個插件文件(ptguiviewer.js和ptguiviewer.swf)谣蠢。.jpg和.htm文件將以“另存為”字段中選擇的文件名作為前綴粟耻。如果選中“保存到源文件夾中具有相同名稱的文件”,則輸出文件將放置在包含源圖像的文件夾中眉踱,文件名前綴與源文件名相同挤忙。

創(chuàng)建的文件顯示將生成的文件的名稱摘要。

設置

fabu (3).jpg

分辨率:生成的.jpg圖塊的組合大刑冈(以百萬像素為單位)册烈。使用自動選擇最佳尺寸,在該尺寸下不會出現質量損失叁执。使用較小的尺寸可以縮短全景圖完全顯示之前的下載時間茄厘,但也會降低圖像質量矮冬。在自動設置中,輸出全景尺寸限制為6000萬像素次哈。這可以通過取消選擇自動來覆蓋胎署,但是這樣大的全景不能可靠地顯示在每臺計算機上。

ipad/iphone/ipod大小限制:ptgui查看器支持內存有限的Apple移動設備窑滞。如果全景圖太大(即像素太多)琼牧,設備上的Safari瀏覽器將耗盡內存,可能會在沒有警告的情況下關閉哀卫。因此巨坊,可以為這些設備設置單獨的尺寸限制。在實踐中此改,450萬像素是一個安全限制(近年硬件水平提升很快趾撵,可以設置大一點)。

jpeg質量:質量級別(0..100)生成的.jpg文件共啃。數字越小占调,下載質量越低,但速度越快移剪。

此外究珊,還可以配置初始角度、傾斜和視野纵苛。對于每個參數剿涮,可以設置初始值憎瘸、最小值和最大值:

平移設置并限制水平查看方向:0是全景的中心缎玫,-180是最左側,180是最右側悔常。

傾斜設置并限制垂直觀察方向:0是地平線怀吻,90是天頂想括,90是最低點。

選擇Automatic(自動)可自動設置平移和傾斜限制烙博,從而使可見區(qū)域限于全景的邊界。

視場設置并限制縮放:值越小烟逊,放大越大渣窜,縮小越大。

自動旋轉:如果啟用宪躯,全景圖將在打開后立即開始旋轉乔宿。你網頁的訪問者會立刻注意到它是一幅全景圖,而不是一幅平面圖访雪。速度以每秒度為單位設置旋轉速度详瑞。以每秒5度的速度旋轉(360度)需要72秒掂林。正速度設置將“相機”向右旋轉,負速度設置將反向旋轉坝橡。

一旦用戶單擊全景圖泻帮,自動旋轉就會停止。如果啟用“恢復后”计寇,自動旋轉將在選定的不準確時間后重新開始锣杂。

顯示全屏按鈕:默認情況下,擊全屏按鈕將顯示在右上角番宁。點擊它將切換到全屏顯示模式元莫。選擇顯示全屏按鈕,或選擇否以禁止全屏查看蝶押。

陀螺儀導航:啟用后踱蠢,在移動設備上,可以通過旋轉和傾斜設備來導航全景圖棋电。

創(chuàng)建:您可以選擇生成所有必需的文件茎截,或者只生成.jpg圖塊。如果ptgui查看器文件已經在Web服務器上离陶,并且您正在使用自定義的html/php代碼來顯示全景圖稼虎,則使用后者。

該工具將為您生成一個基本的HTML頁面招刨。在網頁標題處輸入所需的網頁標題霎俩;這將顯示在全景圖上方和瀏覽器的標題欄中。在描述中沉眶,您可以輸入一些要顯示在全景圖下面的文本打却。

上傳到網站

最后,所有生成的文件(.jpg谎倔、.htm柳击、ptguiviewer.js和ptguiviewer.swf)都應上載到Web服務器。通常通過ftp片习、sftp或scp完成捌肴。有關如何執(zhí)行此操作的詳細信息,請與您的網絡托管公司聯系藕咏。上傳文件后状知,鏈接到上傳的.htm文件以顯示全景圖。

使用自定義模板

fabu (2).jpg

ptgui將生成一個具有默認布局的基本網頁孽查。如果您知道如何編輯HTML和CSS饥悴,您可以像其他HTML文件一樣自定義生成的網頁。或者西设,可以使用模板自定義“發(fā)布到網站”工具生成的頁面布局瓣铣。

選擇“使用自定義模板”以使用自己的模板。單擊“瀏覽”并指向您自己的模板文件(.htm格式)贷揽√男Γ或者點擊創(chuàng)建模板來創(chuàng)建一個新的模板文件:這會創(chuàng)建一個ptgui默認模板的副本,您可以自定義它擒滑。

該模板是一個常規(guī).htm文件腐晾,其中包含3個自定義標記:

  • 標題-將替換為在網頁標題字段中輸入的值
  • 描述-替換為在描述字段中輸入的文本
  • 參數-全景查看器插件的參數

查看器使用javascript代碼嵌入在網頁中;最好從默認模板復制此代碼丐一。

本地瀏覽

ptgui查看器是為在網站上使用而設計的藻糖。雖然也可以在計算機上本地查看生成的.htm文件,但是Web瀏覽器和Flash具有安全限制库车,無法訪問存儲在計算機硬盤上的文件巨柒。

如果由于內存安全限制,ptgui查看器無法顯示全景圖柠衍,它將顯示設置安全異常的說明洋满。在某些瀏覽器中,本地javascript也受到限制珍坊,這可能導致文件駐留在計算機上時根本不顯示查看器牺勾。一旦全景圖上傳到網站上,這些限制就沒有了阵漏。

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末驻民,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子履怯,更是在濱河造成了極大的恐慌回还,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,104評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叹洲,死亡現場離奇詭異柠硕,居然都是意外死亡,警方通過查閱死者的電腦和手機运提,發(fā)現死者居然都...
    沈念sama閱讀 94,816評論 3 399
  • 文/潘曉璐 我一進店門蝗柔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人民泵,你說我怎么就攤上這事诫咱。” “怎么了洪灯?”我有些...
    開封第一講書人閱讀 168,697評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我签钩,道長掏呼,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,836評論 1 298
  • 正文 為了忘掉前任铅檩,我火速辦了婚禮憎夷,結果婚禮上,老公的妹妹穿的比我還像新娘昧旨。我一直安慰自己拾给,他們只是感情好,可當我...
    茶點故事閱讀 68,851評論 6 397
  • 文/花漫 我一把揭開白布兔沃。 她就那樣靜靜地躺著蒋得,像睡著了一般。 火紅的嫁衣襯著肌膚如雪乒疏。 梳的紋絲不亂的頭發(fā)上额衙,一...
    開封第一講書人閱讀 52,441評論 1 310
  • 那天,我揣著相機與錄音怕吴,去河邊找鬼窍侧。 笑死,一個胖子當著我的面吹牛转绷,可吹牛的內容都是我干的伟件。 我是一名探鬼主播,決...
    沈念sama閱讀 40,992評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼议经,長吁一口氣:“原來是場噩夢啊……” “哼斧账!你這毒婦竟也來了?” 一聲冷哼從身側響起爸业,我...
    開封第一講書人閱讀 39,899評論 0 276
  • 序言:老撾萬榮一對情侶失蹤其骄,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后扯旷,有當地人在樹林里發(fā)現了一具尸體拯爽,經...
    沈念sama閱讀 46,457評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,529評論 3 341
  • 正文 我和宋清朗相戀三年钧忽,在試婚紗的時候發(fā)現自己被綠了毯炮。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,664評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡耸黑,死狀恐怖桃煎,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情大刊,我是刑警寧澤为迈,帶...
    沈念sama閱讀 36,346評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響葫辐,放射性物質發(fā)生泄漏搜锰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,025評論 3 334
  • 文/蒙蒙 一耿战、第九天 我趴在偏房一處隱蔽的房頂上張望蛋叼。 院中可真熱鬧,春花似錦剂陡、人聲如沸狈涮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽歌馍。三九已至,卻和暖如春纤泵,著一層夾襖步出監(jiān)牢的瞬間骆姐,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評論 1 272
  • 我被黑心中介騙來泰國打工捏题, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留玻褪,地道東北人。 一個月前我還...
    沈念sama閱讀 49,081評論 3 377
  • 正文 我出身青樓公荧,卻偏偏與公主長得像带射,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子循狰,可洞房花燭夜當晚...
    茶點故事閱讀 45,675評論 2 359

推薦閱讀更多精彩內容