Zum Hauptinhalt springen

Importieren von XRExtras in Cloud Editor

Dieser Teil der Dokumentation ist für fortgeschrittene Benutzer gedacht, die den 8th Wall Cloud Editor verwenden und eine vollständig angepasste Version von XRExtras erstellen müssen. Dieser Prozess umfasst:

  • Klonen des XRExtras-Codes von GitHub
  • Importieren von Dateien in Ihr Cloud Editor-Projekt
  • Durchsuchen aller .js-Dateien und Anpassen der Exporte
  • Aktualisieren Sie Ihren Code, um Ihre lokale, benutzerdefinierte Kopie von XRExtras zu verwenden, anstatt unsere Standardversion aus dem CDN zu beziehen (über Meta-Tag)

Wenn Sie nur grundlegende Anpassungen des XRExtras-Ladebildschirms vornehmen müssen, lesen Sie bitte stattdessen diesen Abschnitt .

Hinweis: Wenn Sie eine Kopie von XRExtras in Ihr Cloud Editor-Projekt importieren, erhalten Sie nicht mehr die neuesten XRExtras-Updates und -Funktionen, die im CDN verfügbar sind. Stellen Sie sicher, dass Sie immer die neueste Version des XRExtras-Codes von GitHub ziehen, wenn Sie neue Projekte beginnen.

Anweisungen:

  1. Erstellen Sie einen Ordner myxrextras innerhalb Ihres Cloud Editor-Projekts

  2. Klonen Sie https://github.com/8thwall/web

  3. Fügen Sie den Inhalt des Verzeichnisses xrextras/src/ (https://github.com/8thwall/web/tree/master/xrextras/src) zu Ihrem Projekt hinzu, mit der Ausnahme der index.js

  4. Der Inhalt Ihres Projekts wird in etwa so aussehen:

xrextras files

  1. Entfernen Sie in head.html den `` Tag für @8thwall.xrextras oder kommentieren Sie ihn aus, damit er nicht mehr von unserem CDN bezogen wird:

xrextras head

  1. Importieren Sie in app.js Ihre lokale xrextras-Bibliothek:

xrextras appjs

  1. Gehen Sie alle *.js-Dateien unterhalb von myxrextras/ durch und ersetzen Sie alle module.exports durch export:

Beispiele:

myxrextras/aframe/aframe.js:

xrextras code1

myxrextras/aframe/aframe.js:

xrextras code2

Ändern/Hinzufügen von Bild-Assets​

Ziehen Sie zunächst neue Bilder per Drag & Drop nach assets/, um sie in Ihr Projekt hochzuladen:

xrextras asset

In html Dateien mit src Parametern, verweisen Sie auf das Bild-Asset mit einem relativen Pfad:

<img src="​../../assets/​my-logo.png" id="loadImage" class="spin" />

Verwenden Sie in javascript Dateien einen relativen Pfad undrequire(), um auf Assets zu verweisen:

img.src = require('../../assets/mein-logo.png')