Augmented-Reality-App (AR) mit der WebXR Device API erstellen

1. Hinweis

In diesem Codelab wird ein Beispiel für das Erstellen einer AR-Web-App beschrieben. Dabei wird JavaScript verwendet, um 3D-Modelle zu rendern, die so aussehen, als wären sie in der realen Welt vorhanden.

Sie verwenden die WebXR Device API, die AR- und VR-Funktionen (Virtual Reality) kombiniert. Sie konzentrieren sich auf AR-Erweiterungen der WebXR Device API, um eine einfache AR-App zu erstellen, die im interaktiven Web ausgeführt wird.

Was ist AR?

AR ist ein Begriff, der normalerweise verwendet wird, um die Mischung von computergenerierten Grafiken mit der realen Welt zu beschreiben. Bei AR auf Smartphones bedeutet das, dass Computergrafiken überzeugend über einen Live-Kamerafeed gelegt werden. Damit dieser Effekt realistisch bleibt, während sich das Smartphone in der realen Welt bewegt, muss das AR-fähige Gerät die Umgebung erkennen und seine Position und Ausrichtung im 3D-Raum bestimmen. Dazu kann gehören, Oberflächen zu erkennen und die Beleuchtung der Umgebung zu schätzen.

Seit der Veröffentlichung von ARCore von Google und ARKit von Apple wird AR in Apps häufig verwendet, z. B. für Selfie-Filter oder AR-basierte Spiele.

Aufgaben

In diesem Codelab erstellen Sie eine Web-App, mit der ein Modell mithilfe von Augmented Reality in der realen Welt platziert wird. Mit der Anwendung können Sie Folgendes tun:

Die Sensoren des Zielgeräts verwenden, um seine Position und Ausrichtung zu bestimmen und zu verfolgen
Ein 3D-Modell rendern, das über einer Live-Kameraansicht eingeblendet wird
Hit-Tests ausführen, um Objekte auf erkannten Oberflächen in der realen Welt zu platzieren

Lerninhalte

Verwendung der WebXR Device API
Grundlegende AR-Szene konfigurieren
Mit AR-Treffertests eine Oberfläche finden
Ein 3D-Modell laden und rendern, das mit dem Kamerabild der realen Welt synchronisiert ist
Schatten basierend auf dem 3D-Modell rendern

In diesem Codelab geht es um AR-APIs. Auf irrelevante Konzepte und Codeblöcke wird nicht genauer eingegangen. Sie finden sie im entsprechenden Repository-Code.

Voraussetzungen

Eine Workstation zum Programmieren und Hosten statischer Webinhalte
Ein ARCore-kompatibles Android-Gerät mit Android 8.0 Oreo
Google Chrome
Google Play-Dienste für AR sind installiert (Chrome fordert Sie automatisch auf, sie auf kompatiblen Geräten zu installieren).
Ein Webserver Ihrer Wahl
USB-Kabel zum Verbinden Ihres AR-Geräts mit Ihrer Workstation
Der Beispielcode
Texteditor
Grundkenntnisse in HTML, CSS, JavaScript und den Google Chrome-Entwicklertools

Klicken Sie auf Ihrem AR-Gerät auf Ausprobieren, um den ersten Schritt dieses Codelabs auszuprobieren. Wenn Sie eine Seite mit der Meldung „Ihr Browser unterstützt keine AR-Funktionen“ erhalten, prüfen Sie, ob auf Ihrem Android-Gerät die Google Play-Dienste für AR installiert sind.

2. Entwicklungsumgebung einrichten

Code herunterladen

Klicken Sie auf den folgenden Link, um den gesamten Code für dieses Codelab auf Ihre Workstation herunterzuladen:

Entpacken Sie die heruntergeladene ZIP-Datei. Dadurch wird ein Stammordner (ar-with-webxr-master) entpackt, der Verzeichnisse für mehrere Schritte dieses Codelabs sowie alle benötigten Ressourcen enthält.

Die Ordner step-03 und step-04 enthalten den gewünschten Endstatus des dritten und vierten Schritts dieses Codelabs sowie das final-Ergebnis. Sie sind als Referenz verfügbar.

Sie erledigen alle Programmierarbeiten im Verzeichnis work.

Webserver installieren

Sie können Ihren eigenen Webserver verwenden. Wenn Sie noch keinen Webserver eingerichtet haben, erfahren Sie in diesem Abschnitt, wie Sie Web Server for Chrome einrichten.
Wenn Sie die App noch nicht auf Ihrer Workstation installiert haben, können Sie sie im Chrome Web Store installieren.

Nachdem Sie die App „Web Server for Chrome“ installiert haben, rufen Sie chrome://apps auf und klicken Sie auf das Symbol für den Webserver:

Als Nächstes wird dieses Dialogfeld angezeigt, in dem Sie Ihren lokalen Webserver konfigurieren können:

Chrome Web Server konfigurieren

Klicken Sie auf Ordner auswählen und wählen Sie den Ordner ar-with-webxr-master aus. So können Sie Ihre laufende Arbeit über die URL bereitstellen, die im Webserver-Dialogfeld (im Abschnitt Web Server URL(s)) hervorgehoben ist.
Klicken Sie unter Optionen (Neustart erforderlich) das Kästchen index.html automatisch anzeigen an.
Stellen Sie den Schalter Webserver auf Beenden und dann wieder auf Gestartet.
Prüfen Sie, ob mindestens eine Webserver-URL angezeigt wird: http://127.0.0.1:8887 – die Standard-Localhost-URL.

Portweiterleitung einrichten

Konfigurieren Sie Ihr AR‑Gerät so, dass es auf denselben Port auf Ihrer Workstation zugreift, wenn Sie auf dem Gerät „localhost:8887“ aufrufen.

Rufen Sie auf Ihrer Entwickler-Workstation chrome://inspect auf und klicken Sie auf Portweiterleitung...:
Verwenden Sie das Dialogfeld Einstellungen für die Portweiterleitung, um Port 8887 an localhost:8887 weiterzuleiten.
Klicken Sie das Kästchen Portweiterleitung aktivieren an:

Portweiterleitung konfigurieren

Einrichtung überprüfen

Verbindung testen:

Verbinden Sie Ihr AR‑Gerät über ein USB‑Kabel mit Ihrer Workstation.
Geben Sie auf Ihrem AR-Gerät in Chrome http://localhost:8887 in die Adressleiste ein. Ihr AR-Gerät sollte diese Anfrage an den Webserver Ihrer Entwickler-Workstation weiterleiten. Es sollte ein Verzeichnis mit Dateien angezeigt werden.
Klicken Sie auf Ihrem AR-Gerät auf step-03, um die step-03/index.html-Datei in Ihrem Browser zu laden.

Es sollte eine Seite mit der Schaltfläche Augmented Reality starten angezeigt werden.	Wenn Sie jedoch die Fehlerseite Nicht unterstützter Browser sehen, ist Ihr Gerät wahrscheinlich nicht kompatibel.

Die Verbindung zu Ihrem Webserver sollte jetzt mit Ihrem AR-Gerät funktionieren.

Klicken Sie auf Augmented Reality starten. Möglicherweise werden Sie aufgefordert, ARCore zu installieren.

Aufforderung zur Installation von ARCore

Wenn Sie eine AR-App zum ersten Mal ausführen, werden Sie aufgefordert, die Kameraberechtigungen zu erteilen.

Chrome fordert Kameraberechtigungen an → Dialogfeld „Berechtigungen“

Wenn alles bereit ist, sollten Sie eine Szene mit Würfeln sehen, die über einem Kamerafeed eingeblendet werden. Die Szenenerkennung wird verbessert, je mehr von der Umgebung von der Kamera erfasst wird. Wenn Sie sich bewegen, kann das helfen, die Situation zu stabilisieren.

3. WebXR konfigurieren

In diesem Schritt erfahren Sie, wie Sie eine WebXR-Sitzung und eine einfache AR-Szene einrichten. Die HTML-Seite enthält CSS-Formatierungen und JavaScript-Code, um grundlegende AR-Funktionen zu ermöglichen. Dadurch wird die Einrichtung beschleunigt und das Codelab kann sich auf AR-Funktionen konzentrieren.

Die HTML-Seite

Sie erstellen eine AR-Erfahrung auf einer herkömmlichen Webseite mit vorhandenen Webtechnologien. In diesem Fall verwenden Sie einen Vollbild-Rendering-Canvas, sodass die HTML-Datei nicht zu komplex sein muss.

Für AR-Funktionen ist eine Nutzeraktion erforderlich. Daher gibt es einige Material Design-Komponenten zum Anzeigen der Schaltfläche AR starten und der Meldung für nicht unterstützte Browser.

Die index.html-Datei, die sich bereits in Ihrem work-Verzeichnis befindet, sollte in etwa so aussehen. Dies ist nur ein Teil des tatsächlichen Inhalts. Kopieren Sie diesen Code nicht in Ihre Datei.

<!-- 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>

Wichtigen JavaScript-Code öffnen

Der Ausgangspunkt für Ihre App ist in app.js. Diese Datei enthält Boilerplate-Code für die Einrichtung einer AR-Umgebung.

Ihr Arbeitsverzeichnis enthält auch bereits den App-Code (app.js).

Unterstützung für WebXR und AR prüfen

Bevor ein Nutzer AR verwenden kann, müssen Sie prüfen, ob navigator.xr und die erforderlichen XR-Funktionen vorhanden sind. Das navigator.xr-Objekt ist der Einstiegspunkt für die WebXR Device API. Es sollte also vorhanden sein, wenn das Gerät kompatibel ist. Prüfen Sie außerdem, ob der "immersive-ar"-Sitzungsmodus unterstützt wird.

Wenn alles in Ordnung ist, wird durch Klicken auf die Schaltfläche Augmented Reality aufrufen versucht, eine XR‑Sitzung zu erstellen. Andernfalls wird onNoXRDevice() (in shared/utils.js) aufgerufen, wodurch eine Meldung angezeigt wird, die darauf hinweist, dass keine AR-Unterstützung vorhanden ist.

Dieser Code ist bereits in app.js vorhanden, daher ist keine Änderung erforderlich.

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

`XRSession` anfordern

Wenn Sie auf Enter augmented Reality (Augmented Reality aufrufen) klicken, wird der Code activateXR() aufgerufen. Dadurch wird die AR-Funktion gestartet.

Suchen Sie in app.js nach der Funktion activateXR(). Einige Codezeilen wurden ausgelassen:

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

  // Omitted for brevity
}

Der Einstiegspunkt für WebXR ist XRSystem.requestSession(). Im immersive-ar-Modus können gerenderte Inhalte in einer realen Umgebung betrachtet werden.

Initialisieren Sie this.xrSession mit dem Modus "immersive-ar":

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

  // ...
}

`XRReferenceSpace` initialisieren

Ein XRReferenceSpace beschreibt das Koordinatensystem, das für Objekte in der virtuellen Welt verwendet wird. Der 'local'-Modus eignet sich am besten für AR-Anwendungen mit einem Referenzraum, dessen Ursprung sich in der Nähe des Betrachters befindet und der eine stabile Nachverfolgung ermöglicht.

Initialisieren Sie this.localReferenceSpace in onSessionStarted() mit dem folgenden Code:

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

Animationsschleife definieren

Mit XRSession – requestAnimationFrame können Sie eine Rendering-Schleife starten, ähnlich wie mit window.requestAnimationFrame.

Bei jedem Frame wird onXRFrame mit einem Zeitstempel und einem XRFrame aufgerufen.

Schließen Sie die Implementierung von onXRFrame ab. Wenn ein Frame gezeichnet wird, stellen Sie die nächste Anfrage in die Warteschlange, indem Sie Folgendes hinzufügen:

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

Fügen Sie Code zum Einrichten der Grafikumgebung hinzu. Fügen Sie am Ende von onXRFrame Folgendes hinzu:

// 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);

Verwenden Sie XRFrame.getViewerPose(), um die Position des Betrachters zu ermitteln. Diese XRViewerPose beschreibt die Position und Ausrichtung des Geräts im Raum. Es enthält auch ein Array von XRView-Elementen, die jeden Blickwinkel beschreiben, aus dem die Szene gerendert werden soll, damit sie auf dem aktuellen Gerät richtig angezeigt wird. Stereoskopische VR-Geräte haben zwei Ansichten (eine für jedes Auge), AR-Geräte nur eine.
Die Informationen in pose.views werden am häufigsten verwendet, um die Ansichtsmatrix und die Projektionsmatrix der virtuellen Kamera zu konfigurieren. Das wirkt sich darauf aus, wie die Szene in 3D angeordnet wird. Wenn die Kamera konfiguriert ist, kann die Szene gerendert werden.
Fügen Sie am Ende von onXRFrame Folgendes hinzu:

// 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);
}

Testen

Führen Sie die App aus. Rufen Sie auf Ihrem Entwicklungsgerät work/index.html auf. Sie sollten den Kamerafeed mit schwebenden Würfeln sehen, deren Perspektive sich ändert, wenn Sie Ihr Gerät bewegen. Je mehr Sie sich bewegen, desto besser funktioniert das Tracking. Probieren Sie also aus, was für Sie und Ihr Gerät am besten geeignet ist.

Wenn Sie Probleme beim Ausführen der App haben, lesen Sie die Abschnitte Einführung und Entwicklungsumgebung einrichten.

4. Fadenkreuz hinzufügen

Nachdem Sie eine einfache AR-Szene eingerichtet haben, können Sie mit einem Treffertest mit der realen Welt interagieren. In diesem Abschnitt programmieren Sie einen Hit-Test und verwenden ihn, um eine Oberfläche in der realen Welt zu finden.

Hit-Test

Bei einem Treffertest wird im Allgemeinen eine gerade Linie von einem Punkt im Raum in eine bestimmte Richtung gezogen, um festzustellen, ob sie sich mit interessanten Objekten schneidet. In diesem Beispiel richten Sie das Gerät auf einen Ort in der realen Welt. Stellen Sie sich einen Strahl vor, der von der Kamera Ihres Geräts direkt in die physische Welt vor ihr ausgeht.

Mit der WebXR Device API können Sie feststellen, ob dieser Strahl Objekte in der realen Welt durchschnitten hat. Dies wird durch die zugrunde liegenden AR-Funktionen und das Verständnis der Welt bestimmt.

Erklärung zur Trefferprüfung

`XRSession` mit zusätzlichen Funktionen anfordern

Für Hit-Tests sind zusätzliche Funktionen erforderlich, wenn Sie den XRSession anfordern.

Suchen Sie in app.js nach navigator.xr.requestSession.
Fügen Sie die Funktionen "hit-test" und "dom-overlay" als requiredFeatures so hinzu:

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

DOM-Overlay konfigurieren Lege das document.body-Element so über die AR-Kameraansicht:

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

Bewegungs-Prompt hinzufügen

ARCore funktioniert am besten, wenn die Umgebung ausreichend erfasst wurde. Dies wird durch einen Prozess namens „Simultaneous Localization and Mapping“ (SLAM) erreicht, bei dem visuell unterschiedliche Feature-Punkte verwendet werden, um eine Änderung des Standorts und der Umgebungsmerkmale zu berechnen.

Verwenden Sie den "dom-overlay" aus dem vorherigen Schritt, um über dem Kamerastream eine Aufforderung zur Bewegung anzuzeigen.

Füge <div> zu index.html mit der ID stabilization hinzu. In diesem <div> wird Nutzern eine Animation angezeigt, die den Stabilisierungsstatus darstellt. Sie werden aufgefordert, sich mit ihrem Gerät zu bewegen, um den SLAM-Prozess zu optimieren. Diese wird angezeigt, sobald sich der Nutzer in AR befindet, und ausgeblendet, sobald das Fadenkreuz eine Oberfläche findet. Die Steuerung erfolgt über <body>-Klassen.

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

</body>
</html>

Fadenkreuz hinzufügen

Verwenden Sie ein Fadenkreuz, um den Ort anzugeben, auf den das Gerät ausgerichtet ist.

Ersetzen Sie in app.js den DemoUtils.createCubeScene()-Aufruf in setupThreeJs() durch ein leeres Three.Scene().

setupThreeJs() {
  // ...

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

Füllen Sie die neue Szene mit einem Objekt, das den Kollisionspunkt darstellt. Die bereitgestellte Klasse Reticle übernimmt das Laden des Fadenkreuzmodells in shared/utils.js.
Fügen Sie der Szene in setupThreeJs() das Reticle hinzu:

setupThreeJs() {
  // ...

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

Für einen Treffertest verwenden Sie ein neues XRReferenceSpace. Dieser Referenzraum gibt ein neues Koordinatensystem aus der Perspektive des Betrachters an, um einen Strahl zu erstellen, der an der Blickrichtung ausgerichtet ist. Dieses Koordinatensystem wird in XRSession.requestHitTestSource() verwendet, mit dem Hit-Tests berechnet werden können.

Fügen Sie onSessionStarted() in app.js Folgendes hinzu:

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 });

  // ...
}

Führen Sie mit diesem hitTestSource in jedem Frame einen Treffertest durch:
- Wenn es keine Ergebnisse für den Treffertest gibt, hatte ARCore nicht genügend Zeit, um die Umgebung zu erfassen. In diesem Fall fordern Sie den Nutzer auf, das Gerät mit der Stabilisierung <div> zu bewegen.
- Wenn Ergebnisse angezeigt werden, bewegen Sie das Fadenkreuz an diesen Ort.
Ändern Sie onXRFrame, um das Fadenkreuz zu verschieben:

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.
}

Verhalten bei Displayberührung hinzufügen

Ein XRSession kann Ereignisse basierend auf der Nutzerinteraktion über das select-Ereignis ausgeben, das die primäre Aktion darstellt. In WebXR auf Mobilgeräten ist die primäre Aktion ein Tippen auf den Bildschirm.

Fügen Sie unten in onSessionStarted einen select-Event-Listener hinzu:

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

In diesem Beispiel wird durch Tippen auf das Display eine Sonnenblume im Fadenkreuz platziert.

Erstellen Sie eine Implementierung für onSelect in der Klasse App:

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

Anwendung testen

Sie haben ein Fadenkreuz erstellt, mit dem Sie mit Ihrem Gerät zielen können. Wenn Sie auf den Bildschirm tippen, sollte eine Sonnenblume an der Stelle platziert werden, die vom Fadenkreuz angezeigt wird.

Wenn Sie Ihre App ausführen, sollte ein Fadenkreuz zu sehen sein, das die Oberfläche des Bodens nachzeichnet. Wenn nicht, versuchen Sie, sich langsam mit Ihrem Smartphone umzusehen.
Wenn das Fadenkreuz angezeigt wird, tippen Sie darauf. Darauf sollte eine Sonnenblume platziert werden. Möglicherweise müssen Sie sich etwas bewegen, damit die zugrunde liegende AR-Plattform Oberflächen in der realen Welt besser erkennen kann. Bei schlechten Lichtverhältnissen und Oberflächen ohne Merkmale wird die Qualität der Szenenerkennung verringert und die Wahrscheinlichkeit erhöht, dass kein Treffer gefunden wird. Wenn Probleme auftreten, sehen Sie sich den step-04/app.js-Code an, um ein funktionierendes Beispiel für diesen Schritt zu sehen.

5. Schatten hinzufügen

Für eine realistische Szene sind Elemente wie die richtige Beleuchtung und Schatten auf digitalen Objekten erforderlich, die für Realismus und Immersion in der Szene sorgen.

Beleuchtung und Schatten werden von three.js verarbeitet. Sie können angeben, welche Lichtquellen Schatten werfen, welche Materialien diese Schatten empfangen und rendern und welche Meshes Schatten werfen können. Die Szene dieser App enthält eine Lichtquelle, die einen Schatten wirft, und eine flache Oberfläche, auf der nur Schatten gerendert werden.

Aktivieren Sie Schatten für die three.js WebGLRenderer. Legen Sie nach dem Erstellen des Renderers die folgenden Werte für shadowMap fest:

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

Die in DemoUtils.createLitScene() erstellte Beispielszenen enthält ein Objekt namens shadowMesh, eine flache, horizontale Oberfläche, auf der nur Schatten gerendert werden. Diese Fläche hat anfangs eine Y-Position von 10.000 Einheiten. Sobald eine Sonnenblume platziert wurde, verschieben Sie shadowMesh auf die gleiche Höhe wie die reale Oberfläche, sodass der Schatten der Blume auf dem realen Boden gerendert wird.

Fügen Sie in onSelect nach dem Hinzufügen von clone zur Szene Code hinzu, um die Schattenebene neu zu positionieren:

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;
  }
}

Testen

Wenn Sie eine Sonnenblume platzieren, sollte sie einen Schatten werfen. Wenn Probleme auftreten, sehen Sie sich den final/app.js-Code an, um ein funktionierendes Beispiel für diesen Schritt zu sehen.

6. Zusätzliche Ressourcen

Glückwunsch! Sie haben das Codelab zu AR mit WebXR abgeschlossen.

Augmented-Reality-App (AR) mit der WebXR Device API erstellen

1. Hinweis

Was ist AR?

Aufgaben

Lerninhalte

Voraussetzungen

2. Entwicklungsumgebung einrichten

Code herunterladen

Webserver installieren

Portweiterleitung einrichten

Einrichtung überprüfen

3. WebXR konfigurieren

Die HTML-Seite

Wichtigen JavaScript-Code öffnen

Unterstützung für WebXR und AR prüfen

XRSession anfordern

XRReferenceSpace initialisieren

Animationsschleife definieren

Testen

4. Fadenkreuz hinzufügen

Hit-Test

XRSession mit zusätzlichen Funktionen anfordern

Bewegungs-Prompt hinzufügen

Fadenkreuz hinzufügen

Verhalten bei Displayberührung hinzufügen

Anwendung testen

5. Schatten hinzufügen

Testen

6. Zusätzliche Ressourcen

Weitere Informationen

`XRSession` anfordern

`XRReferenceSpace` initialisieren

`XRSession` mit zusätzlichen Funktionen anfordern