Cara kode penanda augmented reality

Sep 14, 2025
Bagaimana caranya

Augmented Reality telah ada untuk sementara waktu sekarang, tetapi dengan dukungan WebBRTC (komunikasi real-time), adalah mungkin bagi pengguna di perangkat Android dan desktop untuk mengakses kamera ponsel.

Saat ini, iOS tidak dapat mendukung ini karena belum diimplementasikan di browser WebKit yang menggerakkan Safari, tetapi dalam pengembangan dan Anda dapat memeriksa statusnya sini . Jika Anda memiliki perangkat iOS, Anda tidak perlu melewatkannya, karena Anda masih dapat menggunakan webcam di komputer desktop Anda.

catatan: Untuk mendapatkan ini bekerja di browser Chrome seluler, konten harus dilayani oleh lapisan soket yang aman (I.E. Over HTTPS daripada HTTP standar). Desktop saat ini bekerja dengan HTTP biasa.

  • Untuk mengunduh file yang Anda butuhkan untuk tutorial ini, pergi ke FileSilo. , Pilih barang gratis dan konten gratis di sebelah tutorial.

Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana menempatkan penanda realitas augmented di depan kamera telepon. Ini akan diambil oleh browser dan Ar.js. , dan konten akan dipetakan di atas dalam 3D, menempel pada spidol AR.

Ada banyak kegunaan untuk teknik ini. Misalnya, Anda mungkin ingin membuat 3D sederhana Resume Kreatif , dan kemudian AR Marker dapat dicetak pada kartu nama Anda. Karena Anda dapat berjalan di sekitar marker, ini bagus untuk konten yang mungkin ingin Anda lihat dari sudut yang berbeda - pikirkan produsen furnitur Swedia tertentu yang memberi Anda langkah-langkah animasi yang dapat dilihat dari sudut mana pun! Ada begitu banyak kemungkinan yang bisa bermanfaat bagi ini.

01. Tambahkan perpustakaan

Start by linking up your project libraries

Mulailah dengan menautkan perpustakaan proyek Anda

Setelah Anda mengunduh file tutorial Buka folder proyek, buka folder Mulai di editor kode Anda dan kemudian buka index.html file untuk diedit. Pada tahap ini perpustakaan perlu ditautkan - dan ada beberapa untuk proyek ini! Perpustakaan berada dalam tiga bagian: tiga.js, jsartoolkit, dan ekstensi threen.js untuk artoolkit dan marker. 

 & lt; script src = 'js / threen.js' & gt; & lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "vendor / jsartoolkit5 / build / artoolkit.min.js" & gt; & lt; / script & gt;
& lt; script src = "vendor / jsartoolkit5 / js / artoolkit.api.js" & gt; & lt; / script & gt;
& lt; skrip src = "threex-artoolkitsource.js" & gt; & lt; / script & gt;
& lt; script src = "threex-artoolkitcontext.js" & gt; & lt; / script & gt;
& lt; script src = "threex-armarkerprols.js" & gt; & lt; / script & gt;
& lt; script & gt; threex.artoolkitcontext.baseurl = '/' & lt; / script & gt;

02. Jaga Styling CSS

Dalam kepala Bagian halaman, tambahkan beberapa naskah Tag dan jatuhkan aturan gaya untuk tubuh dan kanvas elemen. Ini memastikan mereka ditempatkan dengan benar pada halaman tanpa margin default yang ditambahkan oleh browser. 

 Tubuh {
  Margin: 0px;
  Overflow: Tersembunyi;
}
kanvas {
  Posisi: absolut;
  TOP: 0;
  Kiri: 0;
}

03. Tambahkan variabel global

Dalam tubuh Bagian halaman, tambahkan beberapa naskah Tag di mana kode JavaScript yang tersisa untuk tutorial ini akan pergi. Ada sejumlah variabel yang diperlukan: baris pertama adalah untuk three.js, yang kedua untuk ar.js, yang ketiga untuk model dan kemudian variabel untuk memuat model. 

 var renderer, adegan, kamera;
var artoolkitcontext, onrenderfcts, artoolkitsource, markerroot, artoolkitmarker, lasttimemsec;
model var, tabung1, tabung2, pertengahan, detail, pulsa;
var loader = new threen.colladaloader ();

04. Muat model

Sebelum adegan mengatur model akan dimuat sehingga dapat ditampilkan ketika spidol terdeteksi. Ini ditingkatkan oleh 10 agar sesuai dengan penanda AR. Modelnya 10cm untuk lebar dan tinggi, sehingga penanda adalah 1cm yang menerjemahkan ke 1 kenaikan dalam tiga.js. 

loader.load ('model / adegan.dae', fungsi (collada) {
  Model = collada.scene;
  model.scale.x = model.scale.y = model.scale.z = 0.1;
  detail = model.getobjectbyname ("detail", true);

05. Perbaiki beberapa masalah tampilan

Masih di dalam kode pemuatan Collada, setelah model dimuat akan ada beberapa tabung yang berputar sehingga mereka ditemukan di adegan Collada. Tabung pertama ditemukan dan bahannya diambil. Di sini bahannya diatur untuk hanya merender di dalam model, bukan bagian luar. 

 Tube1 = model.getObjectByName ("Tube1", Benar);
var a = Tube1.Children 
 .Bahan;
A.TRANSPARENT = BENAR;
A.Side = Tiga ["Backside"];
A.Bling = Tiga ["AdditiveBling"];
A.Opacity = 0,9;

06. Ulangi perbaikannya

If the transparency and additive blending is not enabled, the model looks like this when loaded and displayed on top of the AR marker – not very exciting and barely visible!

Jika transparansi dan campuran aditif tidak diaktifkan, model terlihat seperti ini ketika dimuat dan ditampilkan di atas spidol AR - tidak terlalu menarik dan nyaris tidak terlihat!

Seperti pada langkah terakhir, prinsip yang sama ini diulang untuk tabung kedua dan mode pencampuran, mirip dengan yang ditemukan pada After Effects dan Photoshop, diatur sebagai campuran aditif. Ini memungkinkan bagian luar piksel untuk memiliki transisi yang lebih lunak ke gambar kamera. 

 Tube2 = model.getObjectByName ("Tube2", Benar);
c = tube2.children 
 .Bahan;
c.transparent = true;
c.side = tiga ["bagian belakang"];
c.bling = tiga ["additivebling"];
c.opacity = 0,9;

07. Fix Feed.

Model terakhir adalah lingkaran pemintalan tepat di tengah-tengah desain. Ini mengikuti aturan yang sama seperti sebelumnya tetapi tidak membuat bagian belakang objek, hanya bagian depan. Opacity dari masing-masing bahan ini telah diatur ke 90% hanya untuk membuatnya sedikit lebih lembut. Setelah model dimuat, fungsi init disebut. 

 mid = model.getobjectbyname ("pertengahan", benar);
  b = Mid. Anak 
 .Bahan;
  B.Transparent = Benar;
  B.Bling = tiga ["additivebling"];
 B.Opacy = 0,9;
  init ();
});

08. Inisialisasi adegan

Fungsi init diatur dan di dalam sini pengaturan renderer dibuat. Renderer menggunakan WebGL untuk memberikan kecepatan render tercepat ke konten, dan nilai alfa latar belakang diatur ke transparan sehingga gambar kamera dapat dilihat di belakang ini. 

 Fungsi init () {
  Renderer = New Three.webglrenderer ({
  Alpha: True.
  });
  renderer.scclearcolor (New Three.Color ('lightgrey'), 0);
  renderer.setsize (window.innerwidth, window.innerheight);
  dokumen.body.appendchild (renderer.domelement);

09. Buat tampilan adegan

Renderer dibuat dengan ukuran yang sama dengan jendela browser dan ditambahkan ke model objek dokumen halaman. Sekarang array kosong dibuat yang akan menyimpan objek yang harus diberikan. Adegan baru dibuat sehingga konten dapat ditampilkan di dalam ini. 

 OnrenderFCTS = [];
adegan = baru tiga.Scene ();

10. menyala

Untuk dapat melihat konten dalam adegan, sama seperti di dunia nyata, diperlukan lampu. Salah satunya adalah cahaya abu-abu ambient sementara cahaya directional adalah warna biru yang diredam hanya untuk memberikan sedikit warna pada konten 3D pada layar.

Experiment with the lighting colours to give some different tints

Bereksperimen dengan warna pencahayaan untuk memberikan beberapa warna yang berbeda 
 var ambient = new threen.ambarlight (0x666666);
adegan.add (ambient);
var directionallight = new threen.directionAlight (0x4e5BA0);
directionallight.position.set (-1, 1, 1) .Normalkan ();
adegan.add (directionallight);

Berikutnya: Selesaikan penanda AR Anda

  • 1
  • 2.

Halaman saat ini: Halaman 1

Bagaimana caranya - Artikel Terpopuler

Bagaimana cara menambahkan font di Photoshop

Bagaimana caranya Sep 14, 2025

(Kredit Gambar: Adobe) Font di Photoshop: Tautan Cepat - Tambahkan font di Photosh..

Buat tata letak responsif dengan grid CSS

Bagaimana caranya Sep 14, 2025

Layout Grid CSS. tumbuh di dukungan browser setiap hari dan kami dapat mengirimkan jaringan CSS ke produksi. Adopsi c..

Buat karakter Anda muncul dengan warna dan cahaya

Bagaimana caranya Sep 14, 2025

Saya sangat suka bekerja dalam warna, apakah itu masuk Photoshop CC. atau melukis secara tradisional dengan cat ai..

4 Langkah Mudah untuk Meningkatkan Render Anda

Bagaimana caranya Sep 14, 2025

Menggunakan Dome Lights telah menjadi salah satu kemajuan terbesar dalam penciptaan CGI selama beberapa dekade terakhir. Mandi ad..

Cara membuat dunia berwarna-warni yang menceritakan sebuah kisah

Bagaimana caranya Sep 14, 2025

Adegan yang dibayangkan yang membuat Anda dengan rasa bertanya-tanya membuat Anda ingin mencari tahu lebih banyak dan melihat apa..

Bagaimana cara memahat goblin yang dicetak 3D

Bagaimana caranya Sep 14, 2025

Konsep untuk proyek ini, Goblin Mushroom, berasal dari gambar oleh teman saya Adrian Smith. Saya telah berusaha membuat konsep in..

Buat karakter 3D Furry dari awal

Bagaimana caranya Sep 14, 2025

Menciptakan karakter bulu bisa mudah, tetapi jika Anda ingin membuat buah berbulu yang benar-benar menarik Seni 3d. ..

Cara Mendapatkan Model Zrush Anda ke Maya

Bagaimana caranya Sep 14, 2025

Untuk ini Tutorial Maya. Saya akan menunjukkan kepada Anda bagaimana saya mendapatkan model tautan pemarah ini dar..

Kategori