在有必要的情况下我们可以用工具制作简单的页面效果

　　使用过HTML5制作动画过程的开发者都知道，HTML5页面给人一种逼真的感觉，同时HTML也是可以制作VR页面，但是需要你熟练HTML5与JavaScript开发过程，所以在有必要的情况下，我们可以用工具制作简单的VR页面效果图。
　　在我们开始演练之前，以下是我们需要的工具：
　　草图，我们将使用Sketch来设计我们的界面和用户流程，如果你没有，可以下载试用版。Sketch是我们首选的界面设计软件，但如果你使用Photoshop或其他任何东西更舒服，那也可以。
　　GoProVRPlayer，GoProVRPlayer是一款360度内容查看器。它由GoPro提供，是免费的。我们将使用它来预览我们的设计并在上下文中测试它们。
　　OculusRift将OculusRift连接到GoProVR播放器将使我们能够在上下文中测试设计。
　　VR界面设计的一个过程
　　在本文中，我们将介绍如何设计VR界面的简短教程，将一起设计一个简单页面，应该花五分钟的时间。
　　网上下载所需要的材料，其中包含预设的UI元素和背景图像。如果你想使用自己的图片作为材料也可以。
　　1。设置360视图
　　首先要做的事情。让我们创建代表360度视图的画布。在Sketch中打开一个新文档，并创建一个画板：36001800像素。导入名为的文件background。jpg，并将其放在画布的中间。如果你使用自己的equirectangular背景，请确保其比例为2：1，并将其大小调整为36001800像素。
　　2。设置画板
　　在前一个旁边创建一个新画板：1200600像素。然后，将我们刚添加的背景复制到360View中，并将其放在新画板的中间。不要调整大小，我们想在这里保留背景的裁剪版本。
　　3。设计界面
　　我们将在UIView画布上设计我们的界面。为了更好练习，我们会制作比较简单。如果你感到懒惰，只需抓住tile。jpg将其拖到UI视图的中间。复制它，并创建一行三个图块。抓住kickpushlogo。jpg，并将其放在需要的地方上方。
　　如图：看起来开始有点效果。
　　4。合并画板和出口
　　注意：确保UI视图画板位于左侧图层列表中的360视图画板上方。
　　将UI视图画板拖动到360视图画板的中间。将360View画板导出为PNG；UI视图将位于其上方。
　　5。在VR中测试它
　　打开GoProVRPlayer并将刚刚导出的360ViewPNG拖到窗口中。使用鼠标拖动图像以预览360度环境。
　　我们完成了！制作VR视图就是那么简单，
　　如果你的机器上安装了OculusRift，则GoProVRPlayer应检测到它并允许你使用VR设备预览图像，效果会更加明显。
　　HTML5在制作动画过程需要大量代码，而且不一定能保证能做出vr效果图。