Google VR 圖片

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

基本範例

<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

• mono

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-google-vrview-image
• AMP By Example
• google - developers
• google - developers