Apakah Anda ingin membuat aplikasi Augmented Reality di web? Anda sekarang dapat melakukannya hanya dalam 10 baris HTML! Woww... serius😀! Anda dapat mengikuti penjelasan berikut!
Anda dapat menggunakan AR.js dan https://aframe.io/. Anda dapat membuat aplikasi augmented reality yang efisien untuk web langsung di ponsel Anda tanpa menginstal aplikasi apa pun. Tapi mari kita melangkah lebih jauh dan melihat bagaimana menghasilkan pengalaman augmented reality Anda sendiri.
Library
Pertama, Anda menyertakan a-frame, upaya yang dimulai oleh MozillaVR untuk membangun pengalaman VR. A-frame berisi three.js. Kemudian Anda cukup memasukkan AR.js untuk a-frame. AR.js akan membuat tampilan 3d dalam AR berjalan sangat cepat di ponsel Anda, meskipun ponsel berusia 2-3 tahun! Perhatikan kode berikut dimana script mengambil aframe.min.js, aframe-ar.js, dan three.js.
Body HTML
Pada kode body html Anda dapat membuat tampilan yang diinginkan.
Pada bagian body, seperti biasanya Anda dapat membuat tampilan yang Anda inginkan.
Creating a 3d Scene
Deklarasikan adegan Anda, dan tentukan Anda menggunakan arttoolkit. Selanjutnya, kita akan membuat adegan a-frame. Kita juga perlu menambahkan komponen ARToolkit. Perhatikan bahwa kode pada a-scene mengambil source dari webcam.
ARToolKit adalah perpustakaan sumber terbuka yang kami gunakan untuk melokalkannya melalui kamera ponsel.
Menambahkan Konten Sederhana
Berikutnya kita akan menambahkan bentuk yang akan ditampilkan di atas marker. Hanya sebuah kotak sederhana
Setelah kita membuat adegan 3d, kita bisa mulai menambahkan objek ke dalamnya. Di baris ini, kami menambahkan kotak/box sederhana. Kami kemudian memodifikasi bahannya untuk membuatnya transparan, opacity 0.5. Kami juga mengubah posisinya sehingga ditampilkan di atas penanda AR.
Menambahkan Kamera AR
Tentukan kamera yang dikendalikan oleh posisi penanda
Pada langkah terakhir ini, kita akan menambahkan kamera. Kami menyertakan preset 'hiro' (seperti pada penanda Hiro). Akhirnya, kami membuatnya bergerak seolah-olah itu adalah ponsel Anda.
Mudah kan?
Selamat! Kamu selesai. Anda sekarang memiliki augmented reality, hanya dalam 10 baris HTML, berjalan cepat di ponsel Anda dan gratis.
Complete Source :
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam;'>
<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>Sumber : Medium
