CODEWITHSUNDEEP
javascriptjqueryjpeg
user101289
user101289

Reputation: 10422

Recognizing and displaying 360 degree images in HTML

I've got some 360 degree images like this one that I'd like to embed in a website. I've been looking but haven't found what plugin or (possibly) HTML5 methods are used to embed and play these as panoramas.

Is there a way to detect these jpg images (as opposed to "standard" jpgs) and display them as 360 views? If you click the download button and view the source image, you'll see what I mean about how the filetype is a normal jpg.

enter image description here

I'd like to be able to recognize these and play the "player" while not doing the same for non-360 images.

Thanks

Upvotes: 7

Views: 37516

Answers (4)

Sandy Al Akhras
Sandy Al Akhras

Reputation: 159

Yes You can use A-frame which is based on threejs for VR and 360 image use. simply put in your head tag script reference to A-frame.

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

and in your body: basically the a-sky takes whatever image source you give it and wraps that around the view (if the pic source isn't 360 image it will look wrong).

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

Upvotes: 5

Ananth Sathvick
Ananth Sathvick

Reputation: 1

Refer this You can embed 360° photos and videos into a website using VR View

Google VR view web

Upvotes: 0

Samar Rizvi
Samar Rizvi

Reputation: 300

You can use Google's hosted VR view https://developers.google.com/vr/concepts/vrview. As an example, you can include the following in your web page:

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

You can also host the VR view yourself. Download the code from https://github.com/googlevr/vrview and host it somewhere with public access. If you keep it within a folder called “360view” on your server, then you will be able to access it at //yourdomain.com/360view/?image=examples/coral.jpg&is_stereo=true Here's an example: 

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

Or test it in the plunker here: https://plnkr.co/edit/tSUJdntHoshfi38HSxzL?p=preview

Upvotes: 0

Nikhil Maheshwari
Nikhil Maheshwari

Reputation: 2248

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.sstatic.net/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/

Note : Don't forget to inclue jquery.easing.1.3.js to your page

Upvotes: 2

Related Questions