在 HTML 中识别和显示 360 度图像答案

【问题标题】：Recognizing and displaying 360 degree images in HTML在 HTML 中识别和显示 360 度图像
【发布时间】：2017-05-17 03:59:06
【问题描述】：

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

有没有办法检测这些 jpg 图像（与“标准”jpg 相对）并将它们显示为 360 度视图？如果您单击下载按钮并查看源图像，您会明白我所说的文件类型是普通 jpg 的意思。

我希望能够识别这些并播放“播放器”，而不是对非 360 度图像执行相同操作。

谢谢

【问题讨论】：

标签： javascript jquery jpeg

【解决方案1】：

是的，您可以使用基于 threejs 的 A-frame 进行 VR 和 360 度图像使用。只需将您的 head 标签脚本引用放入 A-frame。

<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>

【讨论】：

【解决方案2】：

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 包含到您的页面中

【讨论】：

【解决方案3】：

参考这个您可以使用 VR 视图将 360° 照片和视频嵌入网站

Google VR view web

【讨论】：

【解决方案4】：

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

<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>

您也可以自己托管 VR 视图。从https://github.com/googlevr/vrview 下载代码并将其托管在可公开访问的某个地方。如果您将它保存在服务器上名为 “360view” 的文件夹中，那么您将能够通过 //yourdomain.com/360view/?image=examples/coral.jpg&is_stereo=true 访问它这是一个例子：

<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>

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

【讨论】：