WebGL biasanya digunakan untuk desain web dan game 3D yang berbasis web. WebGL juga juga digunakan oleh beberapa peneliti untuk tujuan sains. Sebagai contoh, dalam buku yang berjudul "Cellular Automata", peneliti menggunakan WebGL untuk mensimulasikan alur Debris. Sedangkan pada paper "Visualization of molecular structures using state-of-the-art techniques in WebGL", peneliti mensimulasikan molekul didalamnya. NASA juga membangun aplikasi web yang interaktif yang disebut Experience Curiosity untuk merayakan ulang tahun ketiga dimana Curiosity Rover mendarat di Mars.
Bagaimana cara melakukannya
- Untuk sisi server aplikasi kami telah menggunakan beberapa modul Node.js:
- Express adalah kerangka kerja web.
- Request untuk melakukan permintaan ajax di Node.
- Is-bot untuk menangkap crawler mesin pencari.
- Dunia:
- Globe itu sendiri dimungkinkan berkat WebGL Earth.
- OpenStreetMap untuk petak peta.
- Desain:
- Menu samping dianimasikan sepenuhnya dengan CSS.
- Beberapa jQuery untuk front-end.
- Menemukan koordinat alamat IP dilakukan dengan bantuan geoplugin.com .
Cara menjalankannya
Jika ingin menjalankan aplikasi ini secara lokal, hal pertama yang harus dilakukan adalah pastikan kita memiliki node.js yang terinstal di PC terlebih dahulu. Setelah itu, unduh dan unzip arsip dengan kode ke folder bernama nodejs-visior-globe . Setelah selesai, buka terminal dan navigasikan ke folder yang baru dibuat. Sesampai di sana, jalankan perintah di bawah ini untuk menginstal paket npm yang dibutuhkan:
npm instal
Ketika proses ini selesai, jalankan kode berikut dan pergi ke http: // localhost: 8888 di browser.
simpul app.js
Di sana kita akan melihat globe. Namun, jika diperhatikan bahwa tidak ada orang di peta. Itu karena semuanya bekerja secara offline dan oleh karena itu kita memerlukan server aktif, ini tidak akan cukup.
Mengintegrasikannya dengan situs kita
Ada dua hal yang perlu Anda lakukan sebelum Anda melihat pengunjung situs web Anda di dunia:
- Unggah aplikasi ke layanan hosting seperti heroku . Kami telah membahas cara menyebarkan kode Anda ke heroku sebelumnya. Instruksi persis sama. Satu-satunya perbedaan adalah Anda akan berakhir dengan URL globe baru Anda alih-alih aplikasi obrolan pribadi.
- Sertakan gambar pelacakan khusus di situs Anda. Anda dapat melakukan ini dengan menambahkan html ini ke footer setiap halaman situs Anda <img src="http://yourglobe/ping" width="1" height="1" style="display:none" /> . Ganti yourglobe dengan url heroku dari aplikasi Anda. Jika Anda memuat url src dari gambar di browser, Anda akan melihat teks "Selesai".
Gambar pelacakan adalah gambar tak terlihat yang tertanam di setiap halaman situs web Anda, dan yang menunjuk ke http://yourglobeurl.com/ping . Saat orang memuat situs Anda, browser mereka memuat semua gambar secara otomatis, yang menyebabkan URL pelacakan juga dimuat. Aplikasi kami mendengarkan URL spesifik itu, dan mendapatkan alamat ip pengunjung, menemukan lokasi mereka dan menyimpannya. Pengguna dianggap online hingga 5 menit setelah mengunjungi situs Anda (ini dapat dikonfigurasi di app.js).
0 komentar:
Posting Komentar