Augmented Reality im Browser mit Ehrfurcht.js

Key Takeaways

• Augmented Reality (AR) kann in mobilen Browsern mit der Awe.js -Bibliothek implementiert werden, die die Kamera des Geräts und drei.js zum Erstellen von AR -Erlebnissen nutzt.
• Die Awe.js-Bibliothek unterstützt mehrere AR-Erlebnisse, einschließlich GEO-basierter AR, Integration mit Oculus Rift, Leap Motion Controller und Marker-basiertem AR, der in der Demo verwendet wird.
• Für die Demo benötigen Sie Google Chrome für Mobilgeräte, ein IFTTT -Konto und einen gedruckten AR -Marker. Die Demo funktioniert auch auf einigen Desktop -Browsern wie Chrome und Opera.
• Die Demo umfasst eine 3D -Steuerplatte, die über einem physischen Marker erscheint und mit externen Diensten wie IFTTT interagieren kann, um Einstellungen wie leichte Farben zu ändern.
• Awe.js erfordert das Einrichten verschiedener Parameter wie Gerätetyp, Kameraposition und Lichteinstellungen im Browser und verwendet Punkte von Interesse (POI) und Projektionen, um AR -Elemente zu verwalten.
• Chrome merkt jetzt HTTPS für Webseiten, die auf die Kamera zugreifen, und erfordert Anpassungen wie die Verwendung von HTTPS -Tunneln für lokale Tests.

Augmented Reality ist ein ordentliches Konzept. Wir sehen uns die Welt um uns herum aus und ergänzen sie mit Bildern, Text, Ton und Video. Tech -Unternehmen beginnen, die Möglichkeiten von AR mit Geräten wie Meta -Brillen, Microsoft HoloLens und Magic Leap zu erkunden. Diese sehr aufregenden AR -Headsets sind noch nicht ganz bereit für die Verbraucherfreigabe, daher kann es ein wenig dauern, bis jeder Haushalt ein Paar hat. Es gibt jedoch eine andere Möglichkeit, die Welt in die Realität zu erweitern, mit etwas, auf das sie möglicherweise leichter Zugriff haben - den mobilen Browser.

Ich habe zuvor andere Arten von Reality -Erstellung und -manipulation mit JavaScript und drei.js hier bei SitePoint in meinen Artikeln über das VR mit Google Cardboard und drei.js und Filterung der Realität mit JavaScript und Google Cardboard behandelt. In diesem Artikel werde ich zeigen, wie Sie eine JavaScript -Bibliothek namens Awe.js verwenden können, um ein Augmented Reality -Erlebnis im mobilen Web zu erstellen. Wir werden eine 3D -Steuerplatte erstellen, die sich über einen Papiermarker öffnet. Wir können es anschließen, um so ziemlich alles zu tun, was über eine JavaScript -HTTP -Anforderung aktiviert werden kann. Ich habe sie so eingerichtet, dass ich die Farbe meines LIFX -Glühbirnens mit IFTTT ändert.

was Sie benötigen

Für diese Demo benötigen Sie derzeit Google Chrome für Mobile. Es kann möglicherweise auch für Mobile auf Firefox funktionieren, aber ich habe festgestellt, dass Click -Ereignisse für mich nicht ausgelöst wurden, als ich es auf meinem HTC One M9 ausprobiert habe. Es funktioniert auch in einigen Desktop -Browsern (Chrome und Opera hat auf meinem Mac ziemlich gut funktioniert), ist aber definitiv nicht die gleiche Erfahrung wie ein Smartphone mit Touch -Events. Es könnte jedoch auf einem Tablet ordentlich sein.

Sie benötigen auch ein IFTTT -Konto und Kenntnisse darüber, wie der Maker -Kanal mit Regeln eingerichtet wird, die auf HTTP -Anforderungen ausgelöst werden. Wenn Sie neu bei IFTTT sind, haben wir zuvor die Grundlagen im Artikel zum Anschließen von LIFX -Glühbirnen mit ITTT mit IFTTT durchgesehen. Für diejenigen, die neu im Maker -Kanal sind, haben wir dies auch bei der Verbindung des IoT und des Node.js mit IFTTT.

abgedeckt

Schließlich müssen Sie einen Marker auf ein Stück Papier ausdrucken. Der Marker, den wir verwenden werden, lautet:

Der Code

Wenn Sie es vorziehen, direkt in den Code zu gelangen und ihn auszuprobieren, ist alles auf Github verfügbar.

Awe.js

Awe.js ist eine JavaScript -Bibliothek, die drei.js, die Kamera Ihres Geräts und einige ziemlich intelligente Techniken verwendet, um eine Augmented Reality im Browser zu erstellen. Sie können die Bibliothek und einige Muster auf dem Awe.js Github Repo herunterladen. Es liefert vier verschiedene Arten von AR -Erlebnissen, jeweils ihr eigenes Beispiel im Repo:

• Geo_ar - Ermöglicht Sie, Objekte an den Set -Kompasspunkten zu setzen.
• GRIFT_AR - kompatibel mit einem Oculus Rift.
• lap_ar - integriert in den Leap Motion Controller.
• marker_ar - Ermöglicht Ihnen eine Erfahrung, die auf Augmented -Reality -Markern positioniert ist. Dies ist diejenige, mit der wir in dieser Demo arbeiten werden.

Unser erweiterter Reality -Demo -Code

Unser Demo -Code ist über 300 Zeilen lang, aber ein Großteil davon ist wiederholter Code für ähnliche Objekte. Ich würde empfehlen, den Demo -Code aus dem Github Repo der Demo herunterzuladen und die hier angegebenen Erklärungen zu folgen. Sobald Sie eine Vorstellung davon haben, wie es alles funktioniert, versuchen Sie, sich davon abzubiefen und etwas Eigenes zu bauen.

Alles beginnt innerhalb des Load -Ereignisses in unserem Fenster. Das allererste, was wir einschließen, ist eine Variable, um zu verfolgen, ob unser AR -Bedienfeld (ich habe es kurz hier als "Menü" bezeichnet) geöffnet oder nicht. Anfangs ist es geschlossen.

<span>window.addEventListener('load', function() {
</span>    <span>var menu_open = false;
</span>    
    <span>// Our code continues here
</span>  <span>});</span>

Dann verwenden wir die Awe.js -Bibliothek. Alles, was wir tun, ist im Fenster definiert.awe.init () Funktion. Wir beginnen mit einigen globalen Einstellungen für unsere AR -Szene.

<span>window.addEventListener('load', function() {
</span>    <span>var menu_open = false;
</span>    
    <span>// Our code continues here
</span>  <span>});</span>

• device_type - Alle Beispiele setzen dies auf Awe.auto_detect_device_type, der es fordert, das Gerät automatisch zu erkennen. Bisher habe ich nicht gesehen, dass ich dies ändern musste.
• Einstellungen - Einstellungen Wir möchten hier tatsächlich lebendig ändern. Dazu gehören:
  • container_id - Die ID des Elements, das unsere gesamte Erfahrung in der Inneren erzeugt wird.
  • fps - unsere gewünschten Frames pro Sekunde (optional).
  • default_camera_position - Die Standard -Kamera -Position, die wir unsere Szene von (wir beginnen sie unter (0,0,0))).
  • default_lights - Wir können eine Reihe verschiedener drei.js -Lichter für unsere Szene einrichten, wobei jeder ID die Art von Licht und seine Farbe definiert. Unsere Demo hat nur einen weißen Drei -Js -Punktlicht. Für den Lichttyp stehen eine Reihe von Optionen zur Verfügung, die verschiedenen Arten von drei Leuchten entsprechen - 'Bereich', 'Richtungssteuer', 'Hemisphäre', 'Point' und 'Spot'.

Sobald unsere Einstellungen vorhanden sind, definieren wir dann, was zu tun ist, wenn Ehrfurcht initialisiert wurde. Alles ist in eine Ehrfurcht. Achten Sie darauf, nur die Browserfunktionen zu definieren, die Sie für die Demo benötigen, da Sie Ihre AR -App unnötig verhindern können, dass Sie in einigen Browsern arbeiten, wenn Sie diese fälschlicherweise mit Funktionen definieren, die in einigen ihrer anderen Github -Beispiele aufgeführt sind. Um beispielsweise Elemente basierend auf Kompasspunkten positioniert zu haben, benötigen Sie Zugriff auf die Gyro -Fähigkeit. Das funktioniert bei den meisten Desktop -Browsern nicht. Das brauchen wir in dieser Demo nicht, also schließen wir es aus.

<span>window.awe.init({
</span>    <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
</span>    <span>settings: {
</span>      <span>container_id: 'container',
</span>      <span>fps: 30,
</span>      <span>default_camera_position: { x:0, y:0, z:0 },
</span>      <span>default_lights: [{
</span>        <span>id: 'point_light',
</span>        <span>type: 'point',
</span>        <span>color: 0xFFFFFF
</span>      <span>}]
</span>    <span>},</span>

Die Dateien, die definiert sind, ziehen in spezifische Funktionen für Awe.js-lib/Awes-standard-Abhängigkeiten.js, lib/Awes-standard.js und lib/Awes-standard-window_Resized.js ziemlich verbreitet, definieren Die Standard -Teile für Ehrfurcht und Handhabungsfenster ändern sich. Unsere Demo verwendet Marker, für die die beiden anderen Dateien unter diesen aufgeführt sind.

<span>ready: function() {
</span>    awe<span>.util.require([
</span>      <span>{
</span>        <span>capabilities: ['gum','webgl'],</span>

Sobald wir alle diese Dateien erfolgreich geladen haben, führen wir die treffend benannte Success () Awe.js -Funktion aus. Die erste Funktion, die Sie immer ausgeführt haben, wenn Sie mit der Anzeige von Elementen beginnen können, legt die Awe.js -Szene ein.

<span>files: [ 
</span>    <span>['lib/awe-standard-dependencies.js', 'lib/awe-standard.js'],
</span>    <span>'lib/awe-standard-window_resized.js',
</span>    <span>'lib/awe-standard-object_clicked.js',
</span>    <span>'lib/awe-jsartoolkit-dependencies.js',
</span>    <span>'lib/awe.marker_ar.js'
</span>  <span>],</span>

Alle Elemente in Ehrfurcht.js sind innerhalb von „Punkten von Interesse“ (POI) positioniert. Dies sind spezifische Punkte in der Szene, die über Koordinaten gekennzeichnet sind, dass Objekte innerhalb von von positioniert werden können. Sie können Pois in Ehrfurcht und Elementen selbst bewegen. Wir erstellen einen einzelnen POI, der überall dort platziert wird, wo ein bestimmter Papiermarker zu sehen ist. Um eine POI zu erstellen, verwenden wir die Funktion von Awe.js von Awe.pois.add ().

Ich habe ihm eine ID von "Marker" gegeben, aber Sie könnten es alles nennen, was Sie möchten, solange Sie in anderen Verweise auf diesen POI im Code konsistent sind. Wir setzen seine anfängliche Position auf (0,0.10000), was sie ein wenig in die Ferne positioniert, bis wir sie verwenden können. Wir setzen es auch so, dass es unsichtbar ist, bis wir den Marker erkennen.

<span>window.addEventListener('load', function() {
</span>    <span>var menu_open = false;
</span>    
    <span>// Our code continues here
</span>  <span>});</span>

Elemente, die wir in unsere Pois hinzufügen, werden als „Projektionen“ in Awe.js. bezeichnet. Die erste Projektion, die wir in unsere Szene hinzufügen, habe ich "Wurmloch" genannt, da dies ein flaches schwarzes Quadrat ist, an dem unsere Menüpunkte auf magische Weise erscheinen. So wie die ID des POI, können Sie Ihre absolut alles nennen, solange Sie sie mit anderen Verweise darauf in Ihrem Code übereinstimmen. Wir fügen es in unserem POI mit der Funktion Awe.Projektions.Add () hinzu.

<span>window.awe.init({
</span>    <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
</span>    <span>settings: {
</span>      <span>container_id: 'container',
</span>      <span>fps: 30,
</span>      <span>default_camera_position: { x:0, y:0, z:0 },
</span>      <span>default_lights: [{
</span>        <span>id: 'point_light',
</span>        <span>type: 'point',
</span>        <span>color: 0xFFFFFF
</span>      <span>}]
</span>    <span>},</span>

Es gibt einige Optionen für die Objekte, die wir als Projektionen hinzufügen können. Ich werde sie daher genauer erläutern. Beachten Sie - alle Werte von x, y und z für die Positionierung und Drehung stehen in Bezug auf seine POI. Dieser POI wird am Ende durch seine ID als {poi_id: 'marker'}.

definiert

• Geometrie - Dies bezieht sich auf die drei.js -Geometrieoptionen der Projektion. Die für jede Geometrie -Art von Geometrie erforderlichen Optionen entsprechen denen in Awe.js. Zum Beispiel würde die Spheregometrie in drei.js als {Form: 'Sphere', Radius: 10} in Awe.js. dargestellt. Eine Sache, die für diejenigen, die die neuesten drei.js verwenden, in der aktuell verfügbaren Version von Awe.js verwenden, verwendet BoxGeometry immer noch CubeGeometry. Um Kästchen zu erstellen, verwenden wir das Format {Form: 'Cube', x: 20, y: 30, z: 5} (trotz des Namens muss es kein „Würfel“ sein).
• Position - Sie können die X-, Y- und Z -Achse des Elements in Bezug auf ihre Poi anpassen.
• Rotation - Sie können das Element in Bezug auf seine POI um seine x-, y- und z -Achse drehen. Ich drehe das Wurmloch um 90 Grad auf der X -Achse, so dass es flach auf dem Tisch und 45 Grad durch ihre Z -Achse sitzt, da ich dachte Es macht dies auf einer Diagonale weniger offensichtlich).
• Material - Dies definiert das drei.js -Material der Projektion. Ich habe "Phong" (Meshphongmaterial in drei.Js) verwendet, aber es sieht aus wie "Lambert", "Shader", "Sprite" und "Sprite_canvas" sind möglicherweise ebenfalls als Optionen erhältlich. Wir können seine Farbe auch in Hex definieren.
• Textur - Dies wird in der Demo nicht verwendet, aber ich wollte sie für die Vollständigkeit in diesen Artikel aufnehmen. Um eine Textur zu definieren, können Sie Textur einschließen: {Pfad: 'yourTexturefileName.png'}.

In der Demo füge ich der Szene sieben verschiedene Kästchen/Würfel hinzu, jeder ist 30 Pixel hoch und platziere 31 Pixel auf der Y -Achse, so dass es ursprünglich vom Wurmloch versteckt wird. Sie sind alle etwas andere Breiten, damit sie ein bisschen wie eine Glühbirne aussehen.

Ich bewege sie ein wenig von der Mitte des Wurmlochs über ihre X- und Z -Koordinaten zurück, aber um ehrlich zu sein, würde es wahrscheinlich auch für diejenigen, wenn -5 nervt, einwandfrei aussehen. Ich habe es um 45 Grad auf der Y -Achse gedreht, so dass es in einem schönen Winkel über dem Wurmloch tritt.

<span>window.addEventListener('load', function() {
</span>    <span>var menu_open = false;
</span>    
    <span>// Our code continues here
</span>  <span>});</span>

Jedes von diesen hat eine ID von 'ar_button_ {number}', wobei die Nummer der Index der Menüschaltfläche von unten nach oben ist. Wir werden diese ID in unseren HTTP -Aufrufen bei IFTTT verwenden, so

Nachdem unsere Projektionen definiert sind, definieren wir ein ziemlich wichtiges Stück unseres AR -Puzzles - unser Markererkennungsereignis. Wir fügen dies als ein Array hinzu, das an die Funktion ave.events.add () übergeben wird.

<span>window.awe.init({
</span>    <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
</span>    <span>settings: {
</span>      <span>container_id: 'container',
</span>      <span>fps: 30,
</span>      <span>default_camera_position: { x:0, y:0, z:0 },
</span>      <span>default_lights: [{
</span>        <span>id: 'point_light',
</span>        <span>type: 'point',
</span>        <span>color: 0xFFFFFF
</span>      <span>}]
</span>    <span>},</span>

Wir haben nur ein Ehrfurcht, also gibt es hier nur ein einziges Ereignis. Das Ereignis ist mit einer ID definiert, die wir alles nennen können. Ich habe es 'ar_tracking_marker' genannt. Wir definieren die Arten von Geräten, auf die sie anwendbar sind. Dies scheint in allen bisherigen Beispielen in allen Ehrfurcht in ihrem Repo gleich zu sein. Ich habe es so gelassen, wie es bei PC und Android auf 1.

ist

<span>ready: function() {
</span>    awe<span>.util.require([
</span>      <span>{
</span>        <span>capabilities: ['gum','webgl'],</span>

Dann haben wir register () und unregister () Funktionen zum Hinzufügen und Entfernen des Ereignishörers, der nach dem Marker beobachtet wird.

<span>files: [ 
</span>    <span>['lib/awe-standard-dependencies.js', 'lib/awe-standard.js'],
</span>    <span>'lib/awe-standard-window_resized.js',
</span>    <span>'lib/awe-standard-object_clicked.js',
</span>    <span>'lib/awe-jsartoolkit-dependencies.js',
</span>    <span>'lib/awe.marker_ar.js'
</span>  <span>],</span>

Wir definieren dann den Ereignishandler, der so lange ausgeführt wird, sobald wir einen Marker entdecken. Wir achten auf den „64“ -Marker und führen nur eine Antwort aus, wenn wir ihn finden.

<span>success: function() {
</span>    <span>window.awe.setup_scene();</span>

In unserer Reaktion auf die Suche nach einem Marker möchten wir unseren POI, den wir als "Marker" bezeichnet haben, mit unserem physischen Papiermarker an die Stelle bringen und sie sichtbar machen. Wir transformieren es in die physische Markierung mit Ereignis.Detail ['64 ']. Transform.

awe<span>.pois.add({id: 'marker', position: {x: 0, y: 0, z: 10000}, visible: false});</span>

Wir setzen auch unsere "Wurmloch" -Projektion als sichtbar.

awe<span>.projections.add({ 
</span>    <span>id: 'wormhole',
</span>    <span>geometry: {shape: 'plane', height: 400, width: 400},
</span>    <span>position: {x: 0, y: 0, z: 0},
</span>    <span>rotation: {x: 90, z: 45},
</span>    <span>material: {
</span>      <span>type: 'phong',
</span>      <span>color: 0x000000
</span>    <span>}
</span>  <span>}, {poi_id: 'marker'});</span>

Wenn wir den Marker nicht sehen, aber unser Menü geöffnet sind, stellen wir fest, dass wir geöffnet bleiben, aber das Wurmloch verbergen. Das Hauptreden dafür ist, dass der Marker bei einigen Lichtveränderungen unleserlich wird. Wir wollen uns nicht in ein bestimmtes Farblicht fangen, ohne zurückzukehren!

awe<span>.projections.add({
</span>    <span>id: 'ar_button_one',
</span>    <span>geometry: {shape: 'cube', x: 60, y: 30, z: 5},
</span>    <span>rotation: {y: 45},
</span>    <span>position: {x: -5, y: -31, z: -5},
</span>    <span>material: {
</span>      <span>type: 'phong',
</span>      <span>color: 0xFF0000
</span>    <span>}
</span>  <span>}, {poi_id: 'marker'});</span>

Wenn es keinen Marker gibt und unser Menü nicht geöffnet ist, wartet der gesamte POI versteckt darauf, dass wir es sehen.

awe<span>.events.add([
</span>    <span>// Our events here
</span>  <span>]);</span>

Wir beenden Awe.js, die Szene zu aktualisieren.

<span>id: 'ar_tracking_marker',
</span>  <span>device_types: {
</span>    <span>pc: 1,
</span>    <span>android: 1
</span>  <span>},</span>

Die letzte tatsächliche Funktionalität, die wir einrichten werden, sind unsere Klickereignisse. All dies befindet sich innerhalb des Ereignisses von Object_clicked.

<span>register: function(handler) {
</span>    <span>window.addEventListener('ar_tracking_marker', handler, false);
</span>  <span>},
</span>  <span>unregister: function(handler) {
</span>    <span>window.removeEventListener('ar_tracking_marker', handler, false);
</span>  <span>},</span>

Unser Klickereignis enthält die ID der Projektion, auf die in e.Detail.Projection_id geklickt wurde. Wir verwenden eine Switch -Anweisung, um zu bestimmen, wie auf den Klick reagiert werden. Klicken auf das Wurmloch Öffnen und schließen Sie das virtuelle Menü, während auf die virtuellen Menüschaltflächen klicken. Wir verwenden eine Switch -Anweisung, da jede der Schaltflächen denselben Antwortcode ausführt.

<span>window.addEventListener('load', function() {
</span>    <span>var menu_open = false;
</span>    
    <span>// Our code continues here
</span>  <span>});</span>

Unser Wurmloch klicken Sie auf Ereignisse öffnen und schließen Sie das Menü ab, je nachdem, ob Menus_open wahr oder falsch ist. Wenn es falsch ist, verwenden wir die Funktion der Awe.js Awe.Projektion.Update (), um jede Taste auf der y -Achse über eine Sekunde zu animieren. Das bewegt es aus dem Wurmloch. Der einzige Unterschied zwischen der Bewegung jeder Projektion ist, wie sehr sich jedes Objekt über die y -Achse bewegt.

<span>window.awe.init({
</span>    <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
</span>    <span>settings: {
</span>      <span>container_id: 'container',
</span>      <span>fps: 30,
</span>      <span>default_camera_position: { x:0, y:0, z:0 },
</span>      <span>default_lights: [{
</span>        <span>id: 'point_light',
</span>        <span>type: 'point',
</span>        <span>color: 0xFFFFFF
</span>      <span>}]
</span>    <span>},</span>

Andernfalls verschieben wir sie alle zurück in ihre ursprüngliche Position unter dem Wurmloch und versteckt sich aus der Ansicht.

<span>ready: function() {
</span>    awe<span>.util.require([
</span>      <span>{
</span>        <span>capabilities: ['gum','webgl'],</span>

Nach unserer Anweisung IF ENTWEISE WIRKEN WIR MENUEM MEUSE_OPEN auf das Gegenteil von dem, was es war, so verfolgen wir, wo es vor sich geht.

<span>files: [ 
</span>    <span>['lib/awe-standard-dependencies.js', 'lib/awe-standard.js'],
</span>    <span>'lib/awe-standard-window_resized.js',
</span>    <span>'lib/awe-standard-object_clicked.js',
</span>    <span>'lib/awe-jsartoolkit-dependencies.js',
</span>    <span>'lib/awe.marker_ar.js'
</span>  <span>],</span>

In unserem Schaltflächenklick -Ereignis stellen wir eine HTTP -Anfrage an IFTTT, die die ID unserer Schaltfläche als Ereignisnamen und unseren Schlüssel zum Zugriff auf den IFTTT -Dienst enthält. Wir verwenden die zurückkommenden Daten nicht wirklich. Wir protokollieren sie für Debugging -Zwecke bei der Konsole, aber ansonsten stammen die tatsächlichen Ergebnisse von IFTTT, die auf den HTTP -Aufruf reagieren.

<span>success: function() {
</span>    <span>window.awe.setup_scene();</span>

Danach haben wir, wenn Awe.js aufgrund von Inkompatibilitäten usw. nicht lädt, ein alternatives Skript, das eine Fehlermeldung angezeigt wird.

awe<span>.pois.add({id: 'marker', position: {x: 0, y: 0, z: 10000}, visible: false});</span>

Es ist https Zeit

Update Ende 2015 - Ich springe in diesen Artikel zurück, um ein neues Stück ziemlich wichtige Informationen hinzuzufügen - Chrome erfordert jetzt, dass Webseiten mit der Kamera über HTTPS serviert werden. Bevor Sie versuchen, dies auszuführen, müssen Sie einen Weg finden, Ihren Service über HTTPS auszuführen. Eine Methode, die ich bisher zum Testen verwendet habe, ist NGROK, mit dem Sie Ihrem örtlichen Haus einen HTTPS -Tunnel bereitstellen können. Wir haben einen Leitfaden beim Zugriff auf Localhost von überall hier bei SitePoint, der Ihnen helfen kann, den Einstieg zu erlangen.

die Demo in Aktion

Wenn wir diesen Code auf Google Chrome für Mobile ausführen und auf unseren Marker zeigen, sollte ein Wurmloch erscheinen.

Wenn wir auf das Wurmloch klicken, sollten unsere Menüschaltflächen in ihre richtigen Stellen animieren.

Wenn wir auf einen der Menüelemente klicken…

Es sollte die Farbe unseres Lebenslichts verändern!

Schlussfolgerung

Das ist alles, was Sie wissen müssen, um mit AWE.Js. Es hat viel Potenzial, wie viele Entwicklungen in der Tech -Welt heutzutage! Das Awe.js -Team arbeitet ständig am Plugin und es sollte eine neuere und noch umfassendere Version geben, die bald kommt! Es könnte auch möglich sein, einen stereoskopischen Effekt von drei.js für die Verwendung in Google Cardboard einzurichten und diese mit einigen Funktionen von Awe.js zu kombinieren, um AR -Headset -Erlebnisse zu erstellen. Ich dachte, es könnte ein bisschen viel für einen Artikel sein. Achten Sie also auf einen zukünftigen Artikel dazu!

Wenn Sie mit etwas AR -Magie mit diesem Code experimentieren oder noch weiter gehen, in den Kommentaren eine Notiz hinterlassen oder auf Twitter (@thatpatrickGuy) mit mir in Verbindung setzen, würde ich es gerne auschecken!

häufig gestellte Fragen zur Augmented Reality im Browser mit Awe.js

Wie unterscheidet sich Awe.js in Bezug auf Funktionalität und Leistung von ar.js? Sie unterscheiden sich jedoch in mehrfacher Hinsicht. Awe.js ist ein umfassenderer Rahmen, der eine breite Palette von Funktionen für die Schaffung immersiver AR -Erlebnisse bietet. Es unterstützt mehrere Tracking -Methoden, einschließlich GPS-, Kompass- und Gyroscopic -Verfolgung, und es unterstützt auch 3D -Modelle. Andererseits konzentriert sich AR.JS mehr auf Marker-basierte Verfolgung und ist bekannt für seine hohe Leistung und Effizienz. Für Anfänger ist es auch einfacher zu verwenden, aber es bietet möglicherweise nicht die gleiche Flexibilität wie Awe.js.

Kann ich AWE.js verwenden, um eine AR -Web -App zu entwickeln?

Ja, Sie können Awe.js verwenden, um eine AR -Web -App zu entwickeln. Awe.js ist eine JavaScript -Bibliothek, mit der Sie AR -Erlebnisse direkt im Browser erstellen können, ohne dass zusätzliche Plugins oder Downloads erforderlich sind. Dies ist eine gute Wahl für die Entwicklung webbasierter AR-Anwendungen. Sie können es verwenden, um eine breite Palette von AR -Erlebnissen zu erstellen, von einfachen 2D -Overlays bis zu komplexen 3D -Szenen. JS, Sie müssen zuerst die Bibliothek aus dem offiziellen Github -Repository herunterladen. Sobald Sie dies getan haben, können Sie Ihre AR -Szenen erstellen, indem Sie JavaScript -Code schreiben. Awe.js bietet eine Reihe von APIs und Funktionen, mit denen Sie die AR -Erfahrung steuern können, einschließlich Funktionen zum Erstellen von Objekten, zur Steuerung der Kamera und zur Bearbeitung von Benutzereingaben.

Was sind einige Beispiele für Anwendungen, die mit Awe.js erstellt werden können? Sie können beispielsweise eine AR -Tour Guide -App erstellen, in der Benutzer ihr Telefon auf verschiedene Sehenswürdigkeiten zeigen können, um Informationen darüber zu erhalten. Sie können es auch verwenden, um ein AR -Spiel zu erstellen, bei dem Benutzer mit virtuellen Objekten in der realen Welt interagieren können. Andere mögliche Anwendungen umfassen AR -Einkaufs -Apps, AR -Bildungs ​​-Apps und vieles mehr. möglich. Da es jedoch erweiterte Web -Technologien wie WebGL und WEBRTC verwendet, funktioniert es möglicherweise nicht bei älteren Browsern, die diese Technologien nicht unterstützen. Für die besten Ergebnisse wird empfohlen, Awe.js mit einem modernen, aktuellen Browser wie Chrome, Firefox oder Safari zu verwenden. 🎜>

Ja, Sie können Awe.js neben anderen JavaScript -Bibliotheken oder Frameworks verwenden. Awe.js ist so konzipiert, dass es flexibel und modular ist, sodass Sie es problemlos in Ihre vorhandenen JavaScript -Projekte integrieren können. Denken Sie jedoch daran, dass einige Merkmale von Awe.js möglicherweise nicht mit bestimmten Bibliotheken oder Frameworks kompatibel sind. Daher ist es immer eine gute Idee, Ihren Code gründlich zu testen.

Wenn Sie Probleme mit Ehrfurcht haben.js, können Sie mehrere Ressourcen wenden, um Hilfe zu erhalten. Das offizielle Github -Repository für Awe.js enthält eine umfassende Dokumentation, die alle Aspekte der Bibliothek abdeckt. Sie können auch den Ausgabe -Tracker auf GitHub überprüfen, um festzustellen, ob jemand anderes auf das gleiche Problem gestoßen ist. Wenn Sie dort keine Lösung finden, können Sie versuchen, um Hilfe beim Stapelüberlauf oder anderen Online -Entwicklergemeinschaften zu fragen.

Ist Awe.js Open Source? ein Open -Source -Projekt. Dies bedeutet, dass Sie den Code frei verwenden, ändern und verteilen können, solange Sie den Bedingungen der Lizenz einhalten. Der Quellcode für Awe.js ist in GitHub verfügbar, sodass Sie auch zum Projekt beitragen können, indem Sie Fehlerberichte einreichen, neue Funktionen vorschlagen oder sogar Ihren eigenen Code senden. .js? Wenn Sie Hilfe bei Awe.js benötigen, können Sie auf der Github -Seite des Projekts oder auf anderen Online -Entwicklergemeinschaften um Hilfe bitten. Es gibt auch viele Tutorials und Anleitungen online, mit denen Sie mit AWE.JS.

beginnen können

Wie kann ich zum Awe.js -Projekt beitragen? Wenn Sie ein Entwickler sind, können Sie einen Beitrag leisten, indem Sie Fehlerberichte einreichen, neue Funktionen vorschlagen oder Code schreiben. Wenn Sie kein Entwickler sind, können Sie dennoch einen Beitrag leisten, indem Sie Dokumentation schreiben, Tutorials erstellen oder dabei helfen, das Wort über Awe.js. zu verbreiten. Alle Beiträge werden sehr geschätzt und helfen, Ehrfurcht zu einem besseren Werkzeug für alle zu machen.

Das obige ist der detaillierte Inhalt vonAugmented Reality im Browser mit Ehrfurcht.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!