How to integrate a 360° Panorama with A-Frame into a Blogger post

This is a follow up of my last post "Panorama of old vase in VR". The team from Klassik Stiftung Weimar asked me if it is possible to view the panorama directly into the blog without the link to google photos. My first answer was no, but then I started to research. I liked the idea to be a little bit more independent from Google. Google stopped the support of the Daydream last year and there will be no new smartphone with Daydream support. That means I will need to find other VR glasses if my smartphone will ever stop working.


The good news is, I found A-Frame, an open-source web framework for building virtual reality (VR) experiences. A-Frame supports most VR headsets such as Vive, Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard, Oculus Go, and can even be used for augmented reality.

I found this very simple example to convert an equirectangular panorama to a 360° VR panorama. I just needed to add this eight line to the post and voila it's done.

<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script> <style> #myEmbeddedScene { width:100%; height:500px; } </style>
<br />
<div id="myEmbeddedScene">
<a-scene embedded="">
<a-sky rotation="0 -130 0" src="https://XXXX/FileName.jpeg"></a-sky>
</a-scene>
</div>


Crater shape vase with panorama of "Potsdam from the sight of Babelsberge", Bild: Klassik Stiftung Weimar

Kommentare

  1. Jordi R Cardona4. März 2020 um 21:10

    This is awesome. Thanks for this article. It has helped me very much to integrate aframe in the site I am doing.

    AntwortenLöschen

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Low polygon 3D europe map

Bild
Hello my latest little project is a 3D low polygon map. I used Blender and Gimp to create this map: I've started with an elevation map of Europe I found on the website from "The European Environment Agency" (EEA). Thank you EU for this image: http://www.eea.europa.eu/data-and-maps/figures/elevation-map-of-europe Then I had to cut of the black border with Gimp and created a second image as height map: For this step I converted the image to black and white and then used the curve tool to make the mountains darker. This will make the mountains in the final image higher and easier to discover. Then I used this tutorial to create the 3D image in Blender: http://johnflower.org/tutorial/make-mountains-blender-height-maps But I didn't  subdivide in as many parts than the tutorial ans I haven't smoothed, because I wanted a low polygon look of my image and not a realistic one. After this step I gave the plane the original colour image as textu...
Mehr anzeigen

Maps for Photo Books

Bild
  I love to add maps to the photo books. Here is a collection of some of them.    This is a example of a simple map without the visited places marked. I just added the big Texas label and the overview map of North-America. I used Inkscape and Gimp for this map.    This is a map I made as a title for a calender. I marked the locations from the photos. This image was made with Inkscape. This map is a mix of elements with Gimp extracted from old maps and then composed to a new map in Inkscape.  For this map I got the base image from Mapbox . Then I added the route and some details with Inkscape. To create the route I used Google My Maps , exported it as KML file and converted it to SVG. Here I used a image from the NASA and added the flight route with Gimp and the text boxes with Inkscape. Here I used Blender to create the map. I wrote a longer post here: Low polygon 3D europe map Google My Maps and Inksc...
Mehr anzeigen

Depth Map from Gallaxy S10 Photos

Bild
If you shoot with an Samsung Galaxy S10 Plus photos in the "Live Focus" mode Samsung saves four images. The first one is the one you see if you open the photo with any application. The second one is the image without any filter applied and the third one is the shot from the wight angle lens. You can get the images from all cameras with the command line tool "exiftool" and this command: exiftool -embeddedImage -a -b -W %d%f%c.%s test.jpg Image 1, with blurred background "effect" applied Image 2, without any filters added Image 3, a photo from the wight angle lens The fourth image is a depth map. The depth map is a raw 8-bit 1008 x 476 array and you can extract it with this command: exiftool -EmbeddedImage -b test.jpg > output.data To open the image you can use the Raw data loader from Gimp. Use File -> Open... and then select the image. Now you need to change the image type to "Gray 8 bit", the wight to "1008...
Mehr anzeigen