MyOOS Community Blog

Metaverse Experience im MyOOS Projekt

r23

Freitags veröffentlichen wir zurzeit unsere aktuelle MyOOS Version. An diesem Freitag liegt dem Projekt der VR-Raum bei. Selbstverständlich noch nicht fertig und überhaupt mehr Baustelle als Erlebnisraum. Aber das MyOOS Konzept wird bereits deutlich.

Was sind die Vorteile von einem immersiven Showroom im VR-Commerce?

Ein Immersive-Service-Showroom im VR-Commerce kann für einen Shopbetreiber verschiedene Vorteile bieten, darunter:

Es ist wichtig zu beachten, dass die Implementierung eines Immersive-Service-Showrooms im VR-Commerce eine komplexe und kostspielige Angelegenheit sein kann.

Welche Möglichkeiten bietet ein immservicen Showroom im VR-Commerce für die Präsentation von Produkten

Ein Immersive-Service-Showroom im VR-Commerce bietet verschiedene Möglichkeiten für die Präsentation von Produkten, darunter:

Wie kann ein VR-Showroom das Einkaufserlebnis für Kunden verbessern

Ein VR-Showroom kann das Einkaufserlebnis für Kunden verbessern, indem er ihnen ermöglicht, die Produkte in einer realistischen und interaktiven Umgebung zu erleben. Ein VR-Showroom bietet folgende Vorteile:

Wie kann ich einen VR-Showroom erstellen?

Um einen VR-Showroom zu erstellen, müssen Sie zunächst entscheiden, welche Technologie Sie verwenden möchten. Es gibt verschiedene Möglichkeiten, einen virtuellen Ausstellungsraum zu gestalten, je nach Ihren Zielen, Ressourcen und Anforderungen. Hier sind einige gängige Optionen:

Nachdem du dich für eine Technologie entschieden hast, musst du die folgenden Schritte durchführen, um deinen VR-Showroom zu erstellen:

  1. Plane das Design und das Layout deines Showrooms. Überlege dir, welche Produkte du präsentieren möchtest, wie du sie anordnen möchtest, welche Informationen du bereitstellen möchtest und wie du die Kunden durch den Raum führen möchtest.
  2. Erstelle die Inhalte für deinen Showroom. Je nach gewählter Technologie musst du entweder reale Räume oder Objekte fotografieren oder scannen, künstliche Räume oder Objekte modellieren und rendern oder Web-basierte 3D-Inhalte programmieren.
  3. Veröffentliche deinen Showroom online. Je nach gewählter Technologie musst du entweder eine virtuelle Tour aus deinen 360°-Fotos oder 3D-Scans erstellen, eine virtuelle Umgebung aus deinen 3D-Modellen und Renderings zusammenstellen oder eine WebXR-Anwendung aus deinen Web-Inhalten entwickeln. Dann musst du deinen Showroom auf einer Webseite einbinden oder auf einem Server hosten.

Ich hoffe, das gibt dir einen Überblick über den Prozess der Erstellung eines VR-Showrooms.

Das MyOOS Metaverse Experience Projekt ist ein WebXR Projekt

Das Open-Source-Projekt liegt in dem Verzeichnis metaverse-experience

asset In dem Verzeichnis findest du die 3D-Inhalte in Blender Format

dist in dem Verzeichnis findest du die WebXR-Anwendung,

Die anderen Dateien und Verzeichnisse gehören zu der Entwicklungsumgebung. Das MyOOS Projekt verwendet Visual Studio Code und Node.js

Für Visual Studio Code gibt es auf Udemy zurzeit einen kostenlosen zweistündigen Kurs.

https://www.udemy.com/course/einfuhrung-in-visual-studio-code/

Für die Veröffentlichung verwenden wir webpack. Damit benötigen Shopbetreiber keine Node.js Umgebung auf dem Server. Wie wir dies machen habe ich in dem Blogbeitrag Metaverse Experience: webpack code splitting beschrieben.

Das MyOOS Projekt legt großen Wert auf die Sicherheit. Vor diesem Hintergrund wurde für das Projekt bereits in dieser frühen Phase eine Content-Security-Policy eingerichtet. Wie und Warum steht in unserem Blogbeitrag Content-Security-Policy für unseren VR-Commerce Shop


Das Navmesh

In dem Blogbeitrag Projekt: Einen NPCs (Non-Player-Charaktere) mit Tensorflow.js in unserem VR-Commerce bewegen beschreibe ich die Funktion und Aufgabe von einem Navmesh. Und geben einen Ausblick, wie wir dies verwenden könnten.

WebXR-Anwendung

Wie laden ein Navmesh in unsere WebXR-Anwendung mit dem Attribut visible="false", was bedeutet, dass das Navmesh unsichtbar ist. Wenn du es sichtbar machen möchtest, musst du  visible="true" setzen oder das Attribut ganz weglassen, da der Standardwert true ist1.

Das Attribut normal-material ist kein Standard-Attribut, sondern gehört zu einem Komponentenpaket. Damit du das Komponentenpaket verwenden kannst, haben wir dies für dich bereits in deine HTML-Dokument eingebunden. Das normal-material zeigt die Normalenvektoren der Oberfläche an, was nützlich für Debugging-Zwecke sein kann.

      <!-- Nav mesh. -->
            <a-entity nav-mesh
                visible="true"
		normal-material
                position="0 0 20"
                gltf-model="#navmesh"></a-entity>

Kamerarotation

Um die Blickrichtung der Kamera zu ändern, wenn die Metaverse-Experience Szene geladen wird, kannst du das Attribut rotation der Kamera verwenden. Dieses Attribut legt die Rotation der Kamera in Grad um die x-, y- und z-Achse fest. Zum Beispiel, um die Kamera um 90 Grad nach links zu drehen, kannst du folgenden Code verwenden:

  <!-- Player. -->
  <a-entity id="rig"
            movement-controls="constrainToNavMesh: true;
                               controls: checkpoint, gamepad, trackpad, keyboard, touch;"
            position="-7 0 21">
    <a-entity camera
              position="0 1.6 0"
              look-controls="pointerLockEnabled: true"
              rotation="0 -90 0"> <!-- Hier wird die Rotation gesetzt -->
      <a-cursor></a-cursor>
    </a-entity>
  </a-entity>

Du kannst auch eine Komponente erstellen, die die Rotation der Kamera dynamisch anpasst

Der VR Button fehlt

Es kann sein, dass Dein Enter VR Button fehlt oder falsch platziert ist, weil deine Szene in einem <div> eingebettet ist, der die Positionierung des Buttons beeinflusst. Du kannst versuchen, den Container-Stil auf position: absolute; height: 100%; width: 100%; zu setzen1.

Es könnte auch sein, dass du eine benutzerdefinierte Enter VR Button verwenden möchtest. Du kannst das Attribut vr-mode-ui="enterVRButton: #myEnterVRButton" auf Deine <a-scene> setzen und den Button mit CSS gestalten.

Was ist der Unterschied zwischen embedded und fullscreen in A-Frame?

Der Unterschied zwischen embedded und fullscreen in A-Frame ist, dass embedded das <canvas>-Element von A-Frame in die bestehende Webseite einbettet, während fullscreen das <canvas>-Element über die gesamte Bildschirmgröße anzeigt.

Wenn du embedded verwendest, musst du die Größe und Position des <a-scene>-Elements mit CSS festlegen, als ob es ein leerer <div> wäre. Außerdem wird der Enter VR Button kleiner und kann mit dem Attribut vr-mode-ui angepasst werden. Embedded eignet sich für Szenen, die mit dem Rest der 2D-Seite interagieren oder integriert werden sollen.

Das MyOOS Projekt verwendet fullscreen verwenden, hier wird das <canvas>-Element standardmäßig mit einer festen Positionierung versehen, die es über alle anderen HTML-Elemente legt. Der Enter VR Button wird größer und befindet sich in der unteren rechten Ecke. Fullscreen eignet sich für Szenen, die den gesamten Bildschirm ausfüllen sollen oder keine Interaktion mit dem Rest der 2D-Seite benötigen.

Kann ich zwischen embedded und fullscreen wechseln, während meine Szene läuft?

Ja, du kannst zwischen embedded und fullscreen wechseln, während deine Szene läuft, indem du eine Funktion erstellst, die die Eigenschaften des <canvas>-Elements ändert. Zum Beispiel kannst du folgenden Code verwenden:

script> // Eine Funktion, die den Fullscreen-Modus ein- oder ausschaltet function toggleFullscreen() { // Das <canvas>-Element aus der Szene holen var canvas = document.querySelector(“a-scene”).canvas; // Prüfen, ob der Fullscreen-Modus aktiv ist 
var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; // Wenn der Fullscreen-Modus aktiv ist, ihn beenden 
if (isFullscreen) { 
if (document.exitFullscreen) { 
document.exitFullscreen(); 
} else if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} else if (document.webkitExitFullscreen) { 
document.webkitExitFullscreen(); 
} else if (document.msExitFullscreen) { 
document.msExitFullscreen(); } // Das <canvas>-Element wieder in den ursprünglichen Zustand bringen 
canvas.style.position = “”; canvas.style.height = “”; canvas.style.width = “”; // Wenn der Fullscreen-Modus nicht aktiv ist, ihn starten 
} else { 
if (canvas.requestFullscreen) { 
canvas.requestFullscreen(); 
} else if (canvas.mozRequestFullScreen) { 
canvas.mozRequestFullScreen(); 
} else if (canvas.webkitRequestFullscreen) { 
canvas.webkitRequestFullscreen(); 
} else if (canvas.msRequestFullscreen) { 
canvas.msRequestFullscreen(); } // Das <canvas>-Element über die gesamte Bildschirmgröße anpassen 
canvas.style.position = “fixed”; canvas.style.height = “100%”; canvas.style.width = “100%”; 
} } 
</script>

Du kannst diese Funktion dann mit einem Button oder einem anderen Ereignis aufrufen. Zum Beispiel:

<button onclick=“toggleFullscreen()”>Wechseln zwischen embedded und fullscreen</button>

Metaverse Experience in full screen

Um beim Start der Metaverse Experienc-Szene fullscreen zu verwenden und nicht embedded, musst du e das Attribut embedded von deiner <a-scene> entfernen oder auf false setzen. Zum Beispiel:

<a-scene nonce=“<?php echo $nonce; ?>” vr-mode-ui=“enabled: true”>

oder

<a-scene nonce=“<?php echo $nonce; ?>” embedded=“false” vr-mode-ui=“enabled: true”>

Das Attribut embedded bestimmt, ob das <canvas>-Element von A-Frame in die bestehende Webseite eingebettet wird oder die gesamte Bildschirmgröße einnimmt. Wenn du es auf true setzt oder weglässt, wird der fullscreen-Modus aktiviert.

Hinweis

Dieser Blogbeitrag ist als praktischer Leitfaden gedacht und behandelt keine theoretischen Hintergründe.

Dieses Metaverse Experience Tutorial entstand am 31.08.2023. Ich verwende eine Node.JS Umgebung mit Visual Studio Code Version: 1.81.1 unter Windows 11. Der Inhalt ist für unser Open Source Metaverse Commerce & Sales Projekt gedacht.

Für die Richtigkeit der Inhalte dieses Tutorials gebe ich keinerlei Garantie. Der hier gezeigte Weg ist nicht der einzige, es ist lediglich, der, den ich bevorzuge.

Die mobile Version verlassen