Artırılmış bir gerçeklik işaretleyici nasıl kodlanır

Sep 11, 2025

Nasıl Yapılır

Sayfa 1/2:

Sayfa 1

Sayfa 1
Sayfa 2

Artırılmış gerçeklik bir süredir etrafta dolaşmıştır, ancak WEBRTC'nin (gerçek zamanlı iletişim) desteğiyle, kullanıcıların bir telefonun kamerasına erişmek için Android ve masaüstü cihazlarındaki kullanıcıların mümkün olması mümkündür.

Şu anda, iOS, Safari'yi güçlendiren WebKit tarayıcısında uygulanmadığı için iOS bunu destekleyemez, ancak geliştiriliyor ve durumunu kontrol edebilirsiniz. İşte . Bir iOS cihazınız varsa, web kamerasını masaüstü bilgisayarınızdaki kullanabileceğiniz gibi kaçırmanız gerekmez.

Not: Bunu mobil chrome tarayıcısı üzerinde çalıştırmak için, içerik güvenli bir soket katmanı (yani standart HTTP yerine HTTPS üzerinden) tarafından servis edilmelidir. Masaüstü şu anda normal http ile birlikte çalışıyor.

Bu eğitim için ihtiyacınız olan dosyaları indirmek için Fileilo , ücretsiz şeyler seçin ve öğreticinin yanındaki ücretsiz içerik seçin.

Bu eğitimde, bir telefon kamerasının önünde artırılmış bir gerçeklik belirteci nasıl yerleştirileceğini göstereceğim. Bu tarayıcı tarafından alınacak ve Ar.js ve içeriğin, AR Marker'a yapışmasını sağlayarak 3B üzerinden eşleştirilecektir.

Bu teknik için birçok mümkün kullanım var. Örneğin, basit bir 3D oluşturmak isteyebilirsiniz yaratıcı özgeçmiş ve sonra AR işaretçisi kartvizitinize basılabilir. Çünkü işaretçiyi dolaşabilirsin, bu, farklı açılardan görmek isteyebileceğiniz içerik için harikadır - herhangi bir açıdan görüntülenebilecek animasyonlu adımlar sunan belirli bir İsveç mobilyası üreticisini düşünün! Bunun için faydalı olabileceği çok sayıda olasılık var.

01. Kütüphaneleri ekleyin

Start by linking up your project libraries — Proje kütüphanelerinizi bağlayarak başlayın

Bir kere Eğitim dosyalarını indirdi Proje klasörüne gidin, kod düzenleyicinizdeki Başlat klasörünü açın ve ardından açın. index.html Düzenleme için dosya. Bu aşamada kütüphaneler bağlantılı olması gerekir - ve bu proje için oldukça az var! Kütüphaneler üç bölümdüydiler: three.js, jsartoolkit ve artoolkit ve marker için üç.js uzantısı.

 & lt; script src = 'js / three.js' & gt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; / script & gt;
& lt; script src = "satıcı / jsartoolkit5 / inilt / artoolkit.min.js" & gt; / script & gt;
& lt; script src = "satıcısı / jsartoolkit5 / js / artoolkit.api.js" & gt; & lt; / script;
& lt; script src = "threex-artoolkitsource.js" & gt; & lt; / script;
& lt; script src = "threex-artoolkitcontext.js" & gt; & lt; / script;
& lt; script src = "threex-armarkercontrols.js" & gt; & lt; / script;
& lt; script & gt; threex.artoolkitcontext.baseurl = '/'

02. CSS stiline dikkat edin

İçinde baş Sayfanın bölümü, biraz ekleyin senaryo Etiketler ve stil kurallarında düşüş vücut ve tuval eleman. Bu, tarayıcı tarafından eklenen varsayılan kenar boşlukları olmadan sayfaya doğru bir şekilde yerleştirilmesini sağlar.

 vücut {
  Marj: 0px;
  Taşma: Gizli;
}
tuval {
  Konum: Mutlak;
  Üst: 0;
  Sol: 0;
}

03. Küresel değişkenler ekleyin

İçinde vücut Sayfanın bölümü, biraz ekleyin senaryo Bu eğitim için kalan JavaScript kodunun gideceği etiketler. Gerekli bir dizi değişken vardır: İlk satır, üç.js, Ar.J'ler için ikincisi, modelin üçüncüsü ve ardından modeli yüklemek için bir değişkendir.

 Var renderer, sahne, kamera;
var artoolkitcontext, onrenderfcts, artoolkitsource, markerroot, artoolkitmarker, lasttimemec;
var modeli, tube1, tube2, orta, detaylar, nabız;
var yükleyici = yeni üç.colladaloader ();

04. Modeli yükleyin

Sahne ayarlanmadan önce, belirteçler tespit edildiğinde görüntülenebilecek şekilde model yüklenecektir. Bu, tam olarak AR işaretçisine uyması için 10 ile ölçülüdir. Model genişlik ve yükseklik için 10 cm, bu nedenle işaretleyici 1 cm'dir, bu da üç.js'de 1 artışa neden olan 1 cm'dir.

loader.load ('model / sahne.dae', işlevi (collada) {
  Model = collada.scene;
  model.scale.x = model.scale.y = model.scale.z = 0.1;
  Ayrıntılar = model.getObjectbyname ("Ayrıntılar", Doğru);

05. Bazı ekran sorunlarını düzeltin

Hala Collada yükleme kodunun içinde, model yüklendikten sonra, etrafta dolaşan birkaç tüp olacak, böylece Collada sahnesinde bulunurlar. Birinci tüp bulunur ve malzemesi yakalanır. Burada malzeme, dışarıya değil, modelin içini daha yeni hale getirecek şekilde ayarlanmıştır.

 Tube1 = model.getObjectbyname ("Tube1", true);
var a = tube1.children  .Material;
a.Transparent = true;
A.SE = üç ["arka"];
A.Dending = üç ["addiş etme"];
A.Omacity = 0.9;

06. Düzeltmeyi tekrarlayın

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! — Şeffaflık ve katkı maddesi harmanlama etkin değilse, model, AR Marker'ın üstünde yüklendiğinde ve görüntülendiğinde böyle görünüyor - çok heyecan verici ve zar zor görünür!

Son adımda olduğu gibi, bu aynı prensip, ikinci tüp için tekrarlanır ve karıştırma modu, efektler ve Photoshop'tan sonra bulunanlara benzer şekilde bir katkı maddesi karışımı olarak ayarlanmıştır. Bu, piksellerin dışının kamera görüntüsüne daha yumuşak bir geçişe sahip olmasını sağlar.

 Tube2 = model.getObjectbyname ("Tube2", true);
c = tube2.children . Malzeme;
c.Transparent = true;
c.side = üç ["arka"];
C.Blanding = üç ["eklenti"];
C.OpAcity = 0.9;

07. Son düzeltme

Son model, sadece tasarımın ortasında bir dönen bir dairedir. Bu, daha önce olduğu gibi aynı kuralları izler, ancak nesnenin arkasını, sadece cepheyi oluşturmaz. Bu malzemelerin her birinin opaklığı, biraz daha yumuşak hale getirmek için sadece% 90 olarak ayarlanmıştır. Model yüklendikten sonra Init işlevi denir.

 MID = Model.getObjectbyname ("orta", doğru);
  b = mid.Children  .Material;
  b.Transparent = true;
  B.Benlendey = üç ["addiş etme"];
 B.OpAcity = 0.9;
  içinde();
});

08. Sahneyi başlat

Init işlevi kurulur ve burada oluşturulur. Converter, içeriğe en hızlı render hızını vermek için WebGL kullanıyor ve arka plan alfa değeri saydam olarak ayarlandı, böylece kamera görüntüsü bunun arkasında görülebilir.

 İşlev Init () {
  renderer = yeni three.webglrenderer ({
  alfa: true
  });
  renderer.setcleardcolor (yeni üç.color ('lightgrey'), 0);
  renderer.Setsize (window.innerwidth, window.innerheight);
  belge.body.appendchild (renderer.domelement);

09. Sahne ekranını oluşturun

Renderer, tarayıcı penceresi ile aynı boyutta bulunur ve sayfanın belge nesnesi modeline eklenir. Şimdi, oluşturulması gereken nesneleri saklayacak boş bir dizi oluşturulur. Yeni bir sahne oluşturulur, böylece içeriğin bunun içinde görüntülenebilir.

 onRenderfcts = [];
sahne = yeni üç.scene ();

10. Işık

Sahnedeki içeriği görebilmek için, tıpkı gerçek dünyadaki gibi, ışıklar gereklidir. Biri, ortam gri bir ışıktır, yönel ışık, yalnızca olaydaki ekranda 3B içeriğe hafif bir renk tonu vermek için sessiz bir mavi renktir.

Experiment with the lighting colours to give some different tints — Bazı renk tonları vermek için aydınlatma renkleri ile deneyin

 Var ortam = yeni üç.ambientionLight (0x666666);
sahne.add (ortam);
var yönerallight = yeni üç.DirectionAllog (0x4e5ba0);
yönEllGlight.position.set (-1, 1, 1) .Normalize ();
sahne.add (yönElted);

Sonraki: AR markerinizi bitirin

Geçerli sayfa: Sayfa 1

Sonraki Sayfa Sayfa 2

Artırılmış bir gerçeklik işaretleyici nasıl kodlanır

01. Kütüphaneleri ekleyin

02. CSS stiline dikkat edin

03. Küresel değişkenler ekleyin

04. Modeli yükleyin

05. Bazı ekran sorunlarını düzeltin

06. Düzeltmeyi tekrarlayın

07. Son düzeltme

08. Sahneyi başlat

09. Sahne ekranını oluşturun

10. Işık

Nasıl Yapılır - En Popüler Makaleler

Reels Eğitimi: Bir Acemi Kılavuzu

Şekil Çizimi: Bir Başlangıç Kılavuzu

Bir fare kontrollü paralaks arka plan efekti oluşturun

Özel bir gevşek bot oluşturun

Bu ipuçları ile grafitten daha fazlasını elde edin

8 Temel WordPress Güvenlik Sırları

Elle çizilmiş bir görünüm oluşturmak için dijital araçların nasıl kullanılacağı

Tasarım işinizde yaratıcı bir şekilde hazır fotoğraf kullanımı

Kategoriler