浅谈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效果图。
浅谈html5在vr中的应用的更多相关文章
- 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...
- 浅谈html5网页内嵌视频
更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
- 浅谈html5 video 移动端填坑记
这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...
- 浅谈线程池(中):独立线程池的作用及IO线程池
原文地址:http://blog.zhaojie.me/2009/07/thread-pool-2-dedicate-pool-and-io-pool.html 在上一篇文章中,我们简单讨论了线程池的 ...
- 【ASP.NET MVC系列】浅谈NuGet在VS中的运用
一 概述 在我们讲解NuGet前,我们先来看看一个例子. 1.例子: 假设现在开发一套系统,其中前端框架我们选择Bootstrap,由于选择Bootstrap作为前端框架,因此,在项目中,我们 ...
- 浅谈surging服务引擎中的rabbitmq组件和容器化部署
1.前言 上个星期完成了surging 的0.9.0.1 更新工作,此版本通过nuget下载引擎组件,下载后,无需通过代码build集成,引擎会通过Sidecar模式自动扫描装配异构组件来构建服务引擎 ...
- 浅谈如何检查Linux中开放端口列表
给大家分享一篇关于如何检查Linux中的开放端口列表的详细介绍,首先如果你想检查远程Linux系统上的端口是否打开请点击链接浏览.如果你想检查多个远程Linux系统上的端口是否打开请点击链接浏览.如果 ...
- 浅谈HTML5单页面架构(一)——requirejs + angular + angular-route
心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...
随机推荐
- 图形计算器(geogebra[5.0.278.0])使用QQ浏览器打开下载
点击这里下载Geogebra图形计算器
- 关于antd表单的自行校验
rules里面加上validator验证,value就是输入的值 上面为正则表达式的检验
- 【NOIP2016提高A组模拟9.15】Osu
题目 分析 考虑二分答案, 二分小数显然是不可取的,那么我们将所有可能的答案求出来,记录在一个数组上,排个序(C++调用函数很容易超时,手打快排,时间复杂度约为\(O(>8*10^7)\),但相 ...
- Python连接MySQL之Python库pymysql
连接数据库 pymysql连接数据库的方式和使用sqlite的方式基本相同: 使用connect创建连接对象 connect.cursor创建游标对象,SQL语句的执行基本都在游标上进行 cursor ...
- ubuntu下恢复被rm删除的文件
ubuntu是文件系统,不像windows系统划分盘符(C/D/E/etc...盘).ubuntu对磁盘划分分区,可以使用extundelete恢复ext3/ext4格式的磁盘分区. 其中,ext3/ ...
- Vue CLI4.0版本正式发布了!一起来看看有哪些新的变化吧
Vue CLI4.0版本正式发布 这个主要的版本更新主要关注底层工具的必要版本更新.更好的默认设置和其他长期维护所需的微调. 我们希望为大多数用户提供平稳的迁移体验. Vue CLI v4提供了对Ni ...
- 洛谷P4208 [JSOI2008]最小生成树计数——题解
题目传送 前置知识:对于同一个图的所有最小生成树,权值相等的边的数量相同. 可以简单证明一下: 我们可以从kruskal的过程考虑.这个算法把所有边按权值大小从小到大排序,然后按顺序看每条边,只要加上 ...
- Redis高级命令及特性(安全性)
高级命令 keys * : 返回满足的所有键 ,可以模糊匹配 exists :是否存在指定的key,存在返回1,不存在返回0 exprie:设置某个key的过期时间 ttl:查看剩余时 ...
- [BZOJ4237]稻草人:CDQ分治+单调栈
分析 按\(y\)排序后CDQ分治,可以发现每个点可以影响的是\(x\)坐标的一段区间,可以使用扫描线+单调栈,在单调栈上二分即可解决,时间复杂度\(O(n \log^2 n)\). 通过归并排序可以 ...
- [CSP-S模拟测试]:彩球问题(记忆化搜索)
题目传送门(内部题91) 输入格式 第一行一个正整数$N$,表示颜色种类数. 第二行$N$个正整数$k[i],k[i]$表示第$i$种颜色的数量$(1\leqslant k[i]\leqslant 3 ...