Pembangunan web realiti diperkukuh (AR) menggunakan JavaScript dan AR.js

Augmented reality (AR) ialah teknologi yang menindih maklumat digital dan objek maya ke dunia nyata. Dalam beberapa tahun kebelakangan ini, ia telah menjadi sangat popular kerana kemajuan dalam peranti mudah alih dan teknologi web. Dalam artikel ini, kami akan meneroka asas pembangunan web AR menggunakan JavaScript dan AR.js, perpustakaan JavaScript yang berkuasa untuk mencipta pengalaman AR di web.

Ketahui tentang realiti tambahan

Realiti tambahan menggabungkan dunia sebenar dengan objek maya untuk mencipta pengalaman pengguna yang interaktif dan mengasyikkan. Aplikasi AR boleh digunakan untuk pelbagai tujuan seperti permainan, pendidikan, pemasaran dan visualisasi. Teknologi AR menggunakan penglihatan komputer untuk mengenal pasti dan menjejaki persekitaran dunia sebenar, membolehkan penempatan masa nyata dan interaksi objek maya.

Pengenalan AR.js

AR.js ialah perpustakaan JavaScript yang memudahkan pembangunan pengalaman AR web. Ia berdasarkan standard WebAR dan memanfaatkan kuasa pelayar web moden untuk mencipta aplikasi AR tanpa memerlukan pembangunan aplikasi asli. AR.js menyokong AR berasaskan teg, di mana teg pratakrif (seperti kod QR atau imej) digunakan untuk mencetuskan kandungan maya.

Fahami konsep AR.js

AR.js menyediakan beberapa konsep dan ciri penting untuk meningkatkan pembangunan web AR -

• Jenis Penanda − AR.js menyokong pelbagai jenis penanda, termasuk corak, kod bar dan NFT (Penjejakan Ciri Semulajadi). Teg corak menggunakan imej yang dipratentukan sebagai pencetus, teg kod bar menggunakan corak kod bar dan teg NFT menjejaki ciri semula jadi dalam persekitaran.

• Geolokasi− AR.js membolehkan pembangun menyepadukan geolokasi dan mencipta pengalaman AR berasaskan lokasi. Dengan menggabungkan data GPS dengan AR, anda boleh menindih kandungan maya ke lokasi dunia sebenar.

• Model dan Interaksi 3D − AR.js menyokong penyepaduan model 3D, membolehkan anda meletakkan dan berinteraksi dengan objek maya dalam pemandangan AR anda. Anda boleh mengimport dan memaparkan model 3D yang kompleks menggunakan format fail 3D yang popular seperti .glTF dan .obj.

• Pencahayaan dan Bayang− AR.js menyediakan pilihan pencahayaan dan bayang-bayang untuk menjadikan objek maya kelihatan lebih realistik dalam adegan AR. Anda boleh melaraskan keadaan pencahayaan dan menggunakan kesan bayang-bayang untuk meningkatkan kualiti visual.

Terokai ciri AR.js

AR.js menawarkan pelbagai ciri dan fungsi melangkaui contoh asas yang ditunjukkan sebelum ini. Beberapa ciri ketara termasuk -

• Penjejakan Imej − AR.js boleh menjejaki imej dalam masa nyata, membenarkan kandungan maya berlabuh pada imej tertentu. Ciri ini berguna untuk mencipta pengalaman AR interaktif yang berkaitan dengan produk, poster atau iklan tertentu.

• Berbilang Penanda− AR.js menyokong berbilang penanda dan boleh mengesan serta menjejaki berbilang penanda dalam persekitaran pada masa yang sama. Ciri ini membolehkan adegan AR yang lebih kompleks dengan berbilang objek maya.

• Interaksi dan Animasi − AR.js menyediakan alatan untuk menambah interaktiviti dan animasi pada pengalaman AR. Anda boleh membuat butang, gerak isyarat dan animasi untuk melibatkan pengguna dan meningkatkan pengalaman mereka.

• Penyesuaian− AR.js membolehkan pembangun menyesuaikan rupa dan tingkah laku objek maya. Anda boleh menggunakan bahan, tekstur dan animasi yang berbeza untuk mencipta kandungan AR yang unik dan menarik secara visual.

Sediakan persekitaran pembangunan

Untuk bermula dengan AR.js, pastikan anda mempunyai penyemak imbas web moden dan editor kod. Anda boleh memasukkan AR.js terus dalam fail HTML anda dengan menambahkan teg skrip berikut:

<script src="https://cdn.jsdelivr.net/npm/ar.js"></script>

Buat adegan AR

Mari kita buat adegan AR yang ringkas menggunakan AR.js. Dalam contoh ini, kami akan meletakkan kiub 3D maya di atas penanda. Pertama, kita perlu menentukan markup menggunakan imej. Anda boleh menggunakan mana-mana imej yang anda suka, atau memuat turun penanda sampel daripada repositori GitHub AR.js.

Contoh

  
      <script src="https://cdn.jsdelivr.net/npm/ar.js"></script>
   
   
      
         
            
         
         
      
   

Arahan

Dalam kod di atas, kami telah membenamkan elemen yang mewakili pemandangan AR. Di dalam adegan, kami mentakrifkan elemen , tentukan jenis penanda sebagai "corak" dan berikan URL imej penanda. Di dalam penanda, kami meletakkan elemen , yang mewakili kubus 3D merah.

Menguji adegan AR

Simpan kod di atas dalam fail HTML dan bukanya dalam penyemak imbas web yang menyokong AR.js. Anda perlu memberikan kebenaran untuk mengakses kamera web anda. Setelah penanda dikesan, kiub maya akan diletakkan di atasnya. Gerakkan penanda dan kubus akan bergerak bersamanya.

Kesimpulan

Realiti tambahan membuka kemungkinan baharu untuk pembangun web mencipta pengalaman yang mengasyikkan dan interaktif. Dengan JavaScript dan perpustakaan seperti AR.js, kami boleh membangunkan aplikasi AR dengan mudah yang berjalan terus dalam penyemak imbas web tanpa memerlukan pengguna memasang perisian tambahan. Dengan menggabungkan teknologi web dan AR, pembangun boleh mencipta pengalaman yang inovatif dan menarik yang merapatkan jurang antara dunia fizikal dan digital.

Atas ialah kandungan terperinci Pembangunan web realiti diperkukuh (AR) menggunakan JavaScript dan AR.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!