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.
Optimizing AI inference for XR devices — model quantization, NPU acceleration, hierarchical serving, bandwidth optimization for real-time 60fps rendering.
WebGPU hit Baseline, Safari finally shipped WebXR, AI-assisted XR development landed from Meta and Google, and adoption surged 40%. A no-hype look at the immersive web ecosystem in mid-2026.
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.