A-Frame WebXR: VR-Erlebnisse in 15 Minuten erstellen
🇬🇧 Read in English~1 min read
XRWebXRaframewebxrvrthree.jsweb
Back openDesk Edu for a sovereign, open-source education — every vote counts.
Vote nowSave products you love by clicking the heart icon.
Eine umfassende Einführung in die Virtual Reality, die die Grundlagen der Computergrafik, stereoskopisches Sehen, die Geschichte von VR, Gerätekategorien, Motion Tracking und das Reality-Virtuality-Kontinuum abdeckt.
Praktische Patterns für die Integration von LLMs, VLMs und neuronalen Netzen in immersive XR-Umgebungen — von räumlichen KI-Assistenten bis hin zum Echtzeit-Szenenverständnis.
A-Frame abstrahiert Three.js in deklaratives HTML und macht die VR-Entwicklung für Webentwickler zugänglich. Entwickelt von Mozilla, ist es der schnellste Weg, WebXR-Inhalte zu erstellen.
| Vorteil | Beschreibung |
|---|---|
| HTML-Syntax | 3D-Szenen mit HTML-Tags schreiben |
| Entity-Component | Flexibles Kompositionssystem |
| VR-native | Funktioniert im Browser und in Headsets |
| Inspector | Visueller Editor enthalten |
| Community | Über 1000 Komponenten verfügbar |
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.4.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>
```text Das ist alles. Im Browser öffnen, VR-Modus klicken, Headset aufsetzen. ## Core Primitives ### Basis-Formen ```html
<a-box color="red"></a-box>
<a-sphere color="blue"></a-sphere>
<a-cylinder color="green"></a-cylinder>
<a-plane color="gray"></a-plane>
<a-cone color="yellow"></a-cone>
```text ### Media ```html
<!-- 360 image -->
<a-sky src="panorama.jpg"></a-sky>
<!-- 360 video -->
<a-videosphere src="video.mp4"></a-videosphere>
<!-- 3D model -->
<a-entity gltf-model="model.glb"></a-entity>
```text ## Entity-Component System A-Frame nutzt die ECS-Architektur: ```html
<a-entity
position="0 1 -3"
rotation="0 45 0"
scale="1 1 1"
material="color: red; metalness: 0.7"
geometry="primitive: box; width: 2"
></a-entity>
```text ## Custom Components ### Komponente registrieren ```javascript
AFRAME.registerComponent('rotate-on-hover', { init: function() {
this.el.addEventListener('mouseenter', () => { this.el.setAttribute('rotation', '0 90 0'); });
this.el.addEventListener('mouseleave', () => { this.el.setAttribute('rotation', '0 0 0'); }); } });
```text ### Komponente verwenden ```html
<a-box rotate-on-hover color="blue"></a-box>
```text ## Animation ### Integrierte Animation ```html
<a-box
position="0 1 -3"
color="tomato"
animation="property: rotation; to: 0 360 0; loop: true; dur: 2000"
>
</a-box>
```text ### Mehrere Animationen ```html
<a-entity
animation__rotate="property: rotation; to: 0 360 0; loop: true; dur: 2000"
animation__scale="property: scale; to: 1.2 1.2 1.2; loop: true; dir: alternate; dur: 1000"
>
</a-entity>
```text ## Interaktion ### Cursor-Komponente ```html
<a-entity camera look-controls>
<a-entity
cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat"
>
</a-entity>
</a-entity>
```text ### Click-Events ```html
<a-box
class="interactive"
event-set__mouseenter="scale: 1.2 1.2 1.2"
event-set__click="color: blue"
>
</a-box>
```text ## Physik Fügen Sie Physik mit der Physics-Komponente hinzu: ```html
<script src="https://unpkg.com/aframe-physics-system@1.4.0/dist/aframe-physics-system.min.js"></script>
<a-scene physics>
<a-box dynamic-body position="0 4 -3" color="red"></a-box>
<a-plane
static-body
position="0 0 -3"
rotation="-90 0 0"
width="10"
height="10"
color="#7BC8A4"
></a-plane>
</a-scene>
```text ## Inspector Drücken Sie `Ctrl + Alt + I`, um den visuellen Inspector zu öffnen. Bearbeiten Sie Entities visuell und exportieren Sie den Code. ## Deployment A-Frame-Apps sind statische Dateien. Überall deployen: ```bash # Netlify netlify
deploy --prod # Vercel vercel --prod # GitHub Pages git push origin gh-pages ```text ## Fazit
A-Frame macht die VR-Entwicklung so einfach wie das Schreiben von HTML. Beginnen Sie mit Primitives, fügen Sie Komponenten hinzu und schreiben Sie bei Bedarf benutzerdefiniertes JavaScript. Die Einstiegshürde war noch nie so niedrig.