Schnellstart-Anleitung

Dieser Leitfaden enthält die Schritte, die erforderlich sind, um mit dem Niantic 8th Wall Studio und dem Cloud-Editor loszulegen.

Erstellen Sie ein 8th Wall Konto

Die Erstellung eines 8th Wall-Kontos gibt Ihnen diese Möglichkeiten:

• Erstellen Sie reichhaltige Web-AR- und Web-VR-Erlebnisse und 3D-Webspiele, die direkt in einem mobilen Webbrowser laufen.
• Nutzen Sie unser neues visuelles Tooling und die neue Spiel-Engine, die jetzt in der öffentlichen Beta-Phase sind.
• Arbeiten Sie unter mit Teammitgliedern zusammen und speichern Sie Code in der Versionskontrolle.
• Sofortige Vorschau Projekte, während Sie entwickeln.
• Drahtloses Debuggen Ihres Codes in Echtzeit mit Live-Konsolenprotokollen von mehreren Geräten.
• Veröffentlichen Sie Projekte, die im globalen Netzwerk von 8th Wall gehostet werden.
• Verwalten Sie Abonnements, Rechnungsinformationen und Lizenzen für kommerzielle Projekte.
• Erstellen Sie ein öffentliches Profil und stellen Sie Ihre Projekte auf 8thwall.com vor, damit Sie Ihre Arbeit, Live-Demos und/oder Ihren Code präsentieren können.

Neue Benutzer: Erstellen Sie kostenlos unter https://8thwall.com/get-started

Bestehende Benutzer: Anmeldung unter https://www.8thwall.com/login

Kostenlos erstellen

Die Niantic 8th Wall Studio- und Built-in-Hosting-Plattform steht allen kostenlos zur Verfügung und der Cloud Editor ist für Arbeitsbereiche mit einem bezahlten Abonnement verfügbar. 8th Wall bietet einen kostenlosen Basic-Plan an, mit dem Sie die volle Leistungsfähigkeit von 8th Wall nutzen und mit der Erstellung von WebAR-Erlebnissen beginnen können, ohne dass eine Kreditkarte erforderlich ist.

Für kommerzielle oder markengeschützte Arbeiten sind ein Pro-Plan und eine kommerzielle Lizenz erforderlich. 8. Wand-Abonnements und -Lizenzen werden automatisch verlängert, bis Sie sie kündigen. Es gibt keine Rückerstattungen oder Gutschriften für teilweise oder nicht genutzte Monate. Um Ihre Abonnementeinstellungen zu verwalten, lesen Sie bitte Kontoeinstellungen Anleitung

1. Klicken Sie auf der 8th Wall Homepage oder der Preisseite auf Create for Free

2. Erstellen Sie Ihr Konto, indem Sie Ihren Namen, Ihre E-Mail-Adresse und Ihr Passwort eingeben oder ein soziales Login verwenden. Überprüfen und bestätigen: Akzeptieren Sie die Allgemeinen Geschäftsbedingungen für die 8. Wand und klicken Sie dann auf Weiter.

3. Bestätigen Sie Ihre E-Mail Adresse. Sie erhalten eine E-Mail mit einem Verifizierungscode. Geben Sie den Verifizierungscode ein und klicken Sie auf Bestätigen.

4. Klicken Sie auf Weiter, um die Kontoerstellung abzuschließen.

Erstellen Sie Ihren Arbeitsbereich

1. Optional: Fügen Sie ein Profilbild hinzu - dieses wird öffentlich sichtbar sein.

2. Geben Sie einen Arbeitsbereichsnamen ein. Dieser Wert dient nur der Anzeige und hat keine Auswirkungen auf die mit Ihrem Arbeitsbereich verbundenen URLs .

3. Wählen Sie aus, wofür Sie Niantic 8th Wall verwenden möchten.

4. Wählen Sie aus, was Ihre Rolle am besten beschreibt.

5. Geben Sie eine Arbeitsbereich-URL ein. Wählen Sie für den Namen Ihres Arbeitsbereichs etwas Relevantes, z. B. den Namen Ihres Unternehmens .

WICHTIG: Dieser Wert wird als Standard Sub-Domain für ALLE von 8th Wall gehosteten Projekte in Ihrem Konto verwendet (z.B. mycompany.8thwall.app/project-name). Dieser Wert wird auch in der URL Ihrer öffentlichen Profilseite verwendet (z.B. www.8thwall.com/**mycompany**).

Sie können diesen Wert später nicht mehr ändern, wählen Sie also mit Bedacht!Hinweis: Wenn Sie benutzerdefinierte Domains mit Ihren von 8th Wall gehosteten Projekten verbinden möchten, um die Standard-URL zu überschreiben, lesen Sie bitte hier.

Ein neues Projekt starten

1. Klicken Sie auf der Startseite (eingeloggt) oder im Workspace Dashboard auf "Neues Projekt starten"

2. Wählen Sie den Hosting-Typ (nur Pro/Enterprise-Tarife): Entscheiden Sie im Voraus, ob das Projekt das neue Niantic Studio (jetzt in der öffentlichen Beta-Phase) oder den klassischen Cloud-Editor verwenden soll. Sowohl Niantic Studio als auch Editor werden von 8th Wall gehostet. Alternativ können Sie sich auch für das Selbst-Hosten entscheiden. Diese Einstellung kann später nicht mehr geändert werden. Das Selbst-Hosting ist nur für kostenpflichtige Pro/Enterprise-Arbeitsbereiche verfügbar.

3. Wählen Sie einen Projektnamen: Der Projektname wird sowohl in der Standard-Projekt-URL (z.B. mycompany.8thwall.app/project-name) als auch in der URL der Featured Project-Seite (z.B. www.8thwall.com/mycompany/project-name) verwendet. Sie kann später nicht mehr geändert werden.

4. Wählen Sie einen Lizenztyp (nur Pro/Enterprise)

Lizenztypen:

• Kommerziell: Kommerzielle Projekte sind für kommerzielle Nutzung bestimmt. Wenn Sie bereit sind, ein kommerzielles Projekt zu starten, damit die Welt es sehen kann, müssen Sie eine kommerzielle Lizenz erwerben. Informationen zu den kommerziellen Lizenzoptionen finden Sie auf der Preisseite unter . HINWEIS: Um eine kommerzielle Lizenz zu erwerben, muss der Arbeitsbereich zunächst über einen aktiven Pro-Plan verfügen.

• Demo-Nutzung: Sie können eine unbegrenzte Anzahl von Demo-Projekten erstellen, die öffentlich einsehbar sind und ausschließlich für die Präsentation potenzieller Arbeiten dienen. Auf dem Ladebildschirm erscheint der Hinweis „Nur für Demozwecke“. Wenn Sie sich zu irgendeinemZeitpunkt entscheiden, Ihr Projekt kommerziell zu nutzen, wechseln Sie im Projekt-Dashboard zu „Kommerziell“.

• Web App: Sie dürfen unter dieser Lizenz eine unbegrenzte Anzahl von Erstanbieterprojekten erstellen. Web-App-Projekte müssen den Startbildschirm aktivieren und sind auf 8thwall.com öffentlich einsehbar, sobald Sie sie veröffentlichen. Diese Lizenz erlaubt keine Projekte, die als Auftragsarbeiten erstellt werden, da diese eine kommerzielle Lizenz erfordern.

Alle Projekte müssen das Powered by 8th Wall Abzeichen auf der Ladeseite anzeigen. Es ist standardmäßig im Lademodul enthalten und kann nicht entfernt werden. Anweisungen zum Anpassen des Ladebildschirms finden Sie unter hier .

Vorlagenprojekt klonen

1. Nachdem Sie ein Projekt erstellt haben, wählen Sie eine Vorlage zum Klonen aus. Wählen Sie in dieser Anleitung "A-Frame: Tippen Sie auf Boden platzieren". Dieses interaktive Beispiel ermöglicht es dem Benutzer, 3D-Modelle auf der Oberfläche vor Ihnen zu erzeugen, indem er sie antippt. Hier werden Raycasting, das Instanziieren von Objekten, der Import von 3D-Modellen und das Animationssystem vorgestellt.

2. Auf dem folgenden Bildschirm wird eine Projekt-README angezeigt. [Optional] Um die Vorlage vor dem Klonen zu testen, klicken Sie auf die Schaltfläche Launch und scannen Sie den QR-Code mit Ihrem Telefon.

3. Klicken Sie auf die Schaltfläche Projekt klonen, um fortzufahren. Das Beispielprojekt wird in Ihren Arbeitsbereich geklont und der Cloud Editor wird geöffnet.

Simulator

1. Mit dem Simulator können Sie Projektänderungen in verschiedenen Geräteansichtsgrößen und simulierte reale Szenen testen und anzeigen, ohne dabei den Cloud Editor verlassen zu müssen. Der Simulator funktioniert, indem Sie die 8th Wall AR Engine in Echtzeit über die mitgelieferte Sammlung von voraufgezeichneten AR Sequenzen laufen lassen. Sie können den Simulator über die Schaltfläche „Vorschau“ oben im Fenster des Cloud-Editors aufrufen und die Option „Simulator“ auswählen. Sie können beliebig viele Simulatorinstanzen öffnen. Das ermöglicht es Ihnen, Projektänderungen in einer Vielzahl von Szenarien zu testen. Hinweis: Bestimmte Funktionen von AR wie Himmeleffekte, VPS, benutzerdefinierte Bildziele und Inline AR können derzeit nicht simuliert werden .

2. Sie können Ihr Ereignis in einer Reihe unterschiedlicher AR-Sequenzen simulieren, mit denen Sie Effekte wie Gesichtseffekte , Handverfolgung, Welteffekte, Absolutskala, Geteilte AR und viele weitere testen. Eine AR-Sequenz umfasst sowohl die Videoaufzeichnungsdaten als auch die Gyroskop- oder Orientierungsdaten des Geräts, sodass Sie AR simulieren können. Verwenden Sie das Menü „Sequenzauswahl“ unten links, um die AR-Sequenz zu ändern. Mit dem Karussell können sie zwischen den Optionen der Kategorie „Reihenfolge“ wechseln. Wenn Sie die Sequenz pausieren, wird nur das Video angehalten, sodass Sie Änderungen an demselben Bild testen können. Ziehen Sie an den Wiedergabegriffen, um Schleifenein- und -ausgänge festzulegen.

3. Die Live-Ansicht folgt der gleichen Logik wie die XR8-Konfiguration Ihres Projekts und ermöglicht es Ihnen, Ihr Projekt zu simulieren, indem Sie den Feed von Ihrem Desktop anstelle einer zuvor aufgezeichneten AR-Sequenz verwenden. Wenn Ihr Projekt zum Beispiel Gesichtseffekte verwendet und Sie den Cloud Editor auf dem Desktop geöffnet haben, wird er Ihre Desktop-Kamera öffnen, aber wenn Sie ein Welteffekt-Ereignis entwickeln und „allowedDevices: any“ in Ihrem Projekt aktiviert ist, sollte der „Desktop-Modus“ von Metaversal Deployment angezeigt werden. Hinweis: Die Live-Ansicht im Simulator kann Sie dazu auffordern, Kamera-, Mikrofon- oder Standortberechtigungen zu aktivieren, je nachdem, welche davon bereits in Ihrem Projekt aktiviert sind. Klicke auf „Erlauben“, wenn Sie dazu aufgefordert werden, um Ihre Ereignisse im Live View anzuzeigen.

4. Ihr Projekt kann auf verschiedenen Geräten aufgrund von Unterschieden in der Ansichtsgröße des mobilen Webs unterschiedlich angezeigt werden. Sie können Ihr Projekt aber auch im Quer- oder Hochformat anzeigen lassen. Oben links im Simulator können Sie aus einer Reihe gängiger Geräteansichtsgrößen auswählen, die Ausrichtung von ändern oder den responsiven Modus zur Anpassung an eine benutzerdefinierte Größe verwenden. Sie können auch auf die Ränder des Simulator-Panels doppelklicken, um den Simulator automatisch an die Breite des ausgewählten Gerätefensters anzupassen. Hinweis: Die Abmessungen werden in logischen CSS-Pixeln (AKA Viewport-Abmessungen) angegeben, nicht in physischen Gerätepixeln von . Bei der Auswahl eines Geräts aus dem Selektor werden nur die Abmessungen des Ansichtsfensters aktualisiert, nicht aber der User Agent des Clients.

5. Der Simulator verfügt über eine Reihe von Wiedergabesteuerungen und Komfortfunktionen wie:

• Abspielbalken, Scrubber und In-/Out-Griffe: Ermöglicht das Einrichten von Loop-Punkten, sodass Sie eine granulare Kontrolle über die ausgewählte Sequenz erhalten.
• Schaltfläche „Neu zentrieren“ (unten rechts): Ruft XR8.XrController.recenter()auf, wodurch die Kamera auf die Standardeinstellungzurückgesetzt wird. HINWEIS: Die Funktion „Neu zentrieren“ wird auch jedes Mal aufgerufen, wenn die Sequenz eine Schleife durchläuft und jedes Mal, wenn eine neue Sequenz ausgewählt wird.
• Schaltfläche „Aktualisieren“ (oben rechts): Aktualisiert die Seite, wobei zwischengespeicherte Inhalte erhalten bleiben. Wenn Sie die UMSCHALTTASTE gedrückt halten und auf auf die Schaltfläche „Aktualisieren“ klicken, wird eine vollständige Neuladung durchgeführt, wobei alle zwischengespeicherten Inhalte ignoriert werden.

Live-Vorschau

1. Klicken Sie oben im Fenster Cloud Editor auf die Schaltfläche Vorschau.

2. Scannen Sie den QR-Code mit Ihrem mobilen Gerät, um einen Webbrowser zu öffnen und eine Live-Vorschau des WebAR-Projekts zu sehen.

3. Wenn die Seite geladen wird, werden Sie aufgefordert, auf die Bewegungs- und Orientierungssensoren (auf einigen Geräten) und die Kamera (alle Geräte) zuzugreifen. Klicken Sie auf Zulassen für alle Berechtigungsabfragen. Sie werden von auf die private Entwicklungs-URL für dieses Projekt weitergeleitet.

Hinweis: Der "Vorschau"-QR-Code, der im Cloud Editor angezeigt wird, ist ein **temporärer, einmalig verwendbarer QR-Code ** nur für die Verwendung durch den Entwickler während der aktiven Arbeit im Cloud Editor gedacht. Dieser QR-Code führt Sie zu einer privaten, für die Entwicklung bestimmten URL, die für andere nicht zugänglich ist. Um Ihre Arbeit mit anderen zu teilen, lesen Sie bitte den Abschnitt unten über Veröffentlichen Sie Ihr Projekt.

4. Wenn die WebAR-Vorschau geladen ist, tippen Sie auf die Oberfläche vor Ihnen, um 3D-Modelle zu erzeugen.

5. Ergebnis:

Speichern, bauen und landen

Zu diesem Zeitpunkt haben Sie ein voll funktionsfähiges WebAR-Projekt und eine Vorschau auf einem mobilen Gerät. Als Nächstes nehmen Sie eine sehr kleine Codeänderung vor, um zu veranschaulichen, wie Sie das Projekt aktualisieren, eine Vorschau des neuen Codes anzeigen, aufrufen und die Änderungen in die Versionskontrolle übernehmen.

1. Nehmen Sie innerhalb von body.html des Cloud Editor-Projekts eine kleine Textänderung am promptText vor. Für das Beispiel ändern Sie einfach den Text von Tap To Place Model in Tap To Begin.

2. Klicken Sie auf Save + Build, um Ihre Arbeit zu speichern und einen neuen Cloud-Build Ihres Projekts zu initiieren.

3. Wenn Ihr mobiler Browser nach dem Scannen des QR-Codes Preview in Schritt 2 noch geöffnet ist, wird Ihr Telefon automatisch neu geladen, sobald der Build abgeschlossen ist. Wenn die mobile Browserseite nicht mehr geöffnet ist, scannen Sie den QR-Code für die Vorschau erneut, um eine Vorschau Ihrer Aktualisierungen des Projekts anzuzeigen.

4. Sobald Sie mit Ihren Änderungen zufrieden sind, landen **** den aktualisierten Code in der integrierten Versionskontrolle des Cloud Editors . Klicken Sie oben rechts im Fenster Cloud Editor auf Land. Die Schaltfläche ist grün und zeigt an, dass es Änderungen im Projekt gibt, die noch nicht in die Quellcodekontrolle übernommen wurden:

5. Geben Sie in das Feld Nachricht eine kurze Nachricht ein, in der Sie die vorgenommenen Änderungen beschreiben, und klicken Sie dann auf Land:

Veröffentlichen Sie Ihr Projekt

Der letzte Schritt besteht darin, Ihren aktualisierten und gelandeten Projektcode mit 8th Walls integriertem Hosting zu veröffentlichen. Dadurch kann das Projekt von jedem im Internet eingesehen werden.

Hinweis: Kommerzielle Projekte erfordern zusätzliche kommerzielle Lizenzen, wenn sie gestartet werden. Siehe https://www.8thwall.com/pricing für weitere Informationen.

Alle Projekte müssen das Powered by 8th Wall Abzeichen auf der Ladeseite anzeigen. Es ist standardmäßig im Lademodul enthalten und kann nicht entfernt werden. Anweisungen zum Anpassen des Ladebildschirms finden Sie unter hier .

1. Klicken Sie oben rechts im Fenster des Cloud-Editors auf Veröffentlichen

2. Im Modal Projekt veröffentlichen sehen Sie eine Liste der Commits (eine für jede Version des Codes , die Sie in der Versionskontrolle hinterlegt haben) sowie die URLs für Entwicklung, Staging und Öffentlichkeit für das Projekt . Wählen Sie die oberste Optionsschaltfläche in der Spalte Public, um die letzte/aktuellste Version des Codes auf der öffentlichen URL des Projekts bereitzustellen, und klicken Sie dann auf Publish:

3. Schließen Sie den Veröffentlichungsprozess ab, indem Sie Ihrem Projekt einen Titel, eine Beschreibung und ein Titelbild geben. Diese Informationen werden auf Ihrer Projektseite und als Vorschau angezeigt, wenn Sie sie auf sozialen Plattformen und in Messaging-Apps teilen.

Das öffentliche Projekt ansehen

1. Gehen Sie zurück zum Projekt-Dashboard in der linken Navigation. Im Abschnitt QR 8.code wird die URL des öffentlichen Projekts zusammen mit einem 8th.io Shortlink und dem zugehörigen QR-Code angezeigt.

2. Scannen Sie den QR-Code mit Ihrem mobilen Gerät, um das Public WebAR-Erlebnis zu sehen.