vr设备应用程序

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

测试一下

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

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

叉它

分叉 。 将目录更改为仓库。

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

创建缩略图

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

编辑代码

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

<  >      
            
     
    
           
              
     
     
            
                
     <  id = "kieran" src = "img/1.jpg" >      
                
     <  id = "kieran-thumb" crossorigin = "anonymous" src = "img/kieran-thumb.png" >      
                
     <  id = "christian-thumb" crossorigin = "anonymous" src = "img/christian-thumb.png" >      
                
     <  id = "eddie-thumb" crossorigin = "anonymous" src = "img/eddie-thumb.png" >      
                
     <  id = "click-sound" crossorigin = "anonymous" src = "https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg" >< /  >      
                
     <  id = "christian" crossorigin = "anonymous" src = "img/2.jpg" >      
                
     <  id = "eddie" crossorigin = "anonymous" src = "img/4.jpg" >
     
    

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

          
          
     
    
     < / a-sky>      
          
          
     
           
          
     
     
            
            
     
      
       < / a-entity>      
            
     
       
        < / a-entity>      
            
     
        
         < / a-entity>      
          
     < / a-entity>
        
       
      
     
    

上载到GitHub页面

添加并提交更改：

git add      
     *      
          
     git commit      
     -a      
     -m ‘changed images      
     ' git push

在手机上打开您的应用程序， 为 。

下一步

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

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

故障排除

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

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

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

翻译自:

vr设备应用程序