5G时代即将来临，VR虚拟现实技术会得到更大发展，WebVR将逐渐走入大众视野！

web端的虚拟现实（webVR）
WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实（VR）体验，但从工程化的角度而言，开发社区还需要更多方便强大的开发库来简化编程，Mozilla的 A-Frame 框架就是这样一个工具，提供了一个Web开发者所熟悉的标记语言来快速构建3D VR场景动画原型，而不需要编写过多的JavaScript和GLSL语句。本文将介绍如何使用A-Frame构建一个简单的在线可运行实例。
有了A-frame，我们就可以用类似dom的形式来创建3D建模和VR界面了。
概览
当前A-Frame版本是0.5.0，由于WebVR标准乃至WebGL标准都还在快速发展演进中，因此A-Frame仍然处于高度技术实验的状态，远未达成商业成熟。但是对于开启了相应设置的最新浏览器而言，A-Frame是可以正常工作的。它可以在桌面、移动设备（iOS和Android）、Oculus Rift, Gear VR 和 HTC Vive上运行。
A-Frame 构建在WebGL接口之上（事实上其内置了Three.js开发框架），并为应用程序提供了一些预装基础组件如 - 模型、视频播放器、天空环境、几何模型、控制器、动画和鼠标等。A-Frame 基于游戏领域常用的实体组件系统（entity component system），但定位于Web开发，使用标记语言以及使用javascript语言来进行操作，最终达到在网页中获得3D虚拟现实体验的设计目标。
开发环境

首先要有一个现代浏览器，支持WebGL和WebVR，比如最新版本的Firefox（Firefox Nightly）或Chrome（v54+）。
（可选）设置一个VR设备如Oculus Rift、HTC Vive或者 Google Cardboard。
可以到这里下载

HTML代码结构

效果如下：（就右下角一个VR图标）

初始化场景
场景（scene）是所有VR内容的容器，当创建新的对象后，我们只有把这些对象加到场景中，才能真正在屏幕上被看到。在 A-Frame 中，场景通过一个场景实体（Scene entity）元素来表达。
注意：一个实体（Entity）可以是任意元素 - 可以是盒子、圆柱、圆锥对象，也可以是一个相机（camera）、光源（light）或者声源（sound）。
我们通过在元素中添加一个元素来添加场景对象，即在踏得网在线开发平台的html面板中添加如下代码。

一个天空盒（skybox）是三维世界的背景，通过一个元素来表示。在这里，我们使用一个简单的颜色背景，但它也可以是一个图像（image）等。环顾四周的时候可以营造一种在天空中或者木质车库或者任何你喜欢的环境中的感觉。添加如下的标记代码在元素之前：

这里选第4张图下载下来

此时就能生成可操作的全景效果了
效果如视频
视频得去公众号看啦~这里不能放进来

添加一个几何模型
接着我们在元素中添加一个元素，这等于是在场景中添加一个立方体：

到这里，如果你点击菜单中的“运行”按钮（或者按CTRL+R快捷键），我们将看到一个带背景的立方体，并且可以通过鼠标（如果是通过电脑屏幕查阅该作品）操控它：

我们很容易就完成了一个VR小应用，这是因为 A-Frame 帮我们做了很多事情：
该应用程序包含了一个缺省的光源和相机，所以我们能看到场景中的模型。
有现成可用的操作控制器：可以360°浏览，可以通过键盘上的WASD按键来行走。
屏幕右下角还有一个"Enter VR mode"按钮（眼镜形状的图标），可以切换到全屏模式，如果你设置好了VR设备，那么将可以进入虚拟现实模式。
指定一个相机
相机通过元素来添加到场景中。我们可以显式设置相机的位置，把相机放在场景中心稍退后一点的位置上，这样我们能看清模型形状，我们把该元素添加在场景元素的关闭标签之前：

上述代码中，我们还通过 cursor-* 属性给相机定义了游标（cursor，缺省情况下不可见）- 我们设置了游标的缩放因子（scale），这样就更容易被看见，透明度设置为0.5，这样不会完全挡住游标后面的物体。

添加光源
A-Frame中的基础光源类型是平行光（directional light）和环境光（ambient light）。平行光被放在场景某处而环境光是来自该平行光的反射，这样光线看起来比较自然。光源元素的标签为，把下面的代码添加到前述相机元素之后：

这样我们添加了一个白色平行光，光强为0.5，位置在 (-1, 1, 2) 。

添加高级模型
前面我们通过添加过立方体，但是A-Frame并不局限于只能添加固定模型，还可以添加自定义的复杂形状模型，这通过使用标签来实现：

这里的实体其几何模型基于一个麻花原型（torus primitive），其他的一些参数用来定制该模型的外形：torus的外边界半径、管道半径和管道分段数，位置和角度的设置和前述的立方体类似。

定义材料
现在我们已经在场景中可以看到 torus 模型，但颜色看起来不太好，因为该模型还缺少定义其表面属性的材质（material ），我们需要创建一个材料来定义实体表面的外观，修改上述代码为如下所示：

上述代码中，我们给 entity 添加了一个新的 material 属性，并给定了该 material 的颜色（color）、粗糙度（roughness，越粗糙的物体散射越均匀）和金属性（metalness）。

通过JS来动态创建模型对象
我们当然可以通过JavaScript来添加物体，下面的代码将动态创建一个圆柱体对象并加入场景中，当然JS代码需要被放在一个

5G时代即将来临，VR虚拟现实技术会得到更大发展，WebVR将逐渐走入大众视野！相关推荐

宁大计算机科技有限公司,5G时代即将来临宁大科研团队突破技术难题
"5G时代即将来临宁大科研团队突破技术难题" 如果说从1G到4G解决的是人与人之间的沟通,那么5G将解决的是人与物.物与物之间的沟通.5月16日上午,浙江移动宣布打造" ...
5G时代即将来临将会带来哪些好处？
5G时代即将来临将会带来哪些好处? 在2018年世界移动大会上,中国电信在上海站发布了<中国电信5G技术白皮书>.这是全球运营商首次发布全面阐述5G技术观点和总体策略的白皮书.目前,美国 ...
5G时代即将来临，你的手机要被淘汰了吗？
国际方面对于5G的研究早在2012年就开始了,欧盟曾在2013年2月宣布将拨款5000万欧元加快5G技术的发展.而中国对于5G的研究也于2013年正式启动.今年5G时代即将来临的新闻频频出现,据说20 ...
5G时代即将来临，三大运营商各自为营谁能抢占先机？
导语曾在4G领域一度落后的中国通信技术正在5G技术标准方面力争上游.11月21日,工信部官网发布消息披露,我国已顺利完成5G技术研发试验第一阶段测试,且自今年9月起至明年9月,还将进一步开展5G研发 ...
智能眼镜时代即将来临，它会比智能手机更人性化吗？
近日,得益于Facebook更名Meta,元宇宙概念大火. 除了Facebook,我们能看到许多大大小小的科技公司都已经进入.或即将进入这一战场. 许多人相信,智能眼镜将取代手机成为下一代移动终端.云 ...
vr虚拟现实技术前景怎么样？虚拟展示技术应用介绍
vr虚拟现实技术自5G出现以来频频出现在人们的眼前,早在16年vr虚拟现实技术爆发一段时间之后这一技术也渡过了中间的寒冬期,那么如今vr虚拟现实技术前景怎么样呢?虚拟展示技术又能够应用到哪些领域?来一 ...
vr虚拟现实技术的前景！对未来发展带来有利的趋势吗？
科技的进步,人类的生活水平随之提高,因为科技智能时代的到来,我们才可以更加便利的生活,感受智能科技的力量,例如我们因为有vr虚拟现实技术才有了现在的3D影院,感受视觉的冲击带来身临其境的感觉,还有导航 ...
5G时代的到来VR体验店加盟如何
无论是马云在世界VR产业大会上就虚拟现实定义未来信息社会发表的演讲,还是马化腾在世界互联网大会上的发言,都让VR技术引起各领域的高度关注,VR展示也越来越受各界青睐,5G商用近在咫尺,与5G关系密切的 ...
VR虚拟现实技术线上3D展示，为旅游业带来新的机遇
VR虚拟现实技术是近年来出现的图形图像领域的高新技术.VR虚拟现实技术愈来愈受大家的亲睐,VR跨及诸多行业,如VR产业园区.VR工地.VR学校教育,VR房地产,VR酒店市场这些.而商迪3D的VR全景三 ...

5G时代即将来临，VR虚拟现实技术会得到更大发展，WebVR将逐渐走入大众视野！

5G时代即将来临，VR虚拟现实技术会得到更大发展，WebVR将逐渐走入大众视野！相关推荐

最新文章

热门文章