Aufbau einer einfachen Demo mit A-Frame

Die WebXR und WebGL APIs ermöglichen es uns bereits, virtuelle Realität (VR) und erweiterte Realität (AR) Erlebnisse in Webbrowsern zu erstellen. Um dies zu erleichtern, bietet Mozillas A-Frame Framework eine Auszeichnungssprache, die es Webentwicklern ermöglicht, 3D VR-Landschaften auf eine vertraute Weise zu erstellen und dabei Prinzipien der Spieleentwicklung zu folgen. Dies ist nützlich, um schnell und erfolgreich Prototypen und Demos zu erstellen, ohne viel JavaScript oder GLSL schreiben zu müssen. Dieser Artikel erklärt, wie man mit A-Frame loslegt und es nutzt, um eine einfache Demo zu erstellen.

Hinweis: Dieser Leitfaden wurde zuletzt im November 2024 aktualisiert und ist mit A-Frame Version 1.6.0 kompatibel.

Überblick auf hoher Ebene

A-Frame läuft auf den meisten Umgebungen, wie Desktop, Mobil (iOS und Android) und Geräten wie Oculus Rift, Gear VR und HTC Vive.

A-Frame baut auf WebGL auf und bietet vorgefertigte Komponenten für Anwendungen — Modelle, Videoplayer, Skyboxen, Geometrien, Steuerungen, Animationen, Cursor etc. Es basiert auf dem Entity-Component-System, das in der Spieleentwicklung bekannt ist, richtet sich jedoch an Webentwickler mit einer vertrauten Markup-Struktur, die mit JavaScript manipuliert werden kann. Das Endergebnis sind 3D-Web-Erlebnisse, die von vornherein VR-fähig sind.

Entwicklungsumgebung einrichten

Um mit der Entwicklung mit A-Frame zu beginnen, sollten Sie sicherstellen, dass Sie einen modernen Browser mit guter WebGL Unterstützung verwenden. Eine Möglichkeit ist, ein VR-Gerät wie Oculus Rift oder Google Cardboard für die Experimente einzurichten.

Wenn Sie lokal in einer IDE entwickeln, erstellen Sie ein Verzeichnis, um Ihre Experimente zu speichern, und speichern Sie eine Kopie der neuesten A-Frame Engine in diesem Verzeichnis. Alternativ können Sie A-Frame von einem CDN laden:

html

<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>

Welche Methode Sie auch wählen, stellen Sie sicher, dass Sie die A-Frame Dokumentation geöffnet haben, während Sie arbeiten, um sie als Referenz zu nutzen.

HTML-Starter für A-Frame

Wenn Sie Ihr Projekt lokal in einer IDE bauen, hier die HTML-Struktur, um loszulegen:

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>MDN Games: A-Frame demo</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
  </head>
  <body>
    <!-- HTML goes here -->
  </body>
</html>

Dies enthält einige grundlegende Informationen wie das Dokument charset und <title>. Das <script>-Element bindet das A-Frame-Framework in die Seite ein; wir werden unseren Beispielcode im <body>-Element schreiben.

Eine Szene in A-Frame initialisieren

Eine Szene ist der Ort, an dem alles geschieht. Wenn wir neue Objekte in die Demo einfügen, fügen wir sie alle der Szene hinzu, um sie auf dem Bildschirm sichtbar zu machen. In A-Frame wird die Szene durch eine Scene Entity dargestellt. Eine Entity ist jedes Element — es kann ein Objekt wie eine Box, ein Zylinder oder ein Kegel sein, aber es kann auch eine Kamera, Licht- oder Schallquelle sein.

Lassen Sie uns die Szene erstellen, indem wir ein <a-scene>-Element innerhalb des <body>-Elements hinzufügen:

html

<a-scene></a-scene>

Einen Würfel hinzufügen

Das Hinzufügen des Würfels zur Szene erfolgt durch einfaches Hinzufügen eines <a-box> Elements innerhalb des <a-scene>-Elements. Fügen Sie es jetzt hinzu:

html

<a-box position="0.5 0.5 -3" rotation="0 10 0" color="#4CC3D9"></a-box>

Es enthält bereits einige definierte Parameter: color, position und rotation — diese sind ziemlich offensichtlich und definieren die Basisfarbe des Würfels, die Position innerhalb der 3D-Szene und die Rotation des Würfels. Die Distanzwerte (z. B. für die y-Position des Würfels) sind einheitslos und können im Grunde alles sein, was Sie für Ihre Szene als geeignet erachten — Millimeter, Meter, Fuß oder Meilen — das liegt bei Ihnen.

Einen Hintergrund hinzufügen: Skybox

Eine Skybox ist ein Hintergrund für die 3D-Welt, dargestellt durch ein <a-sky> Element. In unserem Fall verwenden wir eine einfache Farbe, aber es könnte auch ein Bild sein, etc. Herumzuschauen würde den Eindruck geben, sich im freien Himmel, in einer Holzhütte — wo immer Sie möchten — zu befinden! Fügen Sie den folgenden HTML-Code vor dem <a-cube> Element hinzu:

html

<a-sky color="#DDDDDD"></a-sky>

A-Frame-Formbeispiel

An diesem Punkt, wenn Sie den Code speichern und Ihren Browser aktualisieren, können Sie den Würfel bereits auf dem Bildschirm mit unserem benutzerdefinierten Hintergrund sehen:

html

<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<a-scene>
  <a-sky color="#DDDDDD"></a-sky>
  <a-box position="0.5 0.5 -3" rotation="0 10 0" color="#4CC3D9"></a-box>
</a-scene>

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
}

A-Frame kümmert sich um alles, was Sie benötigen:

Eine Standardlichtquelle und Kamera sind enthalten, sodass der Würfel sichtbar ist.
Die Steuerungen funktionieren bereits: Sie können die Maus zum Umschauen und die Tastatur zur Bewegung verwenden. Probieren Sie die W-, A-, S- und D-Tasten aus).
Es gibt einen „Enter VR mode“-Button in der unteren rechten Ecke des Bildschirms, um in den Vollbildmodus mit stereoskopischer Bildansicht zu wechseln, wenn Sie die notwendige VR-Hardware eingerichtet und bereit haben.

Eine Kamera spezifizieren

Eine Kameraentität kann erstellt werden, indem ein <a-camera> Element zur Szene hinzugefügt wird. Wir können die Position der Kamera explizit festlegen und ein wenig vom Zentrum der Szene nach hinten verschieben, damit wir die Formen sehen können. Fügen Sie dies kurz vor dem schließenden </a-scene>-Tag hinzu:

html

<a-camera
  position="0 1 4"
  cursor-visible="true"
  cursor-scale="2"
  cursor-color="#0095DD"
  cursor-opacity="0.5">
</a-camera>

Wir haben auch einen Cursor für die gegebene Kamera definiert, unter Verwendung der cursor-* Attribute (standardmäßig ist er unsichtbar) — wir haben seine Skalierung so eingestellt, dass er leichter sichtbar ist, seine Farbe und eine gewisse Opazität, damit er die Objekte dahinter nicht vollständig bedeckt.

Lichter hinzufügen

Die grundlegenden Lichttypen in A-Frame sind gerichtet und ambient. Der erste Typ ist ein gerichtetes Licht, das irgendwo in der Szene platziert ist, während das zweite das Licht des ersten Typs reflektiert, sodass es natürlicher aussieht; dies kann global festgelegt werden. Fügen Sie den neuen Code unter Ihren vorherigen Ergänzungen hinzu — dies verwendet das Standard <a-light> Element:

html

<a-light type="directional" color="white" intensity="0.5" position="-1 1 2">
</a-light>
<a-light type="ambient" color="white"></a-light>

Das gerichtete Licht hat eine weiße Farbe, seine Intensität ist auf 0.5 gesetzt und es befindet sich an der Position -1 1 2. Das Umgebungslicht benötigt nur eine Farbe, die ebenfalls weiß ist.

Einige fortgeschrittene Geometrie hinzufügen

Wir haben bereits einen Würfel in der Szene; nun lassen Sie uns versuchen, mehr Formen hinzuzufügen. Wir sind nicht auf die Standard-Entities wie <a-cube> beschränkt — unter Verwendung von <a-entity> können wir benutzerdefinierte fortgeschrittene Formen erstellen. Lassen Sie uns versuchen, einen Torus hinzuzufügen — fügen Sie dieses Element unter dem vorherigen Code hinzu:

html

<a-entity
  geometry="
    primitive: torus;
    radius: 1;
    radiusTubular: 0.1;
    segmentsTubular: 12;"
  rotation="10 0 0"
  position="-3 1 0">
</a-entity>

Unsere Entität hat eine torus primitive, die ihre Form darstellt. Wir übergeben einige Anfangsvariablen an diese Form: den Radius des Außenrandes des Torus, den Radius des Rohrs und die Anzahl der Segmente entlang des Umfangs der Rohrfläche. Rotation und Position werden auf die gleiche Weise festgelegt, wie wir es zuvor gesehen haben.

Ein Material definieren

Der Torus ist jetzt in der Szene sichtbar, aber seine Farbe sieht nicht sehr gut aus — das liegt daran, dass wir ein Material erstellen müssen, um das Erscheinungsbild der Entität zu definieren. Bearbeiten Sie das <a-entity>, das den Torus definiert, um wie folgt auszusehen:

html

<a-entity
  geometry="
    primitive: torus;
    radius: 1;
    radiusTubular: 0.1;
    segmentsTubular: 12;"
  material="
    color: #EAEFF2;
    roughness: 0.1;
    metalness: 0.5;"
  rotation="10 0 0"
  position="-3 1 0">
</a-entity>

Im neuen material Attribut stellen wir die color des Materials ein, dann dessen roughness (ein rauheres Material streut reflektiertes Licht in mehr Richtungen als ein glattes Material) und metalness (wie metallisch das Material ist).

Einige JavaScript hinzufügen

Es ist möglich, die Szene auch mit JavaScript zu bevölkern, daher lassen Sie uns es benutzen, um eine dritte Form, einen Zylinder, hinzuzufügen. Fügen Sie ein neues <script> Element am Ende des <body> Elements hinzu, direkt nach dem <a-scene> Element, und fügen Sie dann den folgenden JavaScript-Code darin ein:

const scene = document.querySelector("a-scene");
const cylinder = document.createElement("a-cylinder");
cylinder.setAttribute("color", "#FF9500");
cylinder.setAttribute("height", "2");
cylinder.setAttribute("radius", "0.75");
cylinder.setAttribute("position", "3 1 0");
scene.appendChild(cylinder);

Wir holen uns zunächst eine Referenz zur Scene-Handler, dann erstellen wir das Zylinder-Element als A-Frame-Entity. Danach geht es darum, die richtigen Attribute zu setzen: color, height, radius und position. Die letzte Zeile fügt den neu erstellten Zylinder zur Szene hinzu. Das war's — Sie haben drei verschiedene Formen mit A-Frame erstellt! Es ist beeindruckend, eine solche Szene mit nur wenigen Zeilen HTML und JavaScript erstellen zu können.

Animation

Wir haben bereits rotation und position verwendet, um die Formen in der Szene zu bewegen, und wir können sie auch skalieren. Diese Attribute können manipuliert werden, um die Illusion von Animation zu erzeugen.

Rotation

Es gibt eine spezielle animation Komponente, die uns helfen kann, Elemente zu animieren. Fügen Sie die unten gezeigte animation Komponente als Eigenschaft zum <a-box> Element hinzu:

html

<a-box
  color="#0095DD"
  rotation="20 40 0"
  position="0 1 0"
  animation="property: rotation; from: 20 0 0; to: 20 360 0; dir: alternate; loop: true; dur: 4000; easing: easeInOutQuad;">
</a-box>

Wie bei anderen Entitäten können Sie Schlüsselattribute für die Animation definieren. Wir animieren das rotation Attribut von 20 0 0 bis 20 360 0, sodass es sich komplett dreht. Die Animationsrichtung ist auf alternieren eingestellt, sodass die Animation vorwärts und dann rückwärts abgespielt wird. Die Dauer ist auf 4 Sekunden eingestellt und die Animation wird unendlich wiederholt. Die Animation verwendet easing für die Beschleunigung, wobei tween.js intern implementiert ist.

Skalierung

Wir können auch Animationen zu Entitäten mit benutzerdefinierter Geometrie wie dem Torus hinzufügen, auf ähnliche Weise. Fügen Sie die folgende animation Komponente zu Ihrem Torus hinzu:

html

<a-entity
  geometry="primitive: torus; radius: 1; radiusTubular: 0.1; segmentsTubular: 12;"
  material="color: #EAEFF2; roughness: 0.1; metalness: 0.5;"
  rotation="10 0 0"
  position="-3 1 0"
  animation="property: scale; to: 1 0.5 1; direction: alternate; dur: 2000; loop: true; easing: linear;">
</a-entity>

Das Attribut, das wir für den Torus animieren möchten, ist scale. Der anfängliche, standardmäßige Maßstab ist 1 1 1, und wir werden ihn auf 1 0.5 1 animieren, sodass die y-Achse von 1 auf 0.5 skaliert wird. Das von uns verwendete easing ist linear. Durch Einstellen der Richtung auf alternate wird der Maßstab auf 0.5 und dann zurück auf 1 während 2 Sekunden animiert. Auch hier wird die Animation unendlich oft wiederholt.

Bewegung

Wir könnten die animation verwenden, um die Position der dritten Form zu ändern, oder wir könnten stattdessen JavaScript verwenden. Fügen Sie diesen Code am Ende des <script> Tags hinzu:

let t = 0;
function render() {
  t += 0.01;
  requestAnimationFrame(render);
  cylinder.setAttribute("position", `3 ${Math.sin(t * 2) + 1} 0`);
}
render();

Wir verwenden die render() Funktion, um die Position des Zylinders bei jedem Frame zu aktualisieren. Versuchen Sie, die angegebenen Werte auf der y-Achse zu ändern und sehen Sie, wie sich das auf die Bewegung auswirkt.

A-Frame Beispiel mit Animation

Alles wird korrekt gerendert und animiert — Glückwunsch zum Aufbau Ihrer ersten A-Frame-Szene! So sieht die endgültige Version aus und funktioniert:

html

<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<a-scene>
  <a-sky color="#DDDDDD"></a-sky>

  <a-light
    type="directional"
    color="white"
    intensity="0.5"
    position="-1 1 2"></a-light>
  <a-light type="ambient" color="white"></a-light>

  <a-camera position="0 1 4">
    <a-cursor color="#0095DD" opacity="0.5" scale="2 2 2"> </a-cursor>
  </a-camera>

  <a-box
    color="#0095DD"
    rotation="20 40 0"
    position="0 1 0"
    animation="property: rotation; from: 20 0 0; to: 20 360 0; 
      dir: alternate; loop: true; dur: 4000; easing: easeInOutQuad;">
  </a-box>

  <a-entity
    geometry="primitive: torus; radius: 1; radiusTubular: 0.1; segmentsTubular: 12;"
    material="color: #EAEFF2; roughness: 0.1; metalness: 0.5;"
    rotation="10 0 0"
    position="-3 1 0"
    animation="property: scale; to: 1 0.5 1; direction: alternate; 
      dur: 2000; loop: true; easing: linear;">
  </a-entity>
</a-scene>

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
}

const scene = document.querySelector("a-scene");
const cylinder = document.createElement("a-cylinder");
cylinder.setAttribute("color", "#FF9500");
cylinder.setAttribute("height", "2");
cylinder.setAttribute("radius", "0.75");
cylinder.setAttribute("position", "3 1 0");
scene.appendChild(cylinder);
let t = 0;
function render() {
  t += 0.01;
  requestAnimationFrame(render);
  cylinder.setAttribute("position", `3 ${Math.sin(t * 2) + 1} 0`);
}
render();

Zusammenfassung

A-Frame richtet sich an Webentwickler, indem es Web-Markup mit Vorteilen wie der JavaScript-Manipulation bietet. Es bietet eine leistungsstarke API für fortgeschrittene Konzepte und behandelt auch die Unterschiede zwischen verschiedenen Browsern. Es ist eine großartige Zeit, um mit solchen Frameworks zu experimentieren.

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden