AR.js
3.4.6
Anda sekarang dapat memiliki komitmen pertama AR.JS! Opensea
AR.JS adalah perpustakaan ringan untuk augmented reality di web, datang dengan fitur seperti pelacakan gambar, AR berbasis lokasi dan pelacakan penanda.
Pembaruan 30/12/21: Sekarang ada juga Perpustakaan OSS Web AR JS baru, yang disebut Mindar. Jika Anda memerlukan fitur pelacakan gambar yang bagus (juga beberapa pelacakan gambar) dan pelacakan wajah, lihatlah!
Adapun saat ini, Ar.js masih merupakan satu -satunya perpustakaan yang menyediakan fitur AR berbasis penanda dan lokasi.
Proyek ini telah dibuat oleh @jeromeetienne, yang sebelumnya dikelola oleh Nicolò Carpignoli dan sekarang dikelola oleh ar.js org.
Untuk pembaruan yang sering terjadi di ar.js Anda dapat mengikuti akun resmi @The resmi? (Twitter) dan tonton repo ini!
Logo adalah milik Simon Poulter.
Jika Anda ingin memberikan pandangan pertama pada potensi ar.js, Anda dapat melanjutkan dengan readme ini.
⚡️ Ar.js akan datang di berbagai bangunan. Keduanya dipertahankan. Mereka eksklusif.
Harap impor yang Anda butuhkan untuk proyek Anda, bukan keduanya:
Ar.js dengan pelacakan gambar + Lokasi berbasis ar (aframe):
Ar.js dengan pelacakan penanda + Lokasi berbasis ar (aframe):
Ar.js dengan pelacakan gambar + pelacakan marker (tiga):
Jika Anda membutuhkan arjs namespace impor ar.js:
Ar.js dengan AR berbasis lokasi (tiga):
Anda juga dapat mengimpor versi tertentu mengganti kata kunci master dengan tag versi:
< script src =" https://raw.githack.com/AR-js-org/AR.js/3.4.6/aframe/build/aframe-ar-nft.js " > Silakan ikuti langkah -langkah sederhana ini:
< script src =" https://cdn.jsdelivr.net/gh/aframevr/[email protected]/dist/aframe-master.min.js " > </ script >
< script src =" https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js " > </ script >
< style >
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</ style >
< body style =" margin : 0px; overflow: hidden; " >
<!-- minimal loader shown until image descriptors are loaded -->
< div class =" arjs-loader " >
< div > Loading, please wait... </ div >
</ div >
< a-scene
vr-mode-ui =" enabled: false; "
renderer =" logarithmicDepthBuffer: true; precision: medium; "
embedded
arjs =" trackingMethod: best; sourceType: webcam;debugUIEnabled: false; "
>
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
< a-nft
type =" nft "
url =" your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex "
smooth =" true "
smoothCount =" 10 "
smoothTolerance =" .01 "
smoothThreshold =" 5 "
>
< a-entity
gltf-model =" your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf "
scale =" 5 5 5 "
position =" 150 300 -100 "
>
</ a-entity >
</ a-nft >
< a-entity camera > </ a-entity >
</ a-scene >
</ body >Silakan ikuti langkah -langkah sederhana ini:
add-your-latitude dan add-your-longitude Dengan Lintang dan Bujur Anda, Tanpa <> . <!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " />
< meta http-equiv =" X-UA-Compatible " content =" IE=edge " />
< title > GeoAR.js demo </ title >
< script src =" https://aframe.io/releases/1.6.0/aframe.min.js " > </ script >
< script src =" https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js " > </ script >
< script src =" https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js " > </ script >
</ head >
< body >
< a-scene
vr-mode-ui =" enabled: false "
arjs =" sourceType: webcam; videoTexture: true; debugUIEnabled: false; "
>
< a-text
value =" This content will always face you. "
look-at =" [gps-camera] "
scale =" 120 120 120 "
gps-entity-place =" latitude: <add-your-latitude>; longitude: <add-your-longitude>; "
> </ a-text >
< a-camera gps-camera rotation-reader > </ a-camera >
</ a-scene >
</ body >
</ html >Silakan ikuti langkah -langkah sederhana ini:
<!DOCTYPE html >
< html >
< script src =" https://aframe.io/releases/1.6.0/aframe.min.js " > </ script >
<!-- we import arjs version without NFT but with marker + location based support -->
< script src =" https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js " > </ script >
< body style =" margin : 0px; overflow: hidden; " >
< a-scene embedded arjs >
< a-marker preset =" hiro " >
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
< a-entity
position =" 0 0 0 "
scale =" 0.05 0.05 0.05 "
gltf-model =" your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf "
> </ a-entity >
</ a-marker >
< a-entity camera > </ a-entity >
</ a-scene >
</ body >
</ html >Penting! Ketahuilah bahwa jika Anda mengacu pada sumber daya eksternal, dalam aplikasi apa pun, terutama yang menggunakan NFT, Anda akan menghadapi masalah CORS jika sumber daya tersebut tidak berada di server kode yang sama. Jika Anda tidak dapat melihat pelacakan, buka alat peramban Anda dan periksa apakah Anda memiliki kesalahan CORS di konsol. Jika demikian, Anda harus memperbaiki kesalahan tersebut untuk melihat konten Anda. Perbaikan yang benar adalah menempatkan sumber daya Anda di server yang sama dari kode Anda.
Jika Anda tidak dapat melakukan itu, Anda dapat meng-host proxy di mana saja server untuk menyelesaikannya (https://github.com/rob--w/cors-anywhere). Harap dicatat bahwa beberapa layanan hosting memiliki kebijakan yang tidak mengizinkan untuk menggunakan server tersebut. Selalu periksa kebijakan layanan hosting sebelum menggunakannya untuk menghindari suspensi akun
Pelajari lebih lanjut tentang dokumentasi resmi AR.JS.
Anda dapat menginstal AR.JS dengan NPM dan menggunakan dalam proyek apa pun yang kompatibel yang mendukung modul NPM (React.js, Vue.js, Next.js atau Whatelse), untuk menginstalnya:
// Install with npm
npm install @ar-js-org/ar.js
// Install with yarn
yarn add @ar-js-org/ar.js
Untuk beberapa contoh, baca masalah ini.
ar-threex.mjs dan ar.mjs Dengan pembaruan terbaru (3.4.6), three.js sekarang dapat diimpor menggunakan sintaks Modul ES. Untuk menyelaraskan dengan standar ini, ar-threex.mjs , ar.mjs dan ar-threex-location-only.mjs juga harus diimpor dengan cara yang sama menggunakan peta impor. Berikut adalah contoh cara mengimpor modul -modul ini dalam proyek Anda:
// Example importing ar-threex.mjs
< script type =" importmap " >
{
"imports" : {
"three" : "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js" ,
"threex" : "./path/to/ar-threex.mjs" ,
}
}
</ script >
< script type =" module " >
import * as THREE from 'three' ;
import { ArToolkitSource , ArToolkitContext , ArMarkerControls } from 'threex'
// Your AR.js code here
</ script >Baca contoh yang termasuk dalam repositori ini untuk informasi lebih lanjut, tetapi pada dasarnya satu -satunya perubahan adalah sintaks impor.
Anda dapat menemukan banyak bantuan tentang masalah repositori ar.js lama. Silakan cari masalah terbuka/tertutup, Anda mungkin menemukan hal -hal menarik.
Dari membuka laporan bug hingga membuat permintaan tarik: setiap kontribusi dihargai dan diterima. Jika Anda berencana untuk mengimplementasikan fitur baru atau mengubah API, silakan buat masalah terlebih dahulu. Dengan cara ini kami dapat memastikan bahwa pekerjaan berharga Anda tidak sia -sia.
Jika Anda mengalami masalah konfigurasi atau pengaturan, silakan posting pertanyaan ke StackOverflow. Anda juga dapat menjawab pertanyaan kepada kami di ruang obrolan gitter kami
Jika Anda telah menemukan bug atau memiliki saran fitur, jangan ragu untuk membuat masalah di GitHub.
Setelah mendapatkan umpan balik, dorong ke garpu Anda dan kirimkan permintaan tarik. Kami mungkin menyarankan beberapa perubahan atau peningkatan atau alternatif, tetapi untuk perubahan kecil, permintaan tarikan Anda harus diterima dengan cepat.
Beberapa hal yang akan meningkatkan kemungkinan permintaan tarikan Anda diterima:
Semuanya open-source ! Artoolkit5-JS berada di bawah lisensi LGPLV3 dan izin tambahan. Dan semua kode saya di repositori ar.js berada di bawah lisensi MIT. :)
Untuk perincian hukum, pastikan untuk memeriksa lisensi ArtoolKit5-JS dan lisensi Ar.JS.
Changelog Lengkap: ar.js changelog
