Gambar 360 Derajat

Ada banyak cara yang bisa ditempuh untuk menampilkan gambar 360 derajat, atau juga disebut dengan panorama. Bisa dengan software khusus yang memang dibuat untuk keperluan ini. Atau bisa juga dengan rekaman video yang menyorot sebesar 360 derajat. Saya ingat sekitar lima tahun lalu membuat hal yang sama, dengan memanfaatkan java applet. Dan sekarang saya mencoba dengan "akal-akalan" sederhana untuk menghasilkan gambar 360 derajat.

Model ini hanya menggunakan fungsi yang ada pada HTML, CSS, dan Javascript. Gambar 360 derajat yang dihasilkan dengan cara ini memang tidak ideal, namun tidak diperlukan software khusus untuk menampilkannya. Cukup sebuah web browser.

Pertama yang perlu disiapkan adalah sebuah gambar yang melingkupi 360 derajat. Saya mengambilnya dengan kamera digital, dengan cara memotret sekeliling lokasi yang diinginkan. Untuk memudahkan ketika menggabungkan foto, sebaiknya gunakan kecepatan rana yang sama untuk setiap arah pemotretan, sehingga kecerahan foto sesuai dengan keadaan sebenarnya pada arah tersebut. Lalu sambung foto-foto tersebut dengan software pengolah gambar, sehingga menjadi sebuah gambar yang panjang yang meliputi sekeliling lokasi (360^o).

Ketika menggabungkan foto kita akan mengalami kesulitan dalam menyambung antarfoto karena perspektif masing-masing arah berbeda. Untuk menghasilkan gambar yang baik, ambil arah pemotretan sebanyak mungkin, dengan jarak antar arah cukup kecil. Tigapuluhenam foto bisa menghasilkan penggabungan yang cukup baik.

Setelah gambar selesai, untuk menampilkannya sehingga bisa bergerak memutar digunakan Javascript dan CSS, dengan gagasan seperti berikut :

• Gambar ditampilkan pada sebuah halaman HTML sederhana, kita sebut halaman A.
• Dalam halaman A ini gambar yang sudah disiapkan tersebut disusun sebanyak 5 buah mendatar secara berulang, dalam sebuah kontainer. Disini menggunakan tag <DIV>
• Buat sebuah halaman HTML lagi yang memiliki sebuah IFRAME.
• Atur ukuran IFRAME agar tingginya sama dengan tinggi gambar, dan lebarnya, sesuaikan dengan kebutuhan, dalam contoh di bawah ini 500 pixel.
• Tampilkan halaman A tadi dalam IFRAME ini
• Dengan Javascript kita buat sebuah navigasi yang berguna menggeser kontainer yang berisi gambar di halaman A tersebut, sehingga menimbulkan kesan gambar berputar.

Contohnya dapat dilihat di bawah ini. Jika ingin melihat kode yang digunakan beserta file yang digunakan silahkan download file gambar 360 (103 KB). Berisi 2 file HTML dan satu file gambar.