浅谈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中,又要数单页面架构体验 ...
随机推荐
- creat-react-app生成的项目默认端口号是3000,如何更改?
从项目的 package.json 文件中可以看到,npm start即scripts start.js,因此我们找到scripts/start.js ,部分代码如下: 找到 DEFAULT_PORT ...
- u-boot bl _main分析
ldr r0, =(CONFIG_SYS_INIT_SP_ADDR): #define CONFIG_SYS_INIT_SP_ADDR (CONFIG_SYS_INIT_RAM_ADDR ...
- git学习补充
关系图 git checkout -- target 放弃 cached 中 对 target 文件内容已作的修改 git checkout . 放弃当前目录下对于 cached 的所有修改. 对比: ...
- xDSL相关
----------------------- --------------
- 设计模式Design Pattern(4) -- 访问者模式
什么是访问者模式? 一个对象有稳定的数据结构,却为不同的访问者提供不同的数据操作,对象提供接收访问者的方法,从而保证数据结构的稳定性和操作的多样性.也可以理解为,封装对象的操作方法,达到不改变对象数据 ...
- org.springframework.web.servlet.view.ContentNegotiatingViewResolver
restful服务中一个重要的特性就是一种资源可以有多种表现形式,在springmvc中可以使用ContentNegotiatingViewResolver这个视图解析器来实现这种方式. 描述资源的三 ...
- mongodb切片配置方法
---------------------------------切片架构图-------------------------------------------------------------- ...
- 【regex】POSIX标准正则表达式库
在linux C 下面没有编译成功使用?号的非贪婪模式. 网上的一句话:the ? only works for Perl-based regexp, not for POSIX... 如果需要使用非 ...
- C# WPF开机自启动和只允许一个程序运行
本文出自:https://www.cnblogs.com/2186009311CFF/p/10024949.html 在App.xaml.cs填充一下内容,即可实现只允许一个运行,且不解锁屏幕的情况下 ...
- python-套接字编程之tcp
服务端和客户端. 服务端脚本: # Auther:AlphaPanda # Description:server # Version:1 # Date:Mon Dec 2 09:02:01 EST 2 ...