iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0
Modern Web

AMP系列 第 26

AMP(Lession 26) - Google VR 圖片

Google VR 圖片

接下來在 AMP 的世界裡玩玩 VR image 吧!這是個 AMP 試驗中的功能,我們先來看看這兒的範例吧!

https://ithelp.ithome.com.tw/upload/images/20181026/20078336U6dCJ9ng2H.png

基本範例

<amp-google-vrview-image
    src="https://storage.googleapis.com/vrview/examples/coral.jpg"
    stereo
    width="400" height="300" layout=responsive>
</amp-google-vrview-image>

Required Script

<script async custom-element="amp-google-vrview-image" src="https://cdn.ampproject.org/v0/amp-google-vrview-image-0.1.js"></script>

Attributes

src

圖片來源,一定要是 https

stereo

如果使用的話,圖片格式會被視為立體的(由 2 張堆疊的 image 組成),否則的話,會被設為 mono (為 1 張全景圖)

  • stereo

https://ithelp.ithome.com.tw/upload/images/20181026/20078336OrHEl9j2Sv.png

  • mono

https://ithelp.ithome.com.tw/upload/images/20181026/20078336ytXZaq5C8U.png

yaw

觀察者的初始偏航,以度為單位。 默認為0。

yaw-only

設定運動僅為偏航

note

  • VR image 可以存儲為 png 、 jpeg 或 gif 。 推薦使用 jpeg 來改善壓縮效果。
  • 為獲得最大兼容性和性能,圖像尺寸應為2的次方(例如,2048或4096)。
  • mono image 的寬高比應為2:1(例如4096 x 2048)。
  • stereo image 的寬高比應為1:1(例如4096 x 4096)。

看起來好像不容易,但實際做過後,是不是很簡單、很方便就完成了呢!附帶一提,如果你不知如何產生 VR image 素材,照 Google VR 的官方推薦,你可以試用看看Cardboard 相機來幫你


參考來源:


上一篇
AMP(Lession 25) - 用 position observer 實現 scrolling 頁面時的一些互動效果
下一篇
AMP(Lession 27) - sidebar 的設定
系列文
AMP30

尚未有邦友留言

立即登入留言