{"id":11234,"date":"2020-12-26T00:00:00","date_gmt":"2020-12-26T00:00:00","guid":{"rendered":"https:\/\/binus.ac.id\/binus-digital\/2020\/12\/26\/menggunakan-library-pannellum-untuk-menampilkan-image-360\/"},"modified":"2024-09-24T02:20:16","modified_gmt":"2024-09-24T02:20:16","slug":"menggunakan-library-pannellum-untuk-menampilkan-image-360","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/binus-digital\/2020\/12\/26\/menggunakan-library-pannellum-untuk-menampilkan-image-360\/","title":{"rendered":"Menggunakan Library Pannellum untuk Menampilkan Image 360"},"content":{"rendered":"

Dari sekian banyak library 360 Viewer, saya memilih library\u00a0Pannellum<\/a>\u00a0sebagai library 360 Viewer untuk projek saya (sebenarnya, saat itu kebetulan pannellum berada di nomor atas hasil pencarian Google sehingga langsung saya klik dan cocok).<\/p>\n

Pannellum<\/a>\u00a0sudah 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.<\/p>\n

https:\/\/hotel-management.binus.ac.id\/<\/a><\/p>\n

Pada projek kedua, kali ini untuk BINUS TV, saya kembali memilih Pannellum karena memang pluginnya sangat mudah digunakan dan\u00a0customizeable<\/em>. Saat ini belum bisa saya tampilkan hasilnya karena masih berada di server Beta, nanti akan saya update.<\/p>\n

Berikut beberapa fitur Pannellum:<\/p>\n

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

    Website Pannellum:\u00a0https:\/\/pannellum.org\/<\/a><\/p>\n

    Selanjutnya akan saya bahas cara menggunakan library Pannellum.<\/p>\n

    01. Basic Image 360<\/strong>
    \nKita akan membuat terlebih dahulu contoh sederhana untuk menampilkan Image 360. Langkah pertama, silahkan buat folder projek baru lalu buat file baru dengan name \u201cindex.html\u201d di dalam folder tersebut. Dan ketik kode berikut.<\/p>\n

    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n   <head>\r\n      <meta charset=\"UTF-8\">\r\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n      <title>Pannellum 360 Viewer<\/title>\r\n\r\n      <!-- Load script Pannellum dari CDN -->\r\n      <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/pannellum@2.5.6\/build\/pannellum.css\">\r\n      <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/pannellum@2.5.6\/build\/pannellum.js\"><\/script>\r\n\r\n      <!-- Menentukan tinggi image 360 -->\r\n      <style>\r\n         body {\r\n            margin: 0;\r\n            padding: 0;\r\n         }\r\n         #pannellum-image-360 {\r\n            height: 480px;\r\n         }\r\n      <\/style>\r\n   <\/head>\r\n\r\n   <body>\r\n       <div id=\"pannellum-image-360\"><\/div>\r\n       <script>\r\n          \/\/ parameter pertama adalah id (target) element\r\n          \/\/ parameter kedua adalah option nya\r\n          pannellum.viewer('pannellum-image-360', {\r\n             type: 'equirectangular',\r\n             panorama: 'https:\/\/pannellum.org\/images\/alma.jpg'\r\n          });\r\n       <\/script> \r\n   <\/body>\r\n<\/html><\/pre>\n
    Jika sudah, buka file \u201cindex.html\u201d di browser, Image 360 sudah dapat dilihat.<\/p>\n
    \"\"<\/p>\n
    02. Tour 360<\/strong>
    \nUntuk membuat Image Tour 360, kita perlu menyiapkan gambar lebih dari satu gambar. Untuk demo, saya akan menggunakan image berikut.
    \na.\u00a0    https:\/\/pannellum.org\/images\/alma.jpg<\/a>
    \nb.\u00a0    https:\/\/pannellum.org\/images\/jfk.jpg<\/a><\/p>\n
    Dalam pembuatan Tour 360, kita perlu membagi kedua gambar tersebut ke dalam 2 scene. Yang harus dilakukan adalah kita harus menambahkan option \u201cscenes\u201d pada script kita seperti berikut.<\/p>\n
    <script>\r\n\/\/ parameter pertama adalah id (target) element\r\n\/\/ parameter kedua adalah option nya\r\npannellum.viewer('pannellum-image-360', {\r\n\u00a0 scenes: {\r\n\u00a0 \u00a0 alma: {},\r\n\u00a0 \u00a0 jfk: {}\r\n\u00a0 }\r\n}\r\n<\/script><\/pre>\n
    Nama scene saya samakan dengan nama file nya. Selanjutnya, kita tambahkan option untuk masing-masing scene seperti berikut.<\/p>\n
    alma: {\r\n\u00a0 title: 'Alma',\r\n\u00a0 pitch: 0,\r\n\u00a0 yaw: 0,\r\n\u00a0 hfov: 100,\r\n\u00a0 type: 'equirectangular<\/code>', \u00a0 panorama: 'https:\/\/pannellum.org\/images\/alma.jpg' }, jfk: { \u00a0 title: 'JFK', \u00a0 pitch: 0, \u00a0 yaw: 0, \u00a0 hfov: 100, \u00a0 type: 'equirectangular<\/code>', \u00a0 panorama: 'https:\/\/pannellum.org\/images\/jfk.jpg' }<\/pre>\n
    Selanjutnya, kita tentukan dulu, scene mana yang akan pertama kali ditampilkan. Update kode nya jadi seperti berikut.<\/p>\n
    pannellum.viewer('pannellum-image-360', {\r\n\u00a0 default: {\r\n\u00a0 \u00a0 \/\/ scene yang akan ditampilkan pertama kali\r\n\u00a0 \u00a0 firstScene: 'alma',\r\n\u00a0 \u00a0 sceneFadeDuration: 1000\r\n\u00a0 },\r\n\u00a0 scenes: {\r\n\u00a0 \u00a0 alma: {\r\n\u00a0 \u00a0 \u00a0 \/\/ diisi dengan kode sebelumnya\r\n\u00a0 \u00a0 },\r\n\u00a0 \u00a0 jfk: {\r\n\u00a0 \u00a0 \u00a0 \/\/ diisi dengan kode sebelumnya\r\n\u00a0 \u00a0 }\r\n\u00a0 }\r\n});<\/pre>\n
    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 \u201chotSpots\u201d pada masing-masing scene seperti berikut.<\/p>\n
    alma: {\r\n\u00a0 ... \/\/ option sebelumnya, ditambahkan option berikut\r\n\u00a0 hotSpots: [\r\n\u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 pitch: 0,\r\n\u00a0 \u00a0 \u00a0 yaw: 0,\r\n\u00a0 \u00a0 \u00a0 type: 'scene',\r\n\u00a0 \u00a0 \u00a0 text: 'JFK',\r\n\u00a0 \u00a0 \u00a0 sceneId: 'jfk'\r\n\u00a0 \u00a0 }\r\n\u00a0 ]\r\n},\r\njfk: {\r\n\u00a0 ... \/\/ option sebelumnya, ditambahkan option berikut\r\n\u00a0 hotSpots: [\r\n\u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 pitch: 0,\r\n\u00a0 \u00a0 \u00a0 yaw: 0,\r\n\u00a0 \u00a0 \u00a0 type: 'scene',\r\n\u00a0 \u00a0 \u00a0 text: 'Alma',\r\n\u00a0 \u00a0 \u00a0 sceneId: 'alma'\r\n\u00a0 \u00a0 }\r\n\u00a0 ]\r\n}<\/pre>\n
    Jika sudah hasilnya akan seperti berikut:<\/p>\n
    \"\"<\/p>\n
    Bisa dilihat, terdapat icon panah yang kalau diklik akan pindah ke scene \u201cJFK\u201d dan di scene \u201cJFK\u201d juga akan terdapat icon panah yang kalau diklik akan pindah ke scene \u201cAlma\u201d.<\/p>\n
    Keseluruhan kode bisa dilihat di link berikut.
    \n    https:\/\/github.com\/fachririyanto\/pannellum-example\/tour.html<\/a><\/p>\n
    03. Custom Hotspot<\/strong>
    \nSingkat saja, untuk custom Hotspot, pada masing-masing option \u201chotSpots\u201d, silahkan tambahkan option \u201ccreateTooltipFunc\u201d untuk callback me-render custom HTML dan tambahkan option \u201ccreateTooltipArgs\u201d untuk mengirimkan parameter ke fungsi callback \u201ccreateTooltipFunc\u201d.<\/p>\n
    alma: {\r\n\u00a0 hotSpots: [\r\n\u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 ...,\r\n\u00a0 \u00a0 \u00a0 \/\/ isi args, silahkan diisi sesuai kebutuhan rendering custom hotspot nya\r\n\u00a0 \u00a0 \u00a0 createTooltipArgs: {\r\n\u00a0 \u00a0 \u00a0 \u00a0 title: 'Nama Hotspot',\r\n\u00a0 \u00a0 \u00a0 \u00a0 link: ''\r\n\u00a0 \u00a0 \u00a0 },\r\n\r\n\u00a0 \u00a0 \u00a0 \/\/ render custom element\r\n\u00a0 \u00a0 \u00a0 createTooltipFunc: function(element, args) {\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n \u00a0 \u00a0 \u00a0 \u00a0 console.log(args);\r\n\u00a0 \u00a0 \u00a0 \u00a0 element.innerHTML = '<a href=\"' + args.link + '\">' + args.title + '<\/a>';\r\n\u00a0 \u00a0 \u00a0}\r\n\u00a0 ]\r\n}<\/pre>\n
    Untuk lebih jelasnya silahkan kunjungi link berikut.
    \n    https:\/\/pannellum.org\/documentation\/examples\/custom-hot-spots\/<\/a><\/p>\n
    Kode demo bisa dilihat pada link berikut.
    \n    https:\/\/github.com\/fachririyanto\/pannellum-example<\/a><\/p>\n
    Sampai sini dulu artikel kali ini, selamat bereksplorasi. Semoga bermanfaat.<\/p>\n
    Contoh kode: https:\/\/github.com\/fachririyanto\/training\/tree\/master\/pannellum-example<\/a>
    \nPhoto by     Timothy Oldfield<\/a> on Unsplash<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    Dari sekian banyak library 360 Viewer, saya memilih library\u00a0Pannellum\u00a0sebagai 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\u00a0sudah saya gunakan sebelumnya pada pembuatan website Hotel Management BINUS untuk menampilkan fasilitas-fasilitas yang dimiliki oleh jurusan Hotel Management BINUS. Bisa dilihat […]<\/p>\n","protected":false},"author":20,"featured_media":11235,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-11234","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/comments?post=11234"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11234\/revisions"}],"predecessor-version":[{"id":11807,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11234\/revisions\/11807"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media\/11235"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media?parent=11234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/categories?post=11234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/tags?post=11234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}