WebXR Device API'yi kullanarak artırılmış gerçeklik (AR) uygulaması derleme

1. Başlamadan önce

Bu codelab'de, artırılmış gerçeklik web uygulaması oluşturma örneği açıklanmaktadır. Gerçek dünyada var gibi görünen 3D modelleri oluşturmak için JavaScript kullanılır.

AR ve sanal gerçeklik (VR) işlevlerini birleştiren WebXR Device API'yi kullanıyorsunuz. Etkileşimli web'de çalışan basit bir AR uygulaması oluşturmak için WebXR Device API'nin AR uzantılarına odaklanırsınız.

Artırılmış gerçeklik nedir?

AR, genellikle bilgisayar tarafından oluşturulan grafiklerin gerçek dünyayla karıştırılmasını tanımlamak için kullanılan bir terimdir. Telefon tabanlı AR'de bu, bilgisayar grafiklerini canlı kamera feed'ine ikna edici bir şekilde yerleştirmek anlamına gelir. Bu efektin, telefon dünyada hareket ederken gerçekçi kalması için AR özellikli cihazın hareket ettiği dünyayı anlaması ve 3D uzaydaki pozunu (konum ve yön) belirlemesi gerekir. Yüzeyleri algılama ve ortamın ışığını tahmin etme de bu kapsamda yer alabilir.

Google'ın ARCore ve Apple'ın ARKit'i yayınlanmasından sonra, ister selfie filtreleri ister AR tabanlı oyunlar için olsun, uygulamalarda AR yaygın olarak kullanılmaya başlandı.

Ne oluşturacaksınız?

Bu codelab'de, artırılmış gerçekliği kullanarak gerçek dünyada bir model yerleştiren bir web uygulaması oluşturacaksınız. Uygulamanız şunları yapabilecek:

Hedef cihazın konumunu ve yönünü belirlemek ve takip etmek için cihazın sensörlerini kullanma
Canlı kamera görünümünün üzerine yerleştirilmiş bir 3D modeli oluşturma
Nesneleri gerçek dünyada keşfedilen yüzeylerin üzerine yerleştirmek için isabet testleri gerçekleştirme

Neler öğreneceksiniz?

WebXR Device API nasıl kullanılır?
Temel bir AR sahnesi yapılandırma
AR isabet testi kullanarak yüzey bulma
Gerçek dünya kamera feed'iyle senkronize edilmiş bir 3D modeli yükleme ve oluşturma
3D modele göre gölge oluşturma

Bu codelab, AR API'lerine odaklanmaktadır. Alakalı olmayan kavramlar ve kod blokları işaretlenmiştir ve ilgili depo kodunda kullanımınıza sunulmuştur.

İhtiyacınız olanlar

Kodlama ve statik web içeriği barındırma için iş istasyonu
Android 8.0 Oreo çalıştıran ARCore özellikli Android cihaz
Google Chrome
AR için Google Play Hizmetleri yüklü olmalıdır (Chrome, uyumlu cihazlarda bu hizmeti yüklemenizi otomatik olarak ister).
Seçtiğiniz bir web sunucusu
AR cihazınızı iş istasyonunuza bağlamak için USB kablosu
Örnek kod
Metin düzenleyici
HTML, CSS, JavaScript ve Google Chrome Geliştirici Araçları hakkında temel bilgi

Bu codelab'in ilk adımını denemek için AR cihazınızda Deneyin'i tıklayın. "Tarayıcınızda AR özellikleri yok" mesajının gösterildiği bir sayfa alırsanız Android cihazınızda AR için Google Play Hizmetleri'nin yüklü olup olmadığını kontrol edin.

2. Geliştirme ortamınızı kurma

Kodu indirme

Bu codelab'in tüm kodunu iş istasyonunuza indirmek için aşağıdaki bağlantıyı tıklayın:

İndirilen ZIP dosyasını açın. Bu işlem, ihtiyacınız olan tüm kaynaklarla birlikte bu codelab'in çeşitli adımlarının dizinlerini içeren bir kök klasörü (ar-with-webxr-master) açar.

step-03 ve step-04 klasörleri, bu codelab'in üçüncü ve dördüncü adımlarının istenen son durumunu ve final sonucunu içerir. Bunlar referans amaçlıdır.

Tüm kodlama çalışmalarınızı work dizininde yapıyorsunuz.

Web sunucusu yükleme

Kendi web sunucunuzu kullanabilirsiniz. Henüz bir tane ayarlamadıysanız bu bölümde, Chrome için Web Sunucusu'nu nasıl ayarlayacağınız ayrıntılı olarak açıklanmaktadır.
İş istasyonunuza henüz yüklemediyseniz uygulamayı Chrome Web Mağazası'ndan yükleyebilirsiniz.

Chrome için Web Sunucusu uygulamasını yükledikten sonra chrome://apps simgesine gidin ve Web Sunucusu simgesini tıklayın:

Ardından, yerel web sunucunuzu yapılandırmanıza olanak tanıyan bu iletişim kutusunu görürsünüz:

Chrome Web Sunucusu'nu yapılandırma

Klasör seç'i tıklayın ve ar-with-webxr-master klasörünü seçin. Bu sayede, web sunucusu iletişim kutusunda (Web Sunucusu URL'leri bölümünde) vurgulanan URL üzerinden devam eden çalışmalarınızı yayınlayabilirsiniz.
Options (needs restart) (Seçenekler (yeniden başlatılması gerekir)) bölümünde Automatically show index.html (index.html dosyasını otomatik olarak göster) onay kutusunu seçin.
Web sunucusu'nu Durdur'a, ardından tekrar Başlatıldı'ya getirin.
En az bir web sunucusu URL'sinin göründüğünü doğrulayın: http://127.0.0.1:8887(varsayılan localhost URL'si).

Bağlantı noktası yönlendirmeyi kur

AR cihazınızı, localhost:8887 adresini ziyaret ettiğinizde iş istasyonunuzdaki aynı bağlantı noktasına erişecek şekilde yapılandırın.

Geliştirme iş istasyonunuzda chrome://inspect adresine gidin ve Bağlantı noktası yönlendirme...'yi tıklayın:
8887 bağlantı noktasını localhost:8887'ye yönlendirmek için Bağlantı noktası yönlendirme ayarları iletişim kutusunu kullanın.
Bağlantı noktası yönlendirmeyi etkinleştir onay kutusunu işaretleyin:

Bağlantı noktası yönlendirmeyi yapılandır

Kurulumu doğrulama

Bağlantınızı test edin:

AR cihazınızı bir USB kablosuyla iş istasyonunuza bağlayın.
Chrome'da AR cihazınızın adres çubuğuna http://localhost:8887 adresini girin. AR cihazınız bu isteği geliştirme iş istasyonunuzun web sunucusuna yönlendirmelidir. Dosya dizini gösterilir.
AR cihazınızda, step-03/index.html dosyasını tarayıcınıza yüklemek için step-03 simgesini tıklayın.

Artırılmış gerçekliği başlat düğmesini içeren bir sayfa görmeniz gerekir.	Ancak Desteklenmeyen tarayıcı hata sayfasını görüyorsanız cihazınız muhtemelen uyumlu değildir.

Web sunucunuza bağlantı artık AR cihazınızla çalışıyor olmalıdır.

Artırılmış gerçekliği başlat'ı tıklayın. ARCore'u yüklemeniz istenebilir.

ARCore yükleme istemi

Bir AR uygulamasını ilk kez çalıştırdığınızda kamera izinleri istemi gösterilir.

Chrome, kamera izinleri istiyor → İzinler iletişim kutusu

Her şey hazır olduğunda, kamera feed'inin üzerinde küplerden oluşan bir sahne görürsünüz. Kamera dünyayı daha fazla ayrıştırdıkça sahne anlayışı iyileşir. Bu nedenle, hareket etmek işleri dengelemeye yardımcı olabilir.

3. WebXR'ı yapılandırma

Bu adımda, WebXR oturumu ve temel bir AR sahnesi oluşturmayı öğreneceksiniz. HTML sayfası, temel AR işlevini etkinleştirmek için CSS stili ve JavaScript ile birlikte sağlanır. Bu sayede kurulum süreci hızlanır ve codelab'in AR özelliklerine odaklanması sağlanır.

HTML sayfası

Mevcut web teknolojilerini kullanarak geleneksel bir web sayfasına AR deneyimi ekleyebilirsiniz. Bu deneyimde tam ekran oluşturma tuvali kullandığınız için HTML dosyasının çok karmaşık olması gerekmez.

AR özelliklerinin başlatılması için kullanıcı hareketi gerekir. Bu nedenle, AR'ı başlat düğmesini ve desteklenmeyen tarayıcı mesajını görüntülemek için bazı Materyal Tasarım bileşenleri vardır.

work dizininizde bulunan index.html dosyası aşağıdaki gibi görünmelidir. Bu, gerçek içeriklerin bir alt kümesidir. Bu kodu dosyanıza kopyalamayın.

<!-- Don't copy this code into your file! -->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Building an augmented reality application with the WebXR Device API</title>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

    <!-- three.js -->
    <script src="https://unpkg.com/three@0.123.0/build/three.js"></script>
    <script src="https://unpkg.com/three@0.123.0/examples/js/loaders/GLTFLoader.js"></script>

    <script src="../shared/utils.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
  <!-- Information about AR removed for brevity. -->

  <!-- Starting an immersive WebXR session requires user interaction. Start the WebXR experience with a simple button. -->
  <a onclick="activateXR()" class="mdc-button mdc-button--raised mdc-button--accent">
    Start augmented reality
  </a>

</body>
</html>

Anahtar JavaScript kodunu açın

Uygulamanızın başlangıç noktası app.js'da. Bu dosya, AR deneyimi oluşturmak için bazı standart kodlar sağlar.

İş dizininizde uygulama kodu (app.js) da yer alır.

WebXR ve AR desteğini kontrol etme

Kullanıcıların AR ile çalışabilmesi için navigator.xr ve gerekli XR özelliklerinin olup olmadığını kontrol edin. navigator.xr nesnesi, WebXR Device API'nin giriş noktasıdır. Bu nedenle, cihaz uyumluysa bu nesne mevcut olmalıdır. Ayrıca, "immersive-ar" oturum modunun desteklendiğini kontrol edin.

Her şey yolundaysa Artırılmış gerçekliğe girin düğmesini tıkladığınızda bir XR oturumu oluşturulmaya çalışılır. Aksi takdirde, onNoXRDevice() (shared/utils.js içinde) çağrılır ve AR desteğinin olmadığını belirten bir mesaj gösterilir.

Bu kod zaten app.js içinde mevcut olduğundan herhangi bir değişiklik yapılması gerekmez.

(async function() {
  if (navigator.xr && await navigator.xr.isSessionSupported("immersive-ar")) {
    document.getElementById("enter-ar").addEventListener("click", activateXR)
  } else {
    onNoXRDevice();
  }
})();

`XRSession` isteğinde bulunma

Artırılmış gerçekliğe girin'i tıkladığınızda kod, activateXR() işlevini çağırır. Bu işlem, AR deneyimini başlatır.

app.js içinde activateXR() işlevini bulun. Bazı kodlar hariç tutuldu:

activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = /* TODO */;

  // Omitted for brevity
}

WebXR'a XRSystem.requestSession() üzerinden erişilir. Oluşturulan içeriğin gerçek dünya ortamında görüntülenmesine izin vermek için immersive-ar modunu kullanın.

this.xrSession öğesini "immersive-ar" modunu kullanarak başlatın:

activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = await navigator.xr.requestSession("immersive-ar");

  // ...
}

`XRReferenceSpace` başlatma

XRReferenceSpace, sanal dünyadaki nesneler için kullanılan koordinat sistemini tanımlar. 'local' modu, izleyicinin yakınında bir başlangıç noktası olan ve sabit izleme sağlayan bir referans alanı ile AR deneyimi için en uygun seçenektir.

this.localReferenceSpace öğesini onSessionStarted() içinde aşağıdaki kodla başlatın:

this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

Animasyon döngüsü tanımlama

XRSession'nın requestAnimationFrame özelliğini kullanarak window.requestAnimationFrame'a benzer şekilde oluşturma döngüsü başlatın.

Her karede, onXRFrame zaman damgası ve XRFrame ile çağrılır.

onXRFrame uygulamasını tamamlayın. Bir çerçeve çizildiğinde, aşağıdakileri ekleyerek sonraki isteği sıraya alın:

// Queue up the next draw request.
this.xrSession.requestAnimationFrame(this.onXRFrame);

Grafik ortamını ayarlamak için kod ekleyin. onXRFrame dosyasının en altına ekleyin:

// Bind the graphics framebuffer to the baseLayer's framebuffer.
const framebuffer = this.xrSession.renderState.baseLayer.framebuffer;
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
this.renderer.setFramebuffer(framebuffer);

Görüntüleyicinin duruşunu belirlemek için XRFrame.getViewerPose() simgesini kullanın. Bu XRViewerPose, cihazın uzaydaki konumunu ve yönünü tanımlar. Ayrıca, sahnenin mevcut cihazda düzgün şekilde gösterilmesi için oluşturulması gereken her bakış açısını açıklayan bir XRView dizisi de içerir. Stereoskopik VR'da iki görünüm (her göz için bir görünüm) bulunurken AR cihazlarda yalnızca bir görünüm bulunur.
pose.views içindeki bilgiler en yaygın olarak sanal kameranın görünüm matrisini ve projeksiyon matrisini yapılandırmak için kullanılır. Bu, sahnenin 3D olarak nasıl düzenlendiğini etkiler. Kamera yapılandırıldığında sahne oluşturulabilir.
onXRFrame dosyasının en altına ekleyin:

// Retrieve the pose of the device.
// XRFrame.getViewerPose can return null while the session attempts to establish tracking.
const pose = frame.getViewerPose(this.localReferenceSpace);
if (pose) {
  // In mobile AR, we only have one view.
  const view = pose.views[0];

  const viewport = this.xrSession.renderState.baseLayer.getViewport(view);
  this.renderer.setSize(viewport.width, viewport.height);

  // Use the view's transform matrix and projection matrix to configure the THREE.camera.
  this.camera.matrix.fromArray(view.transform.matrix);
  this.camera.projectionMatrix.fromArray(view.projectionMatrix);
  this.camera.updateMatrixWorld(true);

  // Render the scene with THREE.WebGLRenderer.
  this.renderer.render(this.scene, this.camera);
}

Test etme

Uygulamayı çalıştırın. Geliştirme cihazınızda work/index.html adresini ziyaret edin. Kamera feed'inizde, cihazınızı hareket ettirdikçe perspektifi değişen, uzayda yüzen küpler görmelisiniz. Ne kadar çok hareket ederseniz izleme o kadar iyi olur. Bu nedenle, sizin ve cihazınız için en uygun yöntemi keşfedin.

Uygulamayı çalıştırmayla ilgili sorun yaşıyorsanız Giriş ve Geliştirme ortamınızı ayarlama bölümlerini inceleyin.

4. Hedefleme retikülü ekleme

Temel bir AR sahnesi oluşturduktan sonra, isabet testi kullanarak gerçek dünyayla etkileşime geçme zamanı. Bu bölümde, bir isabet testi programlayacak ve bunu gerçek dünyada bir yüzey bulmak için kullanacaksınız.

İsabet testini anlama

İsabet testi, genellikle uzaydaki bir noktadan belirli bir yönde düz bir çizgi çizip bu çizginin ilgilenilen nesnelerle kesişip kesişmediğini belirleme yöntemidir. Bu örnekte, cihazı gerçek dünyadaki bir konuma doğrultuyorsunuz. Cihazınızın kamerasından çıkan ve önündeki fiziksel dünyaya doğru giden bir ışın hayal edin.

WebXR Device API, temel artırılmış gerçeklik özellikleri ve dünyanın anlaşılmasıyla belirlenen bu ışının gerçek dünyadaki herhangi bir nesneyle kesişip kesişmediğini bilmenizi sağlar.

İsabet testi açıklayıcısı

Ek özellikler içeren bir `XRSession` isteğinde bulunma

İsabet testleri yapmak için XRSession isteğinde bulunurken ek özellikler gerekir.

app.js bölümünde navigator.xr.requestSession seçeneğini bulun.
"hit-test" ve "dom-overlay" özelliklerini aşağıdaki gibi requiredFeature olarak ekleyin:

this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"]
});

DOM yer paylaşımını yapılandırın. document.body öğesini AR kamera görünümünün üzerine şu şekilde yerleştirin:

this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"],
  domOverlay: { root: document.body }
});

Hareket istemi ekleme

ARCore, ortam yeterince anlaşıldığında en iyi şekilde çalışır. Bu işlem, konum ve çevre özelliklerindeki değişikliği hesaplamak için görsel olarak farklı özellik noktalarının kullanıldığı eşzamanlı konum belirleme ve haritalama (SLAM) adı verilen bir süreçle gerçekleştirilir.

Kamera görüntü akışının üzerinde hareket istemi görüntülemek için önceki adımdaki "dom-overlay" simgesini kullanın.

Kimlik stabilization ile index.html'ye <div> ekleyin. Bu <div>, kullanıcılara dengeleme durumunu gösteren bir animasyon gösterir ve SLAM sürecini iyileştirmek için cihazlarıyla hareket etmelerini ister. Bu, kullanıcı AR'ye girdikten sonra gösterilir ve nişangah bir yüzey bulduktan sonra <body> sınıfları tarafından kontrol edilerek gizlenir.

  <div id="stabilization"></div>

</body>
</html>

Retikül ekleme

Cihazın görünümünün işaret ettiği konumu belirtmek için bir retikül kullanın.

app.js içinde, setupThreeJs() bölümündeki DemoUtils.createCubeScene() çağrısını boş bir Three.Scene() ile değiştirin.

setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
}

Yeni sahneyi çarpışma noktasını temsil eden bir nesneyle doldurun. Sağlanan Reticle sınıfı, shared/utils.js içinde nişangah modelinin yüklenmesini işler.
Reticle öğesini setupThreeJs() sahnesine ekleyin:

setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
  this.reticle = new Reticle();
  this.scene.add(this.reticle);
}

Bir isabet testi gerçekleştirmek için yeni bir XRReferenceSpace kullanırsınız. Bu referans alanı, izleyicinin bakış açısından görüntüleme yönüyle hizalanmış bir ışın oluşturmak için yeni bir koordinat sistemini gösterir. Bu koordinat sistemi, isabet testlerini hesaplayabilen XRSession.requestHitTestSource() içinde kullanılır.

app.js içindeki onSessionStarted() alanına aşağıdakileri ekleyin:

async onSessionStarted() {
  // ...

  // Setup an XRReferenceSpace using the "local" coordinate system.
  this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

  // Add these lines:
  // Create another XRReferenceSpace that has the viewer as the origin.
  this.viewerSpace = await this.xrSession.requestReferenceSpace("viewer");
  // Perform hit testing using the viewer as origin.
  this.hitTestSource = await this.xrSession.requestHitTestSource({ space: this.viewerSpace });

  // ...
}

Bu hitTestSource kullanarak her karede bir isabet testi yapın:
- İsabet testinde sonuç yoksa ARCore, ortamı anlamak için yeterli zamana sahip olmamıştır. Bu durumda, kullanıcıdan dengeleme <div> özelliğini kullanarak cihazı hareket ettirmesini isteyin.
- Sonuç varsa nişangahı bu konuma taşıyın.
Nişangahı hareket ettirmek için onXRFrame öğesini değiştirin:

onXRFrame = (time, frame) => {
  // ... some code omitted ...
  this.camera.updateMatrixWorld(true);

  // Add the following:
  const hitTestResults = frame.getHitTestResults(this.hitTestSource);

  if (!this.stabilized && hitTestResults.length > 0) {
    this.stabilized = true;
    document.body.classList.add("stabilized");
  }
  if (hitTestResults.length > 0) {
    const hitPose = hitTestResults[0].getPose(this.localReferenceSpace);

    // update the reticle position
    this.reticle.visible = true;
    this.reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z)
    this.reticle.updateMatrixWorld(true);
  }
  // More code omitted.
}

Ekrana dokunulduğunda yapılacak işlemi ekleme

Bir XRSession, birincil işlemi temsil eden select etkinliği aracılığıyla kullanıcı etkileşimine dayalı etkinlikler yayınlayabilir. Mobil cihazlarda WebXR'deki birincil işlem, ekrana dokunmaktır.

select etkinliği işleyiciyi onSessionStarted öğesinin en altına ekleyin:

this.xrSession.addEventListener("select", this.onSelect);

Bu örnekte, ekrana dokunulduğunda artı işaretinin üzerine bir ayçiçeği yerleştiriliyor.

App sınıfında onSelect için bir uygulama oluşturun:

onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);
  }
}

Uygulamayı test etme

İsabet testlerini kullanarak cihazınızla nişan alabileceğiniz bir retikül oluşturdunuz. Ekrana dokunduğunuzda, artı işaretinin gösterdiği konuma ayçiçeği yerleştirebilmeniz gerekir.

Uygulamanızı çalıştırırken zeminin yüzeyini takip eden bir nişangah görmeniz gerekir. Göremiyorsanız telefonunuzla yavaşça etrafa bakmayı deneyin.
Nişangahı gördüğünüzde dokunun. Üzerine bir ayçiçeği yerleştirilmelidir. Alttaki AR platformunun gerçek dünyadaki yüzeyleri daha iyi algılayabilmesi için biraz hareket etmeniz gerekebilir. Düşük ışık ve özellik içermeyen yüzeyler, sahne algılama kalitesini düşürür ve eşleşme bulunmama olasılığını artırır. Herhangi bir sorunla karşılaşırsanız bu adımın çalışan bir örneğini görmek için step-04/app.js koduna göz atın.

5. Gölge ekleme

Gerçekçi bir sahne oluşturmak için dijital nesnelerde uygun aydınlatma ve gölgeler gibi öğeler kullanılır. Bu öğeler, sahneye gerçekçilik ve sürükleyicilik katar.

Işıklandırma ve gölgeler three.js tarafından işlenir. Hangi ışıkların gölge oluşturacağını, hangi malzemelerin bu gölgeleri alıp oluşturacağını ve hangi ağların gölge oluşturabileceğini belirleyebilirsiniz. Bu uygulamanın sahnesinde, gölge oluşturan bir ışık ve yalnızca gölgeleri oluşturmak için kullanılan düz bir yüzey var.

three.js WebGLRenderer üzerinde gölgeleri etkinleştirin. Oluşturucuyu oluşturduktan sonra shadowMap üzerinde aşağıdaki değerleri ayarlayın:

setupThreeJs() {
  ...
  this.renderer = new THREE.WebGLRenderer(...);
  ...
  this.renderer.shadowMap.enabled = true;
  this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  ...
}

DemoUtils.createLitScene() içinde oluşturulan örnek sahnede, yalnızca gölgeleri işleyen düz ve yatay bir yüzey olan shadowMesh adlı bir nesne bulunur. Bu yüzeyin başlangıçta 10.000 birimlik bir Y konumu vardır. Ayçiçeği yerleştirildikten sonra shadowMesh simgesini gerçek dünyadaki yüzeyle aynı yükseklikte olacak şekilde hareket ettirin. Böylece çiçeğin gölgesi gerçek dünyadaki zeminin üzerinde oluşturulur.

onSelect içinde, sahneye clone ekledikten sonra gölge düzlemini yeniden konumlandırmak için kod ekleyin:

onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);

    const shadowMesh = this.scene.children.find(c => c.name === "shadowMesh");
    shadowMesh.position.y = clone.position.y;
  }
}

Test etme

Ayçiçeği yerleştirirken gölgesini görebilirsiniz. Herhangi bir sorunla karşılaşırsanız bu adımın çalışan bir örneğini görmek için final/app.js koduna göz atın.

6. Ek kaynaklar

Tebrikler! WebXR kullanarak AR ile ilgili bu codelab'in sonuna geldiniz.

WebXR Device API'yi kullanarak artırılmış gerçeklik (AR) uygulaması derleme

1. Başlamadan önce

Artırılmış gerçeklik nedir?

Ne oluşturacaksınız?

Neler öğreneceksiniz?

İhtiyacınız olanlar

2. Geliştirme ortamınızı kurma

Kodu indirme

Web sunucusu yükleme

Bağlantı noktası yönlendirmeyi kur

Kurulumu doğrulama

3. WebXR'ı yapılandırma

HTML sayfası

Anahtar JavaScript kodunu açın

WebXR ve AR desteğini kontrol etme

XRSession isteğinde bulunma

XRReferenceSpace başlatma

Animasyon döngüsü tanımlama

Test etme

4. Hedefleme retikülü ekleme

İsabet testini anlama

Ek özellikler içeren bir XRSession isteğinde bulunma

Hareket istemi ekleme

Retikül ekleme

Ekrana dokunulduğunda yapılacak işlemi ekleme

Uygulamayı test etme

5. Gölge ekleme

Test etme

6. Ek kaynaklar

Daha fazla bilgi

`XRSession` isteğinde bulunma

`XRReferenceSpace` başlatma

Ek özellikler içeren bir `XRSession` isteğinde bulunma