AR.js: Markerlose Augmented Reality im Web
đŹđ§ Read in English~2 min read
XRARarjsaugmented-realitywebxrmobilelocation-based
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.
Practical patterns for integrating LLMs, VLMs, and neural networks with immersive XR environments â from spatial AI assistants to real-time scene understanding.
AR.js bringt hochperformante Augmented Reality in mobile Browser. Kein App Store, keine Installation â einfach eine URL öffnen und AR erleben.
| Feature | Beschreibung |
|---|---|
| Marker-basiert | Traditionelle Fiducial Marker |
| Standort-basiert | GPS-positionierte Inhalte |
| Image Tracking | Bilder in Echtzeit erkennen |
| Face Tracking | GesichtszĂŒge erkennen |
| 60fps auf Mobile | Auf Performance optimiert |
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-box position="0 0.5 0" material="color: red;"></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
```text Richten Sie Ihre Kamera auf einen [Hiro-Marker](https://raw.githubusercontent.com/AR-js-org/AR.js/master/data/images/hiro.png) und sehen Sie, wie die rote Box erscheint. ## Marker-Typen ### Preset Marker ```html
<a-marker preset="hiro">
<!-- 3D content -->
</a-marker>
<a-marker preset="kanji">
<!-- 3D content -->
</a-marker>
```text ### Custom Marker 1. Muster generieren: [AR.js Marker Training](https://ar-js-org.github.io/AR.js/three.js/examples/marker-training/examples/generator.html) 2. `.patt` Datei herunterladen 3. In Ihrer Szene verwenden: ```html
<a-marker type="pattern" url="custom-marker.patt">
<a-box color="blue"></a-box>
</a-marker>
```text ### Barcode Marker ```html
<a-marker type="barcode" value="5">
<a-sphere color="green"></a-sphere>
</a-marker>
```text ## Standort-basierte AR Platzieren Sie Inhalte an realen GPS-Koordinaten: ```html
<a-scene arjs="sourceType: webcam; debugUIEnabled: false;">
<a-entity
gps-entity-place="latitude: 52.5200; longitude: 13.4050"
scale="10 10 10"
gltf-model="model.glb"
>
</a-entity>
<a-camera gps-camera rotation-reader></a-camera>
</a-scene>
```text ### Dynamische Standort-Inhalte ```javascript // Add entities at user's location
navigator.geolocation.getCurrentPosition((position) => { const lat = position.coords.latitude; const
lon = position.coords.longitude; const entity = document.createElement('a-entity');
entity.setAttribute('gps-entity-place', `latitude: ${lat}; longitude: ${lon}`);
entity.setAttribute('gltf-model', 'pin.glb'); document.querySelector('a-scene').appendChild(entity);
}); ```text ## Image Tracking Beliebige Bilder tracken (AR.js 3.0+): ```html
<a-scene
vr-mode-ui="enabled: false"
arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;"
>
<a-assets>
<a-asset-item id="model" src="model.glb"></a-asset-item>
</a-assets>
<a-marker mindar-image-target="imageTargetSrc: targets.mind;">
<a-entity gltf-model="#model" scale="0.5 0.5 0.5"></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
```text ## Performance-Optimierung ### Polygon-Anzahl reduzieren ```javascript // Use low-poly models
<a-entity gltf-model="lowpoly.glb"></a-entity>
```text ### Getrackte Marker begrenzen ```html
<a-scene arjs="maxMarkerArea: 0.5">
```text ### Smooth Tracking ```html
<a-marker
emitevents="true"
smooth="true"
smoothCount="5"
smoothTolerance="0.01"
smoothThreshold="2"
>
</a-marker>
```text ## Event-Handling ```javascript const marker = document.querySelector('a-marker');
marker.addEventListener('markerFound', () => { console.log('Marker detected!'); // Show UI, play
sound, etc. }); marker.addEventListener('markerLost', () => { console.log('Marker lost'); // Hide
UI, pause, etc. }); ```text ## Praxisbeispiele | Anwendung | Beschreibung | | ------------- | ------------- | | **Produktvisualisierung** | Möbel im eigenen Raum sehen | | **Bildung** | Interaktive Anatomie, Chemie-MolekĂŒle | | **Navigation** | Richtungspfeile in der realen Welt | | **Marketing** | AR-Verpackungen, Visitenkarten | | **Gaming** | Standort-basierte Spiele wie PokĂ©mon GO | ## Deployment AR.js funktioniert nur ĂŒber HTTPS (Voraussetzung fĂŒr Kamerazugriff): ```bash #
Netlify (automatic HTTPS) netlify deploy --prod # GitHub Pages (HTTPS enabled) git push origin
gh-pages ```text ## Browser-Support | Browser | Support | | --------- | --------- | | Chrome Android | VollstÀndig | | Safari iOS | VollstÀndig (WebRTC) | | Firefox Android | VollstÀndig | | Samsung Internet | VollstÀndig | ## Fazit AR.js demokratisiert Augmented Reality. Mit etwa 100 Zeilen HTML können Sie AR-Erlebnisse schaffen, die sofort Milliarden von mobilen Nutzern erreichen.</a-scene
>