使用A-Frame,开始打造第一个Web VR站点!
VR技术的出现带来的主要是信息、图像等展示方式的改变。例如,以前玩游戏时,你只是在枯燥的屏幕上猎杀怪兽,现在通过VR眼睛你也能体验到身临其境的参与感。
现在,有团队将VR技术搬到网页浏览上。近日,Mozilla旗下的VR研究团队MozVR推出了一款VR网页制作的开源框架A-Frame。这套框架能够降低VR网页的制作难度,让更多的人投入到VR网页的开发当中,加快这项技术的普及。
什么是A-Frame?A-Frame能干什么?让你的网页与VR融合,只需一行代码!
A-Frame是一个用来构建虚拟现实(VR)应用的网页开发框架。由WebVR的发起人MozillaVR团队所开发,是当下用来开发WebVR内容最强大最易用的技术方案。WebVR是一个完全开源的项目,已成长为最大的VR社区。
A-Frame基于HTML,容易上手。但是A-Frame不仅仅是一个3D场景渲染引擎或者一个标记语言。其核心思想是基于Three.js来提供一个声明式、可扩展以及组件化的编程结构。
A-Frame支持主流VR头显如Vive,Rift,Daydream,GearVR,
Cardboard,甚至可被用于增强现实(AR)。虽然A-Frame支持全谱,A-Frame的目标是定义具有位置跟踪和操控的完全身临其境和交互式VR体验,超出基本的360°内容呈现。MozillaVR团队正在使用A-Frame构建虚拟实境(Metaverse)项目的基础。
Metaverse由meta和verse组成,meta表示超越,verse表示现实世界,合起来就寓意超现实,技术上是VR、AR和移动互联网的融合。
A-Frame的开发方式其实就是使用普通的HTML文件,而无需安装任何插件。你可以使用踏得网在线开发工具来快速构建一个可在线部署和访问的应用,或者使用SublimeText离线工具来编写代码然后自行发布到网上。如果是使用前者,我们需要在第三方库中选择A-Frame0.5.0,踏得网在线开发工具会自动帮您在代码中引入A-Frame框架;如果是后者,我们需要在HTML代码的元素中手动引入A-Frame框架,形式如下:
<html> <head> <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html>
根据Engadget的报道,这款A-Frame框架比传统的VR网页制作要简单不少。开发者无需花时间学习复杂的3D绘图标准WebGL,只需要增加A-Frame框架用的代码,再结合熟悉的HTML代码,就能完成VR网页的基本组件。
也许网站在不久的将来也面临从Web2.0向VR的转变!让我们拭目以待吧!
青岛网站优化工作笔记
- 青岛网站设计制作如何用PS 进行批量处理...
- 2016-2017网站设计15大流行趋势预测...
- 技术篇—按照姓氏笔画排序...
- Dedecms栏目文章列表为空的解决办法...
- 2018UI设计趋势提前预告...
- 网站被恶意镜像,您岂能袖手旁观...
- 重要通知:国际域名.com/.net将进行实名制...
- 如何让dedecms搜索页支持arclist标签...
- 阿里云栖社区独家技术资料免费下载...
- 高美工外贸站赏析...
- 如何改善移动页面用户体验从这篇分析报告...
- 设计网页的23条有用技巧(眼动追踪[Eye-Tra...
- 如何选择网站空间的操作系统...
- 青岛迅优网络科技有限公司2014年新春贺词...
- 阿里云免费SSL证书部署网站HTTPS...
- 外贸营销型网站建设9大技巧...
- 青岛网站建设之前端测试服务...
- dedecms首页网址自动加上index.html问题解...