CODEWITHSUNDEEP
javascriptpanoramas360-virtual-reality360-panorama
Rakshit Jain
Rakshit Jain

Reputation: 1

How to create 360 degree view panorama from multiple images using javascript and display it on the website for the user

I am working on a web project where I have to add 360 panoramas from multiple images(like 60 images for a single panorama) taken from different angles, just like Google maps, if possible give a detailed explanation. Also, I am writing code in PHP, HTML and CSS.

I am an absolute beginner in the programming world, so please forgive me, if I asked something very silly or something like that.

I tried using three.js library, but it takes panoramic 2D images, which do not help me out.

Upvotes: 0

Views: 7091

Answers (2)

Gokul Raam
Gokul Raam

Reputation: 59

Have you tried Pannellum? It's a Javascript library for creating panorama viewers. You can configure the location of the image, and other viewer details as shown below.

JS (script.js):

pannellum.viewer('panorama', {
  "type": "equirectangular",
  "panorama": "path/to/your/image.jpg",
  "autoLoad": true,
  "showZoomCtrl":true,
  "showFullscreenCtrl": true,
});

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Sample 360 Image Viewer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Import Pannellum JS library -->
  <script src="https://cdn.pannellum.org/2.5/pannellum.js"></script>
  <!-- Import Pannellum JS stylesheet -->
  <link rel="stylesheet" href="https://cdn.pannellum.org/2.5/pannellum.css"/>
</head>
<body>
  <!-- Create a container for the viewer -->
  <div id="panorama"></div>

  <!-- Import the script -->
  <script src="path/to/your/script.js"></script>
</body>
</html>

You can also configure hotspots (info spots) like this:

pannellum.viewer('panorama', {
  "type": "equirectangular",
  "panorama": "path/to/your/image.jpg",
  "autoLoad": true,
  "showZoomCtrl": false,
  "showFullscreenCtrl": false,
  "hotSpots": [
    {
      "pitch": 0,
      "yaw": 0,
      "type": "info",
      "text": "Sample hotspot",
      "URL": "https://stackoverflow.com"
    }
  ]
});

For capturing your own 360 panorama images, you can use create them using your smartphone using any 360 image capturing application. Google Street View used to be good, but now the support for that app has been stopped. There are several apps to do the job anyway, like "Panorama 360 by Teliportme" for Android. You can then export the created image in any format (jpg, png) and then render them using the steps I've mentioned above.

Upvotes: 2

ENN9
ENN9

Reputation: 74

I don't think you need to code from scratch. You will find many libraries and products that do that: https://github.com/topics/360-photo

Even Google has a 360 image creator, if I am not mistaken. My suggestion would be to either use something from the link above or buy something from code canyon: https://codecanyon.net/search/360%20panorama

Upvotes: 0

Related Questions