使用過HTML5制作動畫過程的開發者都知道，HTML5頁面給人一種逼真的感覺，同時HTML也是可以制作VR頁面，但是需要你熟練HTML5與JavaScript開發過程，所以在有必要的情況下，我們可以用工具制作簡單的VR頁面效果圖。
在我們開始演練之前，以下是我們需要的工具：
草圖，我們將使用Sketch來設計我們的界面和用戶流程，如果你沒有，可以下載試用版。Sketch是我們首選的界面設計軟件，但如果你使用Photoshop或其他任何東西更舒服，那也可以。
GoPro VR Player，GoPro VR Player是一款360度內容查看器。它由GoPro提供，是免費的。我們將使用它來預覽我們的設計並在上下文中測試它們。
Oculus Rift將 Oculus Rift連接到GoPro VR播放器將使我們能夠在上下文中測試設計。
VR界面設計的一個過程
在本文中，我們將介紹如何設計VR界面的簡短教程，將一起設計一個簡單頁面，應該花五分鍾的時間。
網上下載所需要的材料，其中包含預設的UI元素和背景圖像。如果你想使用自己的圖片作為材料也可以。
1.設置“360視圖”
首先要做的事情。讓我們創建代表360度視圖的畫布。在Sketch中打開一個新文檔，並創建一個畫板：3600×1800像素。導入名為的文件background.jpg，並將其放在畫布的中間。如果你使用自己的equirectangular背景，請確保其比例為2：1，並將其大小調整為3600×1800像素。
2.設置畫板
在前一個旁邊創建一個新畫板：1200×600像素。然后，將我們剛添加的背景復制到“360 View”中，並將其放在新畫板的中間。不要調整大小，我們想在這里保留背景的裁剪版本。
3.設計界面
我們將在“UI View”畫布上設計我們的界面。為了更好練習，我們會制作比較簡單。如果你感到懶惰，只需抓住tile.png將其拖到UI視圖的中間。復制它，並創建一行三個圖塊。抓住kickpush-logo.png，並將其放在需要的地方上方。
如圖：看起來開始有點效果。
4.合並畫板和出口
注意：確保“UI視圖”畫板位於左側圖層列表中的“360視圖”畫板上方。
將“UI視圖”畫板拖動到“360視圖”畫板的中間。將“360 View”畫板導出為PNG; “UI視圖”將位於其上方。
5.在VR中測試它
打開GoPro VR Player並將剛剛導出的“360 View”PNG拖到窗口中。使用鼠標拖動圖像以預覽360度環境。
我們完成了！制作VR視圖就是那么簡單，
如果你的機器上安裝了Oculus Rift，則GoPro VR Player應檢測到它並允許你使用VR設備預覽圖像，效果會更加明顯。
HTML5在制作動畫過程需要大量代碼，而且不一定能保證能做出vr效果圖。