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

1. Başlamadan önce

Bu codelab'de, AR web uygulaması geliştirmeyle ilgili bir örnek verilmektedir. Gerçek dünyada varmış gibi görünen 3D modelleri oluşturmak için JavaScript kullanır.

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

Artırılmış gerçeklik (AR) 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 şekilde yerleştirmek anlamına gelir. Telefon dünyayı gezerken bu efektin gerçekçi olması için, AR özellikli cihazın hareket ettiği dünyayı anlaması ve 3D uzayda konumunu (konumu ve yönünü) belirlemesi gerekir. Bu işlemler arasında yüzeylerin algılanması ve ortam aydınlatmasının tahmin edilmesi de yer alabilir.

İster selfie filtreleri ister AR tabanlı oyunlar için olsun, Google'ın ARCore ve Apple ARKit'in piyasaya sürülmesinden sonra artırılmış gerçeklik (AR) uygulamalarda yaygın olarak kullanıldı.

Neler oluşturacaksınız?

Bu codelab'de, artırılmış gerçekliği kullanarak bir modeli gerçek dünyaya yerleştiren bir web uygulaması geliştireceksiniz. Uygulamanız şunları yapabilecek:

  1. Dünyadaki konumunu ve yönünü belirleyip takip etmek için hedef cihazın sensörlerini kullanın
  2. Canlı kamera görüntüsünün üzerine birleştirilmiş bir 3D model oluşturun
  3. Gerçek dünyada keşfedilen yüzeylerin üzerine darbeler yerleştirmek için vuruş testleri yapın

Neler öğreneceksiniz?

  • WebXR Device API'yi kullanma
  • Temel AR sahnesini yapılandırma
  • AR isabet testlerini kullanarak bir yüzey nasıl bulunur?
  • Gerçek kamera feed'iyle senkronize edilmiş bir 3D model nasıl yüklenir ve oluşturulur?
  • 3D modele dayalı olarak gölge oluşturma

Bu codelab, AR API'lerine odaklanmaktadır. Alakalı olmayan kavramlar ve kod blokları, ilgili kod deposunun koduna yerleştirilmiş olarak sizin için sunulur.

Gerekenler

Bu codelab'in ilk adımını denemek için AR cihazınızda Dene'yi tıklayın. "Tarayıcınızda AR özellikleri yok" mesajının bulunduğu bir sayfa alırsanız Android cihazınızda AR için Google Play Hizmetleri'nin yüklü olduğundan emin olun.

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

Kodu indirme

  1. Bu codelab'in tüm kodlarını iş istasyonunuzda indirmek için aşağıdaki bağlantıyı tıklayın:

  1. İndirilen zip dosyasının paketini açın. Bu işlem, bu codelab'in çeşitli adımlarının dizinlerini ve ihtiyacınız olan tüm kaynakları 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 bitiş durumunun yanı sıra final sonucunu içerir. Bu platformlar referans için vardır.

Tüm kodlama işlemlerinizi work dizininde yaparsınız.

Web sunucusunu yükle

  1. Kendi web sunucunuzu kullanmakta serbestsiniz. Henüz ayarlamadıysanız bu bölümde, Chrome için Web Sunucusu'nun nasıl kurulacağı açıklanmaktadır.
    Bu uygulama henüz iş istasyonunuzda yüklü değilse Chrome Web Mağazası'ndan yükleyebilirsiniz.

  1. Chrome için Web Sunucusu uygulamasını yükledikten sonra chrome://apps bölümüne gidin ve Web Sunucusu simgesini tıklayın:

Web Sunucusu Simgesi

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

Chrome Web Sunucusu'nu yapılandırma

  1. Klasör seç'i tıklayın ve ar-with-webxr-master klasörünü seçin. Bu, devam eden çalışmanızı web sunucusu iletişim kutusunda (Web Sunucusu URL'leri bölümünde) vurgulanan URL üzerinden sunmanızı sağlar.
  2. Seçenekler (yeniden başlatma gerekir) altında, index.html'yi otomatik olarak göster onay kutusunu seçin.
  3. Web sunucusu seçeneğini Durdur, ardından Başlatıldı olarak değiştirin.Chrome Web Sunucusu'nu yeniden başlatın
  4. En az bir Web Sunucusu URL'sinin göründüğünü doğrulayın: http://127.0.0.1:8887(varsayılan yerel ana makine URL'si).

Bağlantı noktası yönlendirmeyi kur

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

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

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

Kurulumu doğrulama

Bağlantınızı test edin:

  1. Artırılmış gerçeklik (AR) cihazınızı bir USB kablosuyla iş istasyonunuza bağlayın.
  2. Chrome'daki AR cihazınızda adres çubuğuna http://localhost:8887 yazın. AR cihazınız bu isteği geliştirme iş istasyonunuzun web sunucusuna yönlendirmelidir. Bir dosya dizini görürsünüz.
  3. 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üğmesi içeren bir sayfa göreceksiniz.

Ancak Desteklenmeyen tarayıcı hata sayfası görüyorsanız cihazınız muhtemelen uyumlu değildir.

ARCore desteklenir

ARCore desteklenmiyor

Web sunucunuzla olan bağlantının artık AR cihazınızla çalışması gerekir.

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

ARCore istemini yükle

Bir AR uygulamasını ilk kez çalıştırdığınızda bir kamera izinleri istemi görürsünüz.

Chrome kamera izinleri istiyor → İzinler iletişim kutusu

Her şey hazır olduğunda, kamera feed'inin üzerine yerleştirilmiş küplerden oluşan bir sahne göreceksiniz. Kamera, dünyanın daha büyük bir kısmını ayrıştırdıkça sahneyi daha iyi anlamaya yardımcı olur. Dolayısıyla, etrafta dolaşmak nesnelerin sabitlenmesine yardımcı olabilir.

3. WebXR'yi yapılandır

Bu adımda, bir WebXR oturumunun ve temel bir AR sahnesinin nasıl ayarlanacağını öğreneceksiniz. HTML sayfası, temel AR işlevini etkinleştirmek için CSS stili ve JavaScript ile sağlanır. Bu, kurulum sürecini hızlandırarak codelab'in AR özelliklerine odaklanmasını sağlar.

HTML sayfası

Mevcut web teknolojilerini kullanarak bir AR deneyimini geleneksel bir web sayfasına dönüştürüyorsunuz. Bu deneyimde, tam ekran oluşturma tuvali kullanırsınız. Böylece HTML dosyasının çok fazla karmaşıklığı gerekmez.

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

work dizininizde bulunan index.html dosyası aşağıdaki gibi görünür. Bu, gerçek içeriğin 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. Bu dosya, artırılmış gerçeklik (AR) deneyimi oluşturmaya yönelik bazı temel bilgiler sağlar.

İş dizininizde uygulama kodu da (app.js) zaten mevcut.

WebXR ve AR desteğini kontrol edin

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

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

Bu kod app.js dilinde zaten mevcut olduğundan herhangi bir değişiklik yapılması gerekmiyor.

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

XRSession isteyin

Artırılmış Gerçeklik Girin'i tıkladığınızda kod activateXR() yöntemini çağırır. Bu, artırılmış gerçeklik deneyimini başlatır.

  1. app.js içinde activateXR() işlevini bulun. Bazı kodlar dışarıda bırakıldı:
activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = /* TODO */;

  // Omitted for brevity
}

WebXR'ye giriş noktası XRSystem.requestSession() üzerindendir. Oluşturulan içeriğin gerçek dünya ortamında görüntülenmesini sağlamak için immersive-ar modunu kullanın.

  1. "immersive-ar" modunu kullanarak this.xrSession uygulamasını başlatın:
activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = await navigator.xr.requestSession("immersive-ar");

  // ...
}

XRReferenceSpace başlat

XRReferenceSpace, sanal dünyada nesneler için kullanılan koordinat sistemini açıklar. 'local' modu, izleyiciye yakın bir başlangıç noktası olan ve kararlı takibi olan bir referans alanı olan artırılmış gerçeklik (AR) deneyimi için en uygun seçenektir.

onSessionStarted() uygulamasında this.localReferenceSpace öğesini aşağıdaki kodla başlatın:

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

Animasyon döngüsü tanımlama

  1. window.requestAnimationFrame gibi bir oluşturma döngüsü başlatmak için XRSession requestAnimationFrame kullanın.

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

  1. onXRFrame uygulamasını tamamlayın. Bir kare çizildiğinde, aşağıdakileri ekleyerek bir sonraki isteği sıraya ekleyin:
// Queue up the next draw request.
this.xrSession.requestAnimationFrame(this.onXRFrame);
  1. Grafik ortamını ayarlamak için kod ekleyin. onXRFrame öğesinin 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);
  1. İzleyicinin duruşunu belirlemek için XRFrame.getViewerPose() hareketini kullanın. Bu XRViewerPose, cihazın uzaydaki konumunu ve yönünü açıklar. Ayrıca, geçerli cihazda düzgün bir şekilde gösterilebilmesi için sahnenin oluşturulması gereken her bir bakış açısını açıklayan XRView dizisi de içerir. Stereskopik VR iki görünüm (her göz için bir tane) olsa da, artırılmış gerçeklik (AR) cihazlarında yalnızca bir görünüm vardır.
    pose.views içindeki bilgiler, çoğunlukla sanal kameranın görüntüleme matrisini ve projeksiyon matrisini yapılandırmak için kullanılır. Bu ayar, sahnenin 3D olarak nasıl düzenleneceğini etkiler. Kamera yapılandırıldığında sahne oluşturulabilir.
  2. onXRFrame öğesinin 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 et

Uygulamayı çalıştırın; için work/index.html adresini ziyaret edin. Kamera feed'inizi, cihazınızı hareket ettirdikçe perspektifi değişen küplerin uzayda uçtuğunu görürsünüz. Ne kadar çok hareket ederseniz takip özelliği geliştirilir. Bu nedenle size ve cihazınıza uygun yöntemleri keşfedin.

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

4. Hedefleme retikli ekle

Temel AR sahnesi kurulumunun ardından, bir vuruş testi yaparak gerçek dünyayla etkileşim kurmanın zamanı geldi. Bu bölümde bir isabet testi programlayacak ve bu testi 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öne doğru düz bir çizgi çizmenin ve bu çizginin ilgili nesnelerle kesişip kesişmediğini belirlemenin bir yoludur. Bu örnekte, cihazı gerçek dünyadaki bir konuma hedeflersiniz. Cihazınızın kamerasından ışınlanan bir ışınnın doğrudan önündeki fiziksel dünyaya girdiğini hayal edin.

WebXR Device API, bu ışının gerçek dünyadaki herhangi bir nesneyle kesişip kesişmediğini size bildirir. AR özellikleri ve dünyayı algılama özellikleri buna göre belirlenir.

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

Ek özelliklere sahip bir XRSession isteyin

İsabet testleri yapmak için XRSession istenirken ek özellikler gerekir.

  1. app.js uygulamasında navigator.xr.requestSession yerini bulun.
  2. "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"]
});
  1. 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 ekleyin

ARCore, ortamla ilgili yeterli bilgi bir araya getirildiğinde en iyi performansı gösterir. Bu, eşzamanlı yerelleştirme ve eşleme (SLAM) adı verilen bir süreçle gerçekleştirilir. Bu işlemde, konum ve çevre özelliklerindeki bir değişikliği hesaplamak için görsel olarak farklı özellik noktaları kullanılır.

Kamera akışının üstünde bir hareket istemi görüntülemek için önceki adımda belirlediğiniz "dom-overlay" öğesini kullanın.

index.html için stabilization kimlikli bir <div> ekleyin. Bu <div>, sabitleme durumunu temsil eden bir animasyon gösterir ve SLAM sürecini iyileştirmek için kullanıcıları cihazlarıyla birlikte hareket etmeye yönlendirir. Bu mesaj, kullanıcı AR'deyken gösterilir ve retikül <body> sınıfları tarafından kontrol edilen bir yüzey bulduğunda gizlenir.

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

</body>
</html>

Retikül ekle

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

  1. app.js öğesinde, setupThreeJs() içindeki DemoUtils.createCubeScene() çağrısını boş bir Three.Scene() ile değiştirin.
setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
}
  1. Yeni sahneyi, çarpışma noktasını temsil eden bir nesneyle doldurun. Sağlanan Reticle sınıfı, shared/utils.js için retikül modelini yüklemeyi yönetir.
  2. Reticle özelliğini setupThreeJs() uygulamasında sahneye ekleyin:
setupThreeJs() {
  // ...

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

İsabet testi yapmak için yeni bir XRReferenceSpace kullanmanız gerekir. Bu referans alanı, görüntüleme yönüyle hizalı bir ışın oluşturmak için izleyicinin bakış açısından yeni bir koordinat sistemini gösterir. Bu koordinat sistemi, isabet testlerini hesaplayabilen XRSession.requestHitTestSource() ürününde kullanılır.

  1. Aşağıdakileri app.js konumundaki onSessionStarted() öğesine 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 });

  // ...
}
  1. Bu hitTestSource öğesini kullanarak her karede bir isabet testi yapın:
    • İsabet testi için sonuç alınamıyorsa ARCore, ortamı anlamak için yeterli zamana sahip olmamıştır. Bu durumda, sabitlemeyi <div> kullanarak kullanıcıdan cihazı hareket ettirmesini isteyin.
    • Sonuç varsa retikülü ilgili konuma taşıyın.
  2. Retikülü taşımak için onXRFrame dosyasını 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 dokunma davranışını ekleyin

XRSession, birincil işlemi temsil eden select etkinliği üzerinden kullanıcı etkileşimine dayalı olarak etkinlik yayınlayabilir. Mobil cihazlardaki WebXR'de birincil işlem, ekrana dokunmadır.

  1. onSessionStarted öğesinin altına bir select etkinlik işleyici ekleyin:
this.xrSession.addEventListener("select", this.onSelect);

Bu örnekte, ekrana dokunulduğunda retikele ayçiçeği yerleştirilmiş.

  1. 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ızı kullanarak hedefleyebileceğiniz bir retikül oluşturdunuz. Ekrana dokunduğunuzda, retikülün belirttiği yere ayçiçeği yerleştirebileceksiniz.

  1. Uygulamanızı çalıştırırken zeminin yüzeyini izleyen bir retikül görebilirsiniz. Yoksa telefonunuzla yavaşça etrafa bakmayı deneyin.
  2. Retikülü gördükten sonra dokunun. Üzerine 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, sahneyi anlama kalitesini düşürür ve isabet bulunamama 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 ekle

Gerçekçi bir sahne oluşturmak, sahneye gerçekçilik ve sürükleyicilik katan dijital nesnelerde uygun ışıklandırma ve gölgeler gibi öğeleri içerir.

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

  1. three.js WebGLRenderer alanında gölgeleri etkinleştirin. Oluşturucuyu oluşturduktan sonra shadowMap öğesinde 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() kullanılarak oluşturulan örnek sahne, yalnızca gölge oluşturan düz ve yatay bir yüzey olan shadowMesh adlı bir nesne içeriyor. Bu yüzeyin başlangıçta Y konumu 10.000 birimdir. Ayçiçeği yerleştirildiğinde, shadowMesh boyutunu gerçek dünyadaki yüzeyle aynı yüksekliğe getirin, böylece çiçeğin gölgesi gerçek dünya zemininin tepesinde oluşturulur.

  1. onSelect ürününde, 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 et

Ayçiçeğinizi yerleştirirken gölge oluşturduğunu görmeniz gerekir. 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.

Daha fazla bilgi