Dari sekian banyak library 360 Viewer, saya memilih library Pannellum sebagai library 360 Viewer untuk projek saya (sebenarnya, saat itu kebetulan pannellum berada di nomor atas hasil pencarian Google sehingga langsung saya klik dan cocok).

Pannellum sudah saya gunakan sebelumnya pada pembuatan website Hotel Management BINUS untuk menampilkan fasilitas-fasilitas yang dimiliki oleh jurusan Hotel Management BINUS. Bisa dilihat pada link berikut.

https://hotel-management.binus.ac.id/

Pada projek kedua, kali ini untuk BINUS TV, saya kembali memilih Pannellum karena memang pluginnya sangat mudah digunakan dan customizeable. Saat ini belum bisa saya tampilkan hasilnya karena masih berada di server Beta, nanti akan saya update.

Berikut beberapa fitur Pannellum:

  1. Memiliki fungsi navigasi untuk berpindah lokasi atau gambar (Tour)
  2. Support Video 360
  3. Support custom navigation/control
  4. Support custom hotspot

Website Pannellum: https://pannellum.org/

Selanjutnya akan saya bahas cara menggunakan library Pannellum.

01. Basic Image 360
Kita akan membuat terlebih dahulu contoh sederhana untuk menampilkan Image 360. Langkah pertama, silahkan buat folder projek baru lalu buat file baru dengan name “index.html” di dalam folder tersebut. Dan ketik kode berikut.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Pannellum 360 Viewer</title>

      <!-- Load script Pannellum dari CDN -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css">
      <script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>

      <!-- Menentukan tinggi image 360 -->
      <style>
         body {
            margin: 0;
            padding: 0;
         }
         #pannellum-image-360 {
            height: 480px;
         }
      </style>
   </head>

   <body>
       <div id="pannellum-image-360"></div>
       <script>
          // parameter pertama adalah id (target) element
          // parameter kedua adalah option nya
          pannellum.viewer('pannellum-image-360', {
             type: 'equirectangular',
             panorama: 'https://pannellum.org/images/alma.jpg'
          });
       </script> 
   </body>
</html>

Jika sudah, buka file “index.html” di browser, Image 360 sudah dapat dilihat.

02. Tour 360
Untuk membuat Image Tour 360, kita perlu menyiapkan gambar lebih dari satu gambar. Untuk demo, saya akan menggunakan image berikut.
a. https://pannellum.org/images/alma.jpg
b. https://pannellum.org/images/jfk.jpg

Dalam pembuatan Tour 360, kita perlu membagi kedua gambar tersebut ke dalam 2 scene. Yang harus dilakukan adalah kita harus menambahkan option “scenes” pada script kita seperti berikut.

<script>
// parameter pertama adalah id (target) element
// parameter kedua adalah option nya
pannellum.viewer('pannellum-image-360', {
  scenes: {
    alma: {},
    jfk: {}
  }
}
</script>

Nama scene saya samakan dengan nama file nya. Selanjutnya, kita tambahkan option untuk masing-masing scene seperti berikut.

alma: {
  title: 'Alma',
  pitch: 0,
  yaw: 0,
  hfov: 100,
  type: 'equirectangular',   panorama: 'https://pannellum.org/images/alma.jpg' }, jfk: {   title: 'JFK',   pitch: 0,   yaw: 0,   hfov: 100,   type: 'equirectangular',   panorama: 'https://pannellum.org/images/jfk.jpg' }

Selanjutnya, kita tentukan dulu, scene mana yang akan pertama kali ditampilkan. Update kode nya jadi seperti berikut.

pannellum.viewer('pannellum-image-360', {
  default: {
    // scene yang akan ditampilkan pertama kali
    firstScene: 'alma',
    sceneFadeDuration: 1000
  },
  scenes: {
    alma: {
      // diisi dengan kode sebelumnya
    },
    jfk: {
      // diisi dengan kode sebelumnya
    }
  }
});

Dengan kode diatas, masih belum cukup untuk bisa melakukan Tour karena kita belum menentukan masing-masing titik pindahan / Hotspot. Untuk menentukan hotspot, kita perlu menambahkan option “hotSpots” pada masing-masing scene seperti berikut.

alma: {
  ... // option sebelumnya, ditambahkan option berikut
  hotSpots: [
    {
      pitch: 0,
      yaw: 0,
      type: 'scene',
      text: 'JFK',
      sceneId: 'jfk'
    }
  ]
},
jfk: {
  ... // option sebelumnya, ditambahkan option berikut
  hotSpots: [
    {
      pitch: 0,
      yaw: 0,
      type: 'scene',
      text: 'Alma',
      sceneId: 'alma'
    }
  ]
}

Jika sudah hasilnya akan seperti berikut:

Bisa dilihat, terdapat icon panah yang kalau diklik akan pindah ke scene “JFK” dan di scene “JFK” juga akan terdapat icon panah yang kalau diklik akan pindah ke scene “Alma”.

Keseluruhan kode bisa dilihat di link berikut.
https://github.com/fachririyanto/pannellum-example/tour.html

03. Custom Hotspot
Singkat saja, untuk custom Hotspot, pada masing-masing option “hotSpots”, silahkan tambahkan option “createTooltipFunc” untuk callback me-render custom HTML dan tambahkan option “createTooltipArgs” untuk mengirimkan parameter ke fungsi callback “createTooltipFunc”.

alma: {
  hotSpots: [
    {
      ...,
      // isi args, silahkan diisi sesuai kebutuhan rendering custom hotspot nya
      createTooltipArgs: {
        title: 'Nama Hotspot',
        link: ''
      },

      // render custom element
      createTooltipFunc: function(element, args) {         
         console.log(args);
        element.innerHTML = '<a href="' + args.link + '">' + args.title + '</a>';
     }
  ]
}

Untuk lebih jelasnya silahkan kunjungi link berikut.
https://pannellum.org/documentation/examples/custom-hot-spots/

Kode demo bisa dilihat pada link berikut.
https://github.com/fachririyanto/pannellum-example

Sampai sini dulu artikel kali ini, selamat bereksplorasi. Semoga bermanfaat.

Contoh kode: https://github.com/fachririyanto/training/tree/master/pannellum-example
Photo by Timothy Oldfield on Unsplash