LATCODING.COM (HTTPS://LATCODING.

COM/)
BLOG TUTORIAL PROGRAMMING & NETWORKING

HOME (HTTP://LATCODING.COM) | TUTORIAL PHP (HTTPS://LATCODING.COM/CATEGORY/PHP/) | TUTORIAL NETWORKING (HTTPS://LATCODING.COM/CATEGORY/NETWORKING/) |

TUTORIAL WEB SERVER (HTTPS://LATCODING.COM/CATEGORY/WEB-SERVER/) | TUTORIAL JAVASCRIPT (HTTPS://LATCODING.COM/CATEGORY/JAVASCRIPT/) |

TUTORIAL ANDROID (HTTPS://LATCODING.COM/CATEGORY/ANDROID/)

Mena 3 (https://latcoding.com/2016/01/05/photo-360-derajat-atau-photo-sphere/#comments) Search SEARCH

mpilkan photo 360 derajat (photo Sphere) ke dalam website

Posted on January 5, 2016 (https://latcoding.com/2016/01/05/photo-360-derajat-atau-photo-sphere/) by Ambar
RECENT COMMENTS
Hasbiyatmoko (https://latcoding.com/author/moko/)
aurora on Implementasi algoritma dijkstra di PHP
(https://latcoding.com/2015/08/26/implementasi-
algoritma-dijkstra-di-php/#comment-1540)

Ambar Hasbiyatmoko on Implementasi algoritma

dijkstra di PHP
(https://latcoding.com/2015/08/26/implementasi-
algoritma-dijkstra-di-php/#comment-1533)
(http://latcoding.com/wp-content/uploads/2016/01/photosphere-360-derajat-pengertian.png)
Ambar Hasbiyatmoko on Cara mengirim email dari
Kemarin gue abis cari-cari tutorial ttg gimana cara menampilkan photo 360 derajat ke dalam localhost melalui xampp 2015
web/browser, eh gak ketemu-temu. 4 hari nyari di google belum dapat pencerahan juga, hhhh. (https://latcoding.com/2015/08/17/cara-mengirim-
email-dari-localhost-melalui-xampp-2015/#comment-
Sempet mau nyerah juga gue, kayaknya gak mungkin deh nampilin photo 360 derajat ke dalam
1532)
website. Hmm, tapi gimana dengan google street view? kok bisa dia nampilin photo 360 derajat ke
dalam website. Gimana caranya tuh? Ambar Hasbiyatmoko on About Me
(https://latcoding.com/about-me/#comment-1531)
Karena penasaran gue coba2 browsing terus, dan sampai akhirnya gue ketemu sebuah artikel komplit
Ambar Hasbiyatmoko on Android Aplikasi dijkstra
yang membahas ttg photo 360 derajat. Di artikel tersebut menyebutkan kata photo sphere, what
rute angkutan umum
photo sphere..?? Apaan tuh? Gue coba buka google translate dan translet-in itu kata sphere dan (https://latcoding.com/2015/07/01/android-aplikasi-
ternyata artinya bola. Dari situlah gue coba cari di google dengan keyword photo sphere dan dijkstra-rute-angkutan-umum/#comment-1530)

bingo! ketemu hasilnya banyak bener!. Haha. Ternyata nyari pake keyword photo sphere itu lebih
banyak hasilnya ketimbang pake keyword photo 360 degree yg gue gunain sebelumnya. #suram
RECENT POSTS
Lanjut cerita, gue nemuin website bagus yang bisa menampilkan photo 360 derajat secara online.
Websitenya ada dimari (http://photosphereviewer.net/view/#demo). Di website itu, jika kamu scroll ke Install golang di ubuntu 16.04
(https://latcoding.com/2017/09/24/install-golang-di-
bawah akan ada contoh gambar 360 derajat, download salah satu dulu.
ubuntu-16-04/)

Centos 7 Sinkronisasi le dan folder dari server A

ke server B secara realtime
(https://latcoding.com/2017/01/06/centos-7-
sinkronisasi-le-dan-folder-dari-server-ke-server-b-
secara-realtime/)

Install teamviewer di Ubuntu 16.04 LTS

(https://latcoding.com/2016/12/18/install-
(http://latcoding.com/wp-content/uploads/2016/01/photo-sphere-360-derajat.png) teamviewer-di-ubuntu-16-04-lts/)

Setelah di download, kamu upload lagi dengan cara klik tombol select a photosphere (tombol warna Mengarahkan Domain ke VPS
(https://latcoding.com/2016/11/27/mengarahkan-
biru dibagian atas kiri website). Tunggu beberapa saat, setelah itu langsung muncul gambar tadi ke
domain-ke-ip-vps/)
dalam bentuk photo sphere :
Install apache, php5.5, postgresql9.5, pgadmin3 on
centos 7 (https://latcoding.com/2016/11/27/install-
apache-php5-5-postgresql9-5-pgadmin3-on-centos-
7/)
 FAN PAGE
(HT TPS://WWW.FACEB OOK.COM/PAGES/

Latcodingcom
53 likes

(http://latcoding.com/wp-content/uploads/2016/01/photosphere-viewer-online.png)
Like Page Shar

Gimana keren kan?

Be the rst of your friends to like this
Contoh tadi diatas itu kan tools menampilkan photosphere secara online, nah terus gimana caranya
ya nampilin photospher di komputer lokal gue (localhost)?. Penasaran lagi, gue searching2 lagi dah..
dapatlah sebuah plugin javascript yang bisa menampilkan photo sphere di localhost. Simak
penjelasannya berikut :

MENAMPILKAN PHOTO 360 DERAJAT (PHOTO SPHERE) KE DALAM WEBSITE

Gampang banget nampilin photo sphere di website, tinggal install plugin, masukin url photonya, tampil
deh.

Pluginnya bernama Photo Sphere Viewer, pake bahasa javascript dan html5 (yg udh support
canvas). Berikut caranya :

1) download dulu Photo Sphere Viewer (https://github.com/JeremyHeleine/Photo-Sphere-Viewer)

(6.31 MB, Klik Download ZIP disebelah kanan)
2) extrak, akan menghasilkan folder Photo-Sphere-Viewer-master, pindahkan ke folder /htdocs
3) Di folder Photo-Sphere-Viewer-master itu sudah ada contohnya, jadi sekarang kita tinggal buka
contohnya di browser : http://localhost/Photo-Sphere-Viewer-master/examples/example.html
4) Muncul loading, tunggu hingga gambarnya terdownload. Setelah itu akan muncul photo 360
derajat(photosphere) yang sudah bisa digeser-geser kekanan kekiri Mantap!

(http://latcoding.com/wp-content/uploads/2016/01/offline-photosphere-viewer.png)
5) Kalau mau ganti gambarnya tinggal edit example.html, ganti dibagian ini dengan url gambar kamu :
panorama: 'http://tassedecafe.org/wp-content/uploads/2013/01/parc-saint-pierre-amiens.jpg',

Misal saya ganti dengan gambar yang pertama tadi didownload

(http://photosphereviewer.net/images/demo/demo3_full.jpg) :
panorama: 'demo3_full.jpg',

Outputnya :

(http://latcoding.com/wp-content/uploads/2016/01/photosphere-360-derajat-localhost.png)

6) Di javascriptnya, ada beberapa parameter yang biasa gue gunain yaitu :

?
 1 var PSV = new PhotoSphereViewer({
2 panorama: 'demo3_full.jpg',
3 container: div,
4 time_anim: false, // start animasi (ganti false dengan 1000 un
5 anim_speed: '1.3rpm', // kecepatan puteran animasi
6 navbar: true,
7 navbar_style: {
8 backgroundColor: 'rgba(58, 67, 77, 0.7)'
9 },
10 long_offset: 3.17/1800, // kecepatan mouse (geser kanan)
11 lat_offset: 3.17/1440, // kecepatan mouse (geser kiri)
12 });

Untuk lebih jelasnya, lihat di dokumentasinya disini (https://github.com/JeremyHeleine/Photo-Sphere-

Viewer).

Plugin Photo Sphere Viewer ini menggunakan three.js. Three.js merupakan javascript untuk
membuat animasi 3 Dimensi di browser. Browser yang support three.js ini adalah browser yang sudah
pakai teknologi webGL dan canvas (html5). So, kalo browser kamu sudah support canvas html5, kamu
sudah bisa gunakan Photo Sphere Viewer .

Nah bro, sebelum gue tutup tutorial ini, gue mau kasih contoh hasil photosphere yang udah gue online-
in di situs latcoding.com ini. Demonya ada disini (http://demo.latcoding.com/Photo-Sphere-Viewer-
master/examples/example.html).

Semoga bermanfaat!

GIS (https://latcoding.com/category/gis/), javascript (https://latcoding.com/category/javascript/)

[related_post themes="text" id="4088"]

AMBAR HASBIYATMOKO
Hello, I'm web developer. Passionate about programming, networking and
web server. @kaskus (http://www.kaskus.co.id/prole/2728751) @facebook
(https://www.facebook.com/prol.hasbiyatmoko)

M O R E P O S T S ( H T T P S : // L A T C O D I N G . C O M /A U T H O R / M O K O / )

CARA INSTAL DAN MENGGUNAKAN TILEMILL DI PROGRAMMER MAIN GOOGLE ADSENSE

UBUNTU 14.04 (HTTPS://LATCODING.COM/2016/01/22/PROGRAMMER-
(HTTPS://LATCODING.COM/2015/12/28/INSTAL- MAIN-GOOGLE-ADSENSE/)
TILEMILL-DI-UBUNTU-14-04/)

3 COMMENTS

REPLY (HTTPS://LATCODING.COM/2016/01/05/PHOTO-360-DERAJAT-ATAU-PHOTO-SPHERE/?REPLYTOCOM=970#RESPOND)
July 23, 2016 (https://latcoding.com/2016/01/05/photo-360-derajat-atau-photo-sphere/#comment-970)
HENDRA

hi saya udah baca di latcoding.com mengenai 360 photo sphere, lalu untuk penambahan button
ataupunn image didalam image 360 gmn ya?

September REPLY (HTTPS://LATCODING.COM/2016/01/05/PHOTO-360-DERAJAT-ATAU-PHOTO-SPHERE/?REPLYTOCOM=1027#RESPOND)

13, 2016 (https://latcoding.com/2016/01/05/photo-360-derajat-atau-photo-sphere/#comment-1027)
SUYATMO (HTTP://ZONEORDERING.NET)

Thanks buat sharingnya.

Bagaimana kalau satu photo hendak dilink ke photo selanjutnya? Sejenis google street yg berpindah
lokasi.
November REPLY (HTTPS://LATCODING.COM/2016/01/05/PHOTO-360-DERAJAT-ATAU-PHOTO-SPHERE/?REPLYTOCOM=1086#RESPOND)
22, 2016 (https://latcoding.com/2016/01/05/photo-360-derajat-atau-photo-sphere/#comment-1086)
HAERUL (HTTP://WWW.LOMBOKENJOYTRIP.COM)

bro kenapa ketika saya ganti image . dengan mengganti URL di example.html nya . gambarnya tidak
mau muncul bro . mohon penjelasaanya , terimakasih

LEAVE A REPLY

Your email address will not be published. Required elds are marked *

COMMENT

NAME *

EMAIL *

WEBSITE

Time limit is exhausted. Please reload CAPTCHA.

2 = TWO

POST COMMENT

N OT I F Y M E O F F O L LO W- U P C O M M E N T S BY E M A I L .

N OT I F Y M E O F N E W P O S T S BY E M A I L .

PAGES RECENT POSTS

About Me (https://latcoding.com/about-me/)
Contact Me (https://latcoding.com/contact-me/)
Privacy Policy (https://latcoding.com/privacy-policy/)
Install golang di ubuntu 16.04 (https://latcoding.com/2017/09/24/install-golang-di-
ubuntu-16-04/)
Centos 7 Sinkronisasi le dan folder dari server A ke server B secara realtime
(https://latcoding.com/2017/01/06/centos-7-sinkronisasi-le-dan-folder-dari-server-

Term Of Service (https://latcoding.com/term-of-service/) ke-server-b-secara-realtime/)

Install teamviewer di Ubuntu 16.04 LTS (https://latcoding.com/2016/12/18/install-

teamviewer-di-ubuntu-16-04-lts/)

Mengarahkan Domain ke VPS (https://latcoding.com/2016/11/27/mengarahkan-

domain-ke-ip-vps/)

Install apache, php5.5, postgresql9.5, pgadmin3 on centos 7

(https://latcoding.com/2016/11/27/install-apache-php5-5-postgresql9-5-pgadmin3-
on-centos-7/)

2017 latcoding.com. All rights reserved. Hiero (http://athemes.com/theme/hiero) by aThemes