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

问题描述 投票：2回答：4

我有一些360度的图像，如 这个 我想在网站上嵌入一个。我一直在寻找，但没有找到什么插件或（可能）HTML5方法来嵌入和播放这些全景图。

有没有一种方法可以检测到这些jpg图片（相对于 "标准 "jpgs），并将其显示为360视图？如果你点击下载按钮并查看源图片，你会明白我说的文件类型是普通jpg的意思。

enter image description here

我希望能够识别这些图片并播放 "播放器"，同时不对非360图片做同样的处理。

谢谢你

javascript jquery jpeg
4个回答
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>

HTML : 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.net http:/jsfiddle.netnikdtuk7thyvon

注意：别忘了在你的页面中加入jquery.easing.1.3.js。

0
投票

参考这个 您可以使用VR View将360°的照片和视频嵌入到网站中。

谷歌VR视图网

0
投票

是的，你可以使用A-frame，它是基于threejs的VR和360图像的使用，只需在你的头部标签脚本引用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>
-1
投票

你可以使用谷歌的托管VR视图 https:/developers.google.comvrconceptsvrview. 作为一个例子，你可以在你的网页中包含以下内容。

<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.comgooglevrvrview 并将其存放在有公共访问权限的地方。如果您将它保存在一个名为 "360视角" 在您的服务器上，那么您将能够在以下地址访问它 //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>

或者在这里的灌篮机里测试一下: https:/plnkr.coedittSUJdntHoshfi38HSxzL?p=preview。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.