aframe Tutorial
Erste Schritte mit aframe
Suche…
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 |
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
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 !
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.
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>