如何在Angular 1中使用VRView

Question

VRview不工作，也没有向我显示360图像。我正在编码的角度1应用程序，并试图显示360图像。我尝试了photosphere查看器和现在的vrviewer，但无法理解如何在angular中编写代码。敬请协助

angular.module("MyControllers", [])
.controller("VR", function ($window) {
var onVrViewLoad = function() {
            var vrView = new VRView.Player('#vrview', {
                img: 'img/virtualTour.jpg',
                is_stereo: false
            });
        }
        $window.addEventListener('load', onVrViewLoad)


 })

Answer 1

根据Google VR文档

要使用VR视图，请在HTML中包含谷歌提供的vrview.min.js脚本：

视频视图

您的控制器应该如下所示。在页面加载后立即实例化VR视图，该页面应该正在侦听load事件。

angular.module('VRApp', [])
  .controller('VRController', function($window) {
    var onVrViewLoad = function() {
      var vrView = new VRView.Player('#vrview', {
        video: 'https://storage.googleapis.com/vrview/examples/video/congo_2048.mp4',
        is_stereo: true,
      });
    };
    $window.addEventListener('load', onVrViewLoad);
  });

请查看我的Plunker以进行现场演示。

图像查看

​

我已经在IE11中测试过了，它工作得很好。我尝试了下面的代码

angular.module('myApp', [])
  .controller('VRController', function($scope, $window) {
    var onVrViewLoad = function() {
      var vrView = new VRView.Player('#vrview', {
        width: '60%',
        height: '60%',
        img: 'http://storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&is_stereo=true',
        is_stereo: true,
      });
    };
    $window.addEventListener('load', onVrViewLoad);
  });

IE 11中的输出

​

​