Question

我有一些像this这样的360度图像，我希望将其嵌入到网站中。我一直在寻找，但是没有找到插件或（可能）HTML5方法用于嵌入和播放全景图。

有没有办法检测这些jpg图像（而不是＆＃34;标准＆＃34; jpgs）并将它们显示为360视图？如果您单击下载按钮并查看源图像，您将看到我对文件类型是如何正常jpg的意思。

我希望能够识别这些并且扮演＆＃34;播放器＆＃34;虽然对于非360图像没有做同样的事情。

由于

Answer 1

HTML：

<br>jQuery Pan-o-matic
<br>
<br>
<div class="pan-wrap pan0"></div>
<br>
<div class="pan-wrap pan1"></div>
<br>
<div class="pan-wrap pan2"></div>

JavaScript：

$('.pan-wrap').append('<div class="play">play</div>');

var hoverInterval;

function doStuff() {
  $(this).animate({
    'background-position-x': '+=5%',
  }, 250, 'linear');
}

$(function() {
  $('.pan-wrap').hover(
    function() {
      $(this).empty();
      hoverInterval = setInterval($.proxy(doStuff, this), 250);
    },
    function() {
      // stop calling doStuff
      $(this).append('<div class="play">play</div>');
      clearInterval(hoverInterval);
      $('this').animate({
        'background-position-x': '+=5%',
      }, 1000, 'easeOutQuint');
    });
});

CSS：

body {
  background: rgb(240, 205, 97);
  color: #fff;
  font-size: 30px;
  text-align: center;
}

.pan0 {
  background: url('https://i.stack.imgur.com/suKT3.jpg');
  background-size: cover;
}

.pan1 {
  background: url('http://kthornbloom.com/public/pan.jpg');
}

.pan2 {
  background: url('http://kthornbloom.com/public/pan2.jpg');
}

.pan-wrap {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
  color: #fff;
  font-size: 20px;
  text-align: center;
  font-family: sans-serif;
  border-radius: 10px;
  border: 5px solid rgb(209, 126, 20);
  cursor: e-resize;
}

.play {
  display: inline-block;
  background: rgba(0, 0, 0, 0.71);
  height: 25px;
  width: 75px;
  border-radius: 15px;
  padding-top: 5px;
  font-size: 14px;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -34px;
  position: absolute;
}

JSFiddle： http://jsfiddle.net/nikdtu/k7thyvon/

注意：不要忘记将jquery.easing.1.3.js包含在您的页面中

Answer 2

参考这个您可以使用VR View

将360°照片和视频嵌入到网站中

Google VR view web

Answer 3

是的，您可以将基于Threejs的A帧用于VR和360图像。只需将您的头标记脚本引用放入A帧

    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

并在您的身体中：基本上，a-sky会采用您提供的所有图片来源并将其包裹在视图周围（如果图片来源不是360图像，它将看起来是错误的）

 <body>
    <a-scene>
        <a-sky src="yourpicpath.jpg"></a-sky>
    </a-scene> 
</body>

Answer 4

您可以使用Google的托管VR视图https://developers.google.com/vr/concepts/vrview。例如，您可以在网页中包含以下内容：

 [self.incommingTable reloadData];

您也可以自己托管VR视图。从https://github.com/googlevr/vrview下载代码并将其托管在公共访问的某个位置。如果您将其保存在服务器上名为“360view”的文件夹中，则可以<iframe width="100%" height="300px" allowfullscreen frameborder="0" src="//storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg& is_stereo=true"> </iframe>访问该文件夹这是一个例子：

//yourdomain.com/360view/?image=examples/coral.jpg&is_stereo=true

或者在这里测试它：https://plnkr.co/edit/tSUJdntHoshfi38HSxzL?p=preview

识别并显示HTML中的360度图像

4 个答案: