vr设备应用程序_在15分钟内构建一个VR Web应用程序

vr设备应用程序

在15分钟内，您可以开发一个虚拟现实应用程序，并在Web浏览器，VR头盔或Google Daydream上运行它。关键是A-Frame ，这是Mozilla VR Team构建的开源工具包。

测试一下

使用手机上的Chrome或Firefox打开此链接。

将手机插入Google Cardboard，然后凝视菜单栏以切换360度场景。

叉它

从GitHub分叉示例存储库。将目录更改为仓库。

如果您具有360度图像，则可以将其拖放到img /子目录中。如果没有360度图像，则可以开始使用开源Hugin全景照片拼接器。样板应用程序包括我在旧金山的一次聚会上拍摄的RICOH THETA媒体。

创建缩略图

头戴式耳机中的菜单是240x240像素的标准图像。您可以使用GIMP创建图像。 A-Frame会自动为您处理透视偏移。

编辑代码

如果使用相同的图像文件名并覆盖/ img中的1.jpg，则完全不需要编辑代码。如果要扩展程序或使用自己的文件名对其进行修改，请更改index.html中的id和src以匹配您的文件。

< body >

        <a-scene>

        <a-assets>

        < img id = "kieran" src = "img/1.jpg" >

        < img id = "kieran-thumb" crossorigin = "anonymous" src = "img/kieran-thumb.png" >

        < img id = "christian-thumb" crossorigin = "anonymous" src = "img/christian-thumb.png" >

        < img id = "eddie-thumb" crossorigin = "anonymous" src = "img/eddie-thumb.png" >

        < audio id = "click-sound" crossorigin = "anonymous" src = "https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg" >< / audio >

        < img id = "christian" crossorigin = "anonymous" src = "img/2.jpg" >

        < img id = "eddie" crossorigin = "anonymous" src = "img/4.jpg" >

向下滚动并编辑菜单链接的部分。

<!-- 360-degree image. -->

        <a-sky id = "image-360" radius = "10" src = "#kieran" >< / a-sky>

 <a-entity id = "links" layout = "type: line; margin: 1.5" position = "0 -1 -4" > <a-entity template = "src: #link" data- src = "#christian" data-thumb = "#christian-thumb" >< / a-entity> <a-entity template = "src: #link" data- src = "#kieran" data-thumb = "#kieran-thumb" >< / a-entity> <a-entity template = "src: #link" data- src = "#eddie" data-thumb = "#eddie-thumb" >< / a-entity> < / a-entity>

`上载到GitHub页面`

添加并提交更改：

git add *

        git commit -a -m ‘changed images '

        git push

在手机上打开您的应用程序，网址为http://username.github.io/360gallery 。

`下一步`

这是对A-Frame的简要介绍，以说明WebVR易于使用，并且可供Web开发人员使用。转到aframe.io查看更多演示。尽管显示360幅图像并不是真正的VR，但如今它变得简单，有趣且可访问。使用360图像也是开始了解增强现实基础知识的好方法。

用标准相机拍摄自己的照片并将它们缝在一起，或购买或借用360度相机。我使用的相机支持360度视频文件和实时流。

`故障排除`

该应用程序不会从您在浏览器中打开的本地文件运行。您必须运行本地Web服务器（例如Apache2）或将其上传到外部站点（例如GitHub Pages）进行测试。

如果您使用的是Oculus Rift或HTC Vive，则可能需要安装Firefox Nightly或实验版Chromium构建。在“ WebVR准备好了吗？”中查看浏览器的当前状态。

360度视频可在桌面浏览器上运行。我在移动设备上遇到了一些故障。技术正在Swift改善。

翻译自: https://opensource.com/life/16/11/build-virtual-reality-app

vr设备应用程序