Untuk demo ini, anda kini memerlukan Google Chrome untuk mudah alih. Ia mungkin berpotensi bekerja di Firefox untuk mudah alih juga, namun saya mendapati peristiwa klik tidak mencetuskan saya apabila saya mencubanya di HTC One M9 saya. Ia juga berfungsi pada beberapa penyemak imbas desktop (Chrome dan Opera bekerja dengan baik pada Mac saya) tetapi pastinya bukan pengalaman yang sama seperti telefon pintar dengan acara sentuhan. Ia boleh menjadi kemas pada tablet walaupun.
Anda juga memerlukan akaun IFTTT dan pengetahuan tentang cara menubuhkan saluran pembuat dengan peraturan yang mencetuskan permintaan HTTP. Sekiranya anda baru ke IFTTT, kami sebelum ini melepasi asas -asas dalam artikel mengenai menghubungkan mentol lampu LIFX ke IoT menggunakan IFTTT. Bagi mereka yang baru ke saluran Maker, kami juga telah menutupi bahawa dalam menghubungkan IoT dan Node.js ke IFTTT.
Akhir sekali, anda perlu mencetak penanda ke sekeping kertas. Penanda yang akan kami gunakan adalah yang satu ini:
Jika anda lebih suka masuk ke dalam kod dan mencubanya, semuanya boleh didapati di GitHub.
AWE.JS adalah perpustakaan JavaScript yang menggunakan tiga.js, kamera peranti anda dan beberapa teknik pintar yang cantik untuk membuat realiti tambahan dalam penyemak imbas. Anda boleh memuat turun perpustakaan dan beberapa sampel pada repo Awe.js GitHub. Ia menyediakan empat pengalaman AR yang berlainan, masing -masing dengan contoh mereka sendiri dalam repo:
kod demo kami lebih dari 300 baris panjang, tetapi banyak kod berulang untuk objek yang sama. Saya akan mengesyorkan memuat turun kod demo dari repo github demo dan mengikuti bersama -sama dengan penjelasan yang disediakan di sini. Sebaik sahaja anda mempunyai idea bagaimana ia berfungsi, cuba bermain -main dan membina sesuatu yang anda sendiri.
semuanya bermula dalam acara beban di tetingkap kami. Perkara pertama yang kami sertakan adalah pembolehubah untuk mengesan sama ada panel kawalan AR kami (saya telah memanggilnya "menu" untuk pendek di sini) dibuka atau tidak. Pada mulanya, ia ditutup.
<span>window.addEventListener('load', function() {
</span> <span>var menu_open = false;
</span>
<span>// Our code continues here
</span> <span>});</span>Kemudian, kita mula menggunakan perpustakaan AWE.JS. Semua yang kita lakukan ditakrifkan dalam fungsi window.awe.init (). Kami mulakan dengan beberapa tetapan global untuk adegan AR kami.
<span>window.addEventListener('load', function() {
</span> <span>var menu_open = false;
</span>
<span>// Our code continues here
</span> <span>});</span>Setelah tetapan kami ada, kami kemudian menentukan apa yang perlu dilakukan apabila Awe.js telah dimulakan. Segala -galanya dibalut dalam fungsi Awe.util.require () yang mentakrifkan keupayaan pelayar yang diperlukan sebelum memuatkan fail JavaScript tambahan yang kami perlukan. Berhati -hati untuk hanya menentukan keupayaan penyemak imbas yang anda perlukan untuk demo, kerana anda tidak boleh menghalang aplikasi AR anda daripada bekerja di beberapa pelayar jika anda menentukan dengan tidak betul menggunakan keupayaan yang disenaraikan dalam beberapa contoh GitHub yang lain. Sebagai contoh, untuk mempunyai unsur -unsur yang diposisikan berdasarkan mata kompas, anda memerlukan akses kepada keupayaan 'gyro'. Itu tidak akan berfungsi pada kebanyakan pelayar desktop. Kami tidak memerlukannya dalam demo ini, jadi kami mengecualikannya.
<span>window.awe.init({
</span> <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
</span> <span>settings: {
</span> <span>container_id: 'container',
</span> <span>fps: 30,
</span> <span>default_camera_position: { x:0, y:0, z:0 },
</span> <span>default_lights: [{
</span> <span>id: 'point_light',
</span> <span>type: 'point',
</span> <span>color: 0xFFFFFF
</span> <span>}]
</span> <span>},</span>fail-fail yang ditakrifkan dalam fungsi khusus untuk awe.js-lib/awe-standard-dependencies.js, lib/awe-standard.js dan lib/awe-standard-window_resized.js masing-masing cukup biasa, menentukan, menentukan bit dan kepingan standard untuk awe.js dan pengendalian saiz semula tetingkap. Demo kami menggunakan penanda, yang memerlukan dua fail lain yang disenaraikan di bawahnya.
<span>ready: function() {
</span> awe<span>.util.require([
</span> <span>{
</span> <span>capabilities: ['gum','webgl'],</span>Setelah kami mendapat semua fail yang berjaya dimuatkan, kami menjalankan fungsi yang tepat bernama () AWE.JS. Fungsi pertama yang akan anda jalankan apabila anda sudah bersedia untuk memaparkan unsur -unsur menetapkan adegan Awe.js.
<span>files: [ </span> <span>['lib/awe-standard-dependencies.js', 'lib/awe-standard.js'], </span> <span>'lib/awe-standard-window_resized.js', </span> <span>'lib/awe-standard-object_clicked.js', </span> <span>'lib/awe-jsartoolkit-dependencies.js', </span> <span>'lib/awe.marker_ar.js' </span> <span>],</span>
Semua elemen dalam awe.js diletakkan dalam "titik minat" (POI). Ini adalah titik khusus di tempat kejadian yang ditandai melalui koordinat bahawa objek boleh diletakkan di dalamnya. Anda boleh memindahkan racun di dalam Awe.js serta unsur -unsur sendiri. Kami mencipta POI tunggal yang akan diletakkan di mana sahaja penanda kertas tertentu dilihat. Untuk membuat POI, kami menggunakan fungsi AWE.JS AWE.POIS.ADD ().
Saya telah memberikannya id 'penanda' tetapi anda boleh memanggilnya apa sahaja yang anda suka, selagi anda konsisten sepanjang rujukan lain kepada POI ini dalam kod. Kami menetapkan kedudukan awalnya (0,0,10000), yang meletakkannya ke jarak sedikit sehingga kami bersedia menggunakannya. Kami juga menetapkannya untuk tidak kelihatan sehingga kami melihat penanda.
<span>window.addEventListener('load', function() {
</span> <span>var menu_open = false;
</span>
<span>// Our code continues here
</span> <span>});</span>unsur -unsur yang kita tambahkan ke dalam racun kita dipanggil "unjuran" dalam AWE.JS. Unjuran pertama yang kami tambahkan ke dalam adegan kami yang saya panggil 'Wormhole', kerana ini adalah dataran hitam rata di mana item menu kami akan muncul secara ajaib. Sama seperti ID POI, anda boleh menamakan apa sahaja, selagi anda menyimpannya konsisten dengan rujukan lain dalam kod anda. Kami menambahnya ke POI kami menggunakan fungsi AWE.Projections.add ().
<span>window.awe.init({
</span> <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
</span> <span>settings: {
</span> <span>container_id: 'container',
</span> <span>fps: 30,
</span> <span>default_camera_position: { x:0, y:0, z:0 },
</span> <span>default_lights: [{
</span> <span>id: 'point_light',
</span> <span>type: 'point',
</span> <span>color: 0xFFFFFF
</span> <span>}]
</span> <span>},</span>Terdapat beberapa pilihan untuk objek yang boleh kita tambahkan sebagai unjuran, jadi saya akan menerangkannya dengan lebih terperinci. Ambil perhatian - semua nilai x, y dan z di sini untuk kedudukan dan berputar berkaitan dengan POInya. POI itu ditakrifkan pada akhir oleh idnya sebagai {poi_id: 'penanda'}.
Dalam demo, saya menambah tujuh kotak/kiub yang berlainan ke tempat kejadian, masing -masing adalah 30 piksel tinggi dan meletakkan 31 piksel lebih rendah pada paksi y supaya ia pada asalnya tersembunyi oleh lubang cacing. Mereka semua lebar yang sedikit berbeza untuk menjadikannya kelihatan seperti bola lampu.
Saya memindahkan mereka sedikit kembali dari pusat lubang cacing melalui koordinat X dan Z mereka tetapi jujur, ia mungkin kelihatan baik pada 0 untuk mereka juga jika -5 bug anda. Saya telah berputar 45 darjah pada paksi y supaya ia menghadap pada sudut yang bagus di atas lubang cacing.
<span>window.addEventListener('load', function() {
</span> <span>var menu_open = false;
</span>
<span>// Our code continues here
</span> <span>});</span>masing -masing mempunyai id 'ar_button_ {number}' di mana nombornya adalah indeks butang menu dari bawah ke atas. Kami akan menggunakan ID ini dalam panggilan HTTP kami ke IFTTT, jadi menjaga ini konsisten dan tepat adalah penting!
Selepas unjuran kami ditakrifkan, kami menentukan sekeping teka -teki AR kami yang agak penting - peristiwa pengesanan penanda kami. Kami menambah ini sebagai array yang diserahkan kepada fungsi AWE.EVENTS.ADD ().
<span>window.awe.init({
</span> <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
</span> <span>settings: {
</span> <span>container_id: 'container',
</span> <span>fps: 30,
</span> <span>default_camera_position: { x:0, y:0, z:0 },
</span> <span>default_lights: [{
</span> <span>id: 'point_light',
</span> <span>type: 'point',
</span> <span>color: 0xFFFFFF
</span> <span>}]
</span> <span>},</span>Kami hanya mendapat satu acara Awe.js, jadi hanya ada satu acara di sini. Acara ini ditakrifkan dengan ID yang boleh kita panggil apa -apa. Saya telah memanggilnya 'ar_tracking_marker'. Kami menentukan jenis peranti yang boleh digunakan. Ini seolah -olah sama dalam semua contoh Awe.js setakat ini dalam repo mereka, jadi saya telah meninggalkannya seperti PC dan Android ditetapkan ke 1.
<span>ready: function() {
</span> awe<span>.util.require([
</span> <span>{
</span> <span>capabilities: ['gum','webgl'],</span>maka kami telah mendaftar () dan tidak berfungsi () fungsi untuk menambah dan mengalih keluar pendengar acara yang menonton penanda.
<span>files: [ </span> <span>['lib/awe-standard-dependencies.js', 'lib/awe-standard.js'], </span> <span>'lib/awe-standard-window_resized.js', </span> <span>'lib/awe-standard-object_clicked.js', </span> <span>'lib/awe-jsartoolkit-dependencies.js', </span> <span>'lib/awe.marker_ar.js' </span> <span>],</span>
Kami kemudian menentukan pengendali acara yang akan berjalan sebaik sahaja kami melihat penanda. Kami melihat penanda "64" dan hanya menjalankan respons apabila kami menemuinya.
<span>success: function() {
</span> <span>window.awe.setup_scene();</span>Dalam respons kami untuk mencari penanda, kami mahu memindahkan POI kami yang kami panggil 'penanda' ke tempat dengan penanda kertas fizikal kami dan menjadikannya kelihatan. Kami mengubahnya untuk menyelaraskan penanda fizikal menggunakan event.detail ['64 ']. Transform.
awe<span>.pois.add({id: 'marker', position: {x: 0, y: 0, z: 10000}, visible: false});</span>kami juga menetapkan unjuran 'lubang cacing' kami.
awe<span>.projections.add({
</span> <span>id: 'wormhole',
</span> <span>geometry: {shape: 'plane', height: 400, width: 400},
</span> <span>position: {x: 0, y: 0, z: 0},
</span> <span>rotation: {x: 90, z: 45},
</span> <span>material: {
</span> <span>type: 'phong',
</span> <span>color: 0x000000
</span> <span>}
</span> <span>}, {poi_id: 'marker'});</span>Jika kita tidak melihat penanda tetapi menu kami dibuka, kami akan menetapkannya untuk terus terbuka tetapi menyembunyikan lubang cacing. Penalaran utama untuk ini ialah dengan beberapa perubahan cahaya, penanda mungkin menjadi tidak dapat dibaca. Kami tidak mahu menjebak diri ke dalam cahaya warna tertentu tanpa cara untuk kembali!
awe<span>.projections.add({
</span> <span>id: 'ar_button_one',
</span> <span>geometry: {shape: 'cube', x: 60, y: 30, z: 5},
</span> <span>rotation: {y: 45},
</span> <span>position: {x: -5, y: -31, z: -5},
</span> <span>material: {
</span> <span>type: 'phong',
</span> <span>color: 0xFF0000
</span> <span>}
</span> <span>}, {poi_id: 'marker'});</span>Jika tidak ada penanda dan menu kami tidak dibuka, maka seluruh POI tersembunyi menunggu kami melihatnya.
awe<span>.events.add([ </span> <span>// Our events here </span> <span>]);</span>
kami selesai dengan memberitahu AWE.JS untuk mengemas kini tempat kejadian.
<span>id: 'ar_tracking_marker',
</span> <span>device_types: {
</span> <span>pc: 1,
</span> <span>android: 1
</span> <span>},</span>Bit terakhir fungsi sebenar yang akan kami sediakan ialah acara klik kami. Semua ini berada dalam acara object_clicked.
<span>register: function(handler) {
</span> <span>window.addEventListener('ar_tracking_marker', handler, false);
</span> <span>},
</span> <span>unregister: function(handler) {
</span> <span>window.removeEventListener('ar_tracking_marker', handler, false);
</span> <span>},</span>Acara klik kami mengandungi id unjuran yang diklik dalam e.detail.projection_id. Kami menggunakan pernyataan suis untuk menentukan cara bertindak balas terhadap klik. Klik pada lubang cacing terbuka dan tutup menu maya, sementara klik pada butang menu maya akan mencetuskan warna cahaya kami. Kami menggunakan pernyataan suis kerana setiap butang akan menjalankan kod tindak balas yang sama.
<span>window.addEventListener('load', function() {
</span> <span>var menu_open = false;
</span>
<span>// Our code continues here
</span> <span>});</span>Acara klik Wormhole kami dibuka dan tutup menu bergantung kepada sama ada menu_open adalah benar atau palsu. Jika ia palsu, maka kami menggunakan AWE.JS AWE.PROJECTIONS.UPDATE () berfungsi untuk menghidupkan setiap butang ke atas paksi Y lebih satu saat. Itu bergerak keluar dari lubang cacing. Satu -satunya perbezaan antara pergerakan setiap unjuran adalah berapa banyak objek bergerak ke atas paksi y.
<span>window.awe.init({
</span> <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
</span> <span>settings: {
</span> <span>container_id: 'container',
</span> <span>fps: 30,
</span> <span>default_camera_position: { x:0, y:0, z:0 },
</span> <span>default_lights: [{
</span> <span>id: 'point_light',
</span> <span>type: 'point',
</span> <span>color: 0xFFFFFF
</span> <span>}]
</span> <span>},</span>Jika tidak, jika menu dibuka, maka kami memindahkan mereka kembali ke kedudukan awal mereka di bawah lubang cacing dan tersembunyi dari pandangan.
<span>ready: function() {
</span> awe<span>.util.require([
</span> <span>{
</span> <span>capabilities: ['gum','webgl'],</span>selepas pernyataan jika kami, kami bertukar menu_open untuk bertentangan dengan apa yang kami dapatkan di mana ia terpulang kepada.
<span>files: [ </span> <span>['lib/awe-standard-dependencies.js', 'lib/awe-standard.js'], </span> <span>'lib/awe-standard-window_resized.js', </span> <span>'lib/awe-standard-object_clicked.js', </span> <span>'lib/awe-jsartoolkit-dependencies.js', </span> <span>'lib/awe.marker_ar.js' </span> <span>],</span>
Dalam acara klik butang kami, kami membuat permintaan HTTP ke IFTTT yang termasuk ID butang kami sebagai nama acara dan kunci kami untuk mengakses perkhidmatan IFTTT. Kami tidak benar -benar menggunakan data yang kembali, kami log masuk ke konsol untuk tujuan debug tetapi jika tidak, hasil sebenar datang dari IFTTT bertindak balas terhadap panggilan HTTP.
<span>success: function() {
</span> <span>window.awe.setup_scene();</span>Selepas semua ini, jika awe.js tidak dimuatkan kerana ketidakcocokan dan sebagainya, kami mempunyai skrip alternatif yang dimuatkan untuk menunjukkan mesej ralat.
awe<span>.pois.add({id: 'marker', position: {x: 0, y: 0, z: 10000}, visible: false});</span>Kemas kini pada akhir tahun 2015 - Saya melompat kembali ke artikel ini untuk menambah sedikit maklumat yang agak penting - Chrome kini memerlukan halaman web yang menggunakan kamera dihidangkan melalui HTTPS. Jadi sebelum cuba menjalankan ini, anda perlu mencari cara untuk menjalankan perkhidmatan anda melalui HTTPS. Satu kaedah yang saya gunakan setakat ini untuk ujian adalah NGROK, yang boleh menyediakan terowong HTTPS ke localhost anda. Kami mempunyai panduan untuk mengakses localhost dari mana saja di SitePoint yang dapat membantu anda memulakan.
Jika kita menjalankan kod ini di Google Chrome untuk mudah alih dan menunjuk pada penanda kita, lubang cacing harus muncul.
Jika kita mengklik lubang cacing, butang menu kita harus menghidupkan ke tempat yang betul.
Jika kita mengklik salah satu item menu ...
ia harus mengubah warna cahaya LIFX kami!
Itu semua yang anda perlu tahu untuk memulakan dengan realiti tambahan dalam penyemak imbas menggunakan AWE.JS. Ia mempunyai banyak potensi, kerana banyak perkembangan dalam dunia teknologi lakukan hari ini! Pasukan Awe.js sentiasa bekerja di plugin dan harus ada versi yang lebih baru dan lebih lengkap yang akan datang tidak lama lagi! Ia juga mungkin untuk menubuhkan kesan stereoskopik tiga.js untuk digunakan di Google Cardboard dan menggabungkannya dengan beberapa ciri AWE.js untuk membina pengalaman alat dengar AR juga. Saya fikir ia mungkin sedikit untuk satu artikel, jadi perhatikan artikel masa depan mengenai perkara itu!
Jika anda bereksperimen dengan beberapa sihir AR menggunakan kod ini atau mengambilnya lebih jauh, tinggalkan nota dalam komen atau berhubung dengan saya di Twitter (@ThatpatrickGuy), saya suka menyemaknya!
Bagaimana saya memulakan dengan Awe.js? JS, anda terlebih dahulu perlu memuat turun perpustakaan dari repositori GitHub rasmi. Sebaik sahaja anda melakukannya, anda boleh mula membuat adegan AR anda dengan menulis kod JavaScript. AWE.JS menyediakan pelbagai API dan fungsi yang boleh anda gunakan untuk mengawal pengalaman AR, termasuk fungsi untuk membuat objek, mengawal kamera, dan mengendalikan input pengguna.
Jika anda menghadapi masalah dengan Awe.js, terdapat beberapa sumber yang boleh anda berikan untuk mendapatkan bantuan. Repositori GitHub rasmi untuk AWE.JS termasuk dokumentasi komprehensif yang merangkumi semua aspek perpustakaan. Anda juga boleh menyemak pelacak isu di GitHub untuk melihat sama ada orang lain menghadapi masalah yang sama. Sekiranya anda tidak dapat mencari penyelesaian di sana, anda boleh cuba meminta bantuan pada limpahan timbunan atau komuniti pemaju dalam talian yang lain. projek sumber terbuka. Ini bermakna anda boleh menggunakan, mengubah suai, dan mengedarkan kod secara bebas, selagi anda mematuhi terma lesen. Kod sumber untuk awe.js boleh didapati di GitHub, jadi anda juga boleh menyumbang kepada projek dengan mengemukakan laporan bug, mencadangkan ciri -ciri baru, atau mengemukakan kod anda sendiri. .js?
Terdapat banyak cara untuk menyumbang kepada projek AWE.JS. Jika anda seorang pemaju, anda boleh menyumbang dengan mengemukakan laporan bug, mencadangkan ciri baru, atau kod menulis. Jika anda bukan pemaju, anda masih boleh menyumbang dengan menulis dokumentasi, membuat tutorial, atau membantu menyebarkan berita tentang Awe.js. Sebarang sumbangan sangat dihargai dan membantu membuat AWE.js alat yang lebih baik untuk semua orang.
Atas ialah kandungan terperinci Realiti tambahan dalam penyemak imbas dengan awe.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk membuka kunci kata laluan pada telefon Apple anda jika anda terlupa
Bagaimana untuk menyelesaikan ranap ribut web
Apakah peralatan terminal?
Pengenalan kepada klasifikasi sistem linux
Apakah maksud topeng ps?
Cara menggunakan fungsi groupby
Cara menggunakan aspose
Penggunaan mengisytiharkan dalam Oracle
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
