Looking for aframe Answers? Try Ask4KnowledgeBase
Looking for aframe Keywords? Try Ask4Keywords

aframeErste Schritte mit aframe


Bemerkungen

In diesem Abschnitt erhalten Sie einen Überblick über das, was ein Name ist und warum ein Entwickler es verwenden möchte.

Es sollte auch alle großen Themen innerhalb von aframe erwähnen und auf die verwandten Themen verweisen. Da die Dokumentation für aframe neu ist, müssen Sie möglicherweise erste Versionen dieser verwandten Themen erstellen.

Versionen

A-Frame 0.x

Ausführung Veröffentlichungsdatum
0,6 2017-05-25
0,5 2017-02-10
0,4 2016-12-17
0,3 2016-08-18

Legacy-Versionen

Ausführung Veröffentlichungsdatum
0,2 2016-03-26
0,1 2015-12-17

Eigenschaften

VR leicht gemacht

Fügen Sie einfach ein script Tag und a-scene . A-Frame kann mit 3D-Boilerplate, VR-Einstellungen und Standardsteuerungen arbeiten. Nichts zu installieren, keine Buildschritte.

Deklaratives HTML

HTML ist leicht zu lesen, zu verstehen und zu kopieren und einzufügen. A-Frame basiert auf HTML und ist für jeden zugänglich: Webentwickler, VR-Enthusiasten, Künstler, Designer, Pädagogen, Macher, Kinder.

Plattformübergreifende VR

Erstellen Sie VR-Anwendungen für Vive, Rift, Daydream, GearVR und Cardboard mit Unterstützung für alle entsprechenden Controller. Hast du kein Headset oder Controller? Kein Problem! A-Frame funktioniert weiterhin auf Standard-Desktops und Smartphones.

Entity-Component-Architektur

A-Frame ist ein leistungsstarkes Three.js-Framework, das eine deklarative, zusammensetzbare, wiederverwendbare Entity-Component-Struktur.js bereitstellt. HTML ist nur die Spitze des Eisbergs. Entwickler haben uneingeschränkten Zugriff auf JavaScript, DOM-APIs, three.js, WebVR und WebGL.

Performance

A-Frame ist von Grund auf für WebVR optimiert. Während A-Frame das DOM verwendet, berühren seine Elemente nicht die Browser-Layout-Engine. 3D-Objektaktualisierungen werden alle mit einem einzigen requestAnimationFrame-Aufruf mit wenig Aufwand im Speicher ausgeführt. Weitere Informationen finden Sie unter A-Painter, einem in A-Frame integrierten Tilt Brush-Klon, der wie native (90+ FPS) ausgeführt wird.

Werkzeug-Agnostiker

Da das Web auf der Idee des HTML basiert, ist A-Frame mit den meisten Bibliotheken, Frameworks und Tools kompatibel, darunter React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery.

Visueller Inspektor

A-Frame bietet einen praktischen integrierten visuellen 3D-Inspector. Öffne eine A-Frame-Szene, drücke Strg + Alt + I und fliege dahin, um hinter die Motorhaube zu schauen !

Sichtprüfer

Registry

Nehmen Sie leistungsstarke Komponenten, die von Entwicklern veröffentlicht wurden, und fügen Sie sie direkt aus HTML hinzu. Ähnlich wie beim Unity Asset Store sammelt und kuratiert die A-Frame-Registry diese Komponenten für eine einfache Erkennung.

Komponenten

Mit den Kernkomponenten von A-Frame wie Geometrien, Materialien, Lichtern, Animationen, Modellen, Raycaster, Schatten, positioniertem Audio, Text und den Steuerelementen von Vive / Touch / Daydream / GearVR / Cardboard ist der Boden in Schwung. Machen Sie mit Community-Komponenten wie Partikelsystemen, Physik, Mehrbenutzer, Ozeane, Berge, Spracherkennung, Bewegungserfassung, Teleportation, Superhänden und Augmented Reality noch weiter.

Fertig machen

A-Frame kann aus einer einfachen HTML-Datei entwickelt werden, ohne etwas installieren zu müssen! Eine gute Möglichkeit, A-Frame zu testen, um das Starter-Beispiel auf Glitch zu remixen, einem Online-Code-Editor, der sofort hostet und kostenlos bereitstellt. Oder erstellen Sie eine .html Datei und fügen Sie A-Frame in den head :

<html>
  <head>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>
 

Fügen Sie den JS Build hinzu

Um A-Frame in eine HTML-Datei aufzunehmen, löschen wir ein script Tag, das auf den CDN-Build verweist:

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

Installieren Sie ab npm

Wir können A-Frame auch über npm installieren:

$ npm install aframe
 

Dann können wir A-Frame in unsere Anwendung bündeln. Zum Beispiel mit Browserify oder Webpack:

require('aframe');
 

Wenn Sie npm verwenden, können Sie die Befehlszeilenschnittstelle angle für A-Frame verwenden. angle kann eine Szenenvorlage mit einem einzigen Befehl initialisieren:

npm install -g angle && angle initscene
 

Erste Schritte für AR

Um AR-Anwendungen im Web zu erstellen, müssen Sie eine neue Bibliothek mit dem Namen AR.js hinzufügen . Zuerst laden Sie A-Frame, gefolgt von AR.js.

Newt Sie müssen Ihre Szene mit dem A a-scene Tag A-Frames und dem artoolkit Artoolkit- artoolkit einrichten. Der sourceType muss Ihre Webcam sein. Damit wird auch die Font-Kamera Ihres Smartphones unterstützt.

Das a-marker-camera Tag markiert ein Bild innerhalb des aufgezeichneten Bildschirms, das ein Bild darstellt. In diesem Fall ist es marker.png . Wenn die Kamera diesen Marker erkennt, wird das Feld auf dem Marker angezeigt.

Nachfolgend finden Sie den Beispielcode:

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>
    THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'
</script>
<body>

    <a-scene artoolkit='sourceType: webcam;'>
        <a-box position='0 0 0.5' material='opacity: 0.5;'></a-box>
        <a-marker-camera preset='marker.png'></a-marker-camera>
    </a-scene>

</body>