浅谈html5在vr中的应用

　　使用过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效果图。