Site icon Atelier für 3D-Visualisierungen, V/AR. Produktvisualisierung und Rendering. ❤ r23

VR Kaufhaus – Open-Source-Projekt

Ralf Dreiundzwanzig

Unser Atelier entwirf und erstellt ein immersive Shoppingerlebnis. Und das Beste daran. Es ist Open Source und jeder kann es verwenden.

Open Source Projekt

Open-Source-Softwareentwicklung ist eine spannende und lohnende Aktivität, die viele Vorteile für die persönliche und berufliche Entwicklung bietet. Indem man an Open-Source-Projekten teilnimmt, kann man nicht nur seine Programmierfähigkeiten verbessern, sondern auch mit anderen Entwicklern aus der ganzen Welt zusammenarbeiten, von ihnen lernen und Feedback erhalten. Außerdem kann man einen Beitrag zur Gesellschaft leisten, indem man Software erstellt, die frei zugänglich, anpassbar und nutzbar ist. Open-Source-Softwareentwicklung ist also eine Möglichkeit, seine Leidenschaft für das Programmieren auszudrücken, seine Kreativität zu fördern und seine Kompetenzen zu erweitern.

Was sind einige Vorteile der Teilnahme an Open-Source-Projekten?

Die Teilnahme an Open-Source-Projekten hat viele Vorteile, sowohl für die persönliche als auch für die berufliche Entwicklung. Hier sind einige davon:

- Gewinn von Programmiererfahrung: Indem Sie an Open-Source-Projekten mitwirken, können Sie Ihre Programmierfähigkeiten verbessern, neue Technologien erlernen, Ihren Code-Stil verfeinern und von anderen Entwicklern*innen Feedback erhalten.
- Erstellung einer praktischen Zusammenfassung: Ihre Beiträge zu Open-Source-Projekten können als Nachweis Ihrer Fähigkeiten und Erfahrungen dienen. Sie können potenziellen Arbeitgebern*innen oder Kunden*innen zeigen, was Sie geleistet haben und wie Sie mit anderen zusammengearbeitet haben.
- Verwendung des Produkts: Wenn Sie an einem Open-Source-Projekt teilnehmen, das Sie selbst nutzen oder das Ihnen nützlich ist, können Sie es an Ihre Bedürfnisse anpassen, Fehler beheben oder neue Funktionen hinzufügen. Sie profitieren direkt von Ihrer Arbeit und helfen gleichzeitig anderen Nutzern*innen.
- Förderung von Open-Source-Kultur: Indem Sie an Open-Source-Projekten teilnehmen, unterstützen Sie die Werte von Offenheit, Transparenz, Zusammenarbeit und Innovation. Sie tragen zu einer Gemeinschaft bei, die das gemeinsame Wissen und die gemeinsame Nutzung fördert.
- Zurückgeben an die Gemeinschaft: Indem Sie an Open-Source-Projekten teilnehmen, können Sie einen Beitrag zur Gesellschaft leisten, indem Sie Software erstellen, die frei zugänglich, anpassbar und nutzbar ist. Sie können auch anderen Entwicklern*innen helfen, indem Sie ihnen Feedback geben, sie unterstützen oder sie schulen.

Sie können an der Entwicklung von dem Kaufhaus teilnehmen. In unserem Forum bieten wir Ihnen eine Einführung und Raum: Mitmachen! Einstieg in die MyOOS-Entwicklung.

Erste Frage: die Machbarkeit

Ja, es ist technisch möglich, ein Kaufhaus in 3D mit zu entwerfen und dann mit A-Frame und Three.js als VR-Erlebnis auf einer Webseite zu veröffentlichen. Blender ist ein leistungsstarkes 3D-Modellierungsprogramm, das für die Erstellung von 3D-Modellen und -Szenen verwendet werden kann. A-Frame und Three.js sind JavaScript-basierte Frameworks für die Erstellung von VR-Erlebnissen im Web.

Um ein Kaufhaus in 3D mit zu entwerfen, können Sie das Modell in einem unterstützten Format wie glTF oder OBJ exportieren. Dann können Sie das Modell in A-Frame oder Three.js importieren und es in eine VR-Umgebung einbetten. A-Frame bietet Komponenten für das Laden von glTF-Modellen, während Three.js verschiedene Dateiformate unterstützt, einschließlich glTF, OBJ und FBX.

Es ist wichtig zu beachten, dass die Integration von 3D-Modellen in A-Frame und Three.js spezifisch für das Projekt sein wird.

Wie kann man sicherstellen, dass das 3D-Modell in VR korrekt dargestellt wird?

Um sicherzustellen, dass das 3D-Modell in VR korrekt dargestellt wird, können Sie folgende Schritte unternehmen:

  1. Verwenden Sie das richtige Dateiformat: Für die Darstellung von 3D-Modellen in VR wird das glTF-Format empfohlen. Es ist ein offenes Standardformat, das speziell für die Übertragung von 3D-Modellen im Web entwickelt wurde. Es wird von den meisten VR-Frameworks wie Three.js und A-Frame unterstützt.
  2. Überprüfen Sie die Skalierung: Stellen Sie sicher, dass die Skalierung des 3D-Modells korrekt ist, um eine realistische Darstellung in VR zu gewährleisten. Überprüfen Sie auch, ob die Einheiten des Modells korrekt sind, um eine konsistente Darstellung zu gewährleisten.
  3. Testen Sie das Modell in VR: Verwenden Sie ein VR-Headset, um das 3D-Modell in VR zu testen. Überprüfen Sie, ob die Perspektive und die Größe des Modells korrekt sind und ob es keine Verzerrungen oder Artefakte gibt.
  4. Optimieren Sie das Modell: Optimieren Sie das 3D-Modell, um die Leistung in VR zu verbessern. Reduzieren Sie die Anzahl der Polygone und Texturen, um die Ladezeit zu verkürzen und die Leistung zu verbessern.

Wie kann ich im VR Raum mich von einem Punkt zum anderen Punkt portieren?

Um sich in einem VR-Raum von einem Punkt zum anderen zu teleportieren, können Sie die folgenden Schritte unternehmen:

  1. Verwenden Sie eine Teleportationskomponente: A-Frame bietet eine Teleportationskomponente, die es Benutzern ermöglicht, sich in einem VR-Raum zu teleportieren. Diese Komponente kann durch Hinzufügen des "teleport-controls"-Attributs zu einem A-Frame-Element aktiviert werden.
  2. Konfigurieren Sie die Teleportationskomponente: Die Teleportationskomponente kann konfiguriert werden, um die Position und Ausrichtung des Benutzers beim Teleportieren zu steuern. Sie können die Position und Ausrichtung des Zielorts festlegen, zu dem der Benutzer teleportiert werden soll.
  3. Verwenden Sie VR-Controller: Die Teleportationskomponente kann auch mit VR-Controllern verwendet werden, um die Navigation in einem VR-Raum zu erleichtern. Benutzer können den VR-Controller verwenden, um den Zielort auszuwählen und sich dann zu teleportieren.

Welche VR-Controller werden von A-Frame unterstützt, um die Portierungsfunktion zu nutzen?

A-Frame unterstützt eine Vielzahl von VR-Controllern, um die Portierungsfunktion zu nutzen. Hier sind einige der unterstützten VR-Controller, die in den Suchergebnissen gefunden wurden:

  1. Oculus Touch: A-Frame bietet native Unterstützung für Oculus Touch-Controller, die mit Oculus Rift und Oculus Quest verwendet werden können.
  2. HTC Vive Controller: A-Frame bietet auch native Unterstützung für HTC Vive-Controller, die mit HTC Vive und HTC Vive Pro verwendet werden können.
  3. Windows Mixed Reality Controller: A-Frame unterstützt auch Windows Mixed Reality-Controller, die mit Windows Mixed Reality-Headsets verwendet werden können.
  4. Google Daydream Controller: A-Frame bietet auch Unterstützung für Google Daydream-Controller, die mit Google Daydream-Headsets verwendet werden können.

Welche Bewegungssteuerungen werden von A-Frame unterstützt?

A-Frame unterstützt eine Vielzahl von Bewegungssteuerungen, um die Navigation in VR-Erlebnissen zu ermöglichen. Hier sind einige der unterstützten Bewegungssteuerungen, die in den Suchergebnissen gefunden wurden:

  1. VR-Controller: A-Frame bietet native Unterstützung für eine Vielzahl von VR-Controllern, einschließlich Oculus Touch, HTC Vive Controller, Windows Mixed Reality Controller und Google Daydream Controller.
  2. Bewegungssteuerungen: A-Frame bietet auch Unterstützung für Bewegungssteuerungen wie die Bewegungserkennung von Smartphones oder Tablets. Diese Steuerungen können verwendet werden, um die Bewegung des Benutzers in einem VR-Erlebnis zu steuern.
  3. Tastatur und Maus: A-Frame bietet auch Unterstützung für die Verwendung von Tastatur und Maus zur Navigation in VR-Erlebnissen. Diese Steuerungen können verwendet werden, um die Bewegung des Benutzers in einem VR-Erlebnis zu steuern.
  4. Blicksteuerung: A-Frame bietet auch Unterstützung für Blicksteuerung, bei der der Benutzer durch das Betrachten eines bestimmten Bereichs im VR-Raum navigieren kann.

Wie funktioniert die Teleportationskomponente im VR Framework: A-Frame?

Die Teleportationskomponente in A-Frame ermöglicht es Ihnen, sich in einer virtuellen Umgebung zu bewegen, indem Sie einen Zielort mit einem Controller auswählen und dann dorthin springen. Sie können die Teleportationskomponente zu einem beliebigen Element hinzufügen, das als Controller fungiert, z.B. zu einer Hand oder einem Laserpointer. Sie müssen auch die Kollisionsobjekte angeben, auf denen Sie teleportieren können, z.B. den Boden oder die Wände.

Die Teleportationskomponente zeigt eine gekrümmte Linie an, die den Pfad des Teleports darstellt, und ein Objekt, das den Trefferpunkt anzeigt. Sie können diese Elemente anpassen, indem Sie verschiedene Eigenschaften der Komponente ändern. Wenn Sie mehr über die Teleportationskomponente erfahren möchten, können Sie sich diese Artikel ansehen.

Developing an A-Frame Teleport Component – A-Frame (aframe.io)

GitHub - jure/aframe-blink-controls: A teleport (blink with rotation) component for A-Frame

Wofür kann man ammo.js verwenden?

Ammo.js ist eine JavaScript-Bibliothek, die eine direkte Portierung der Bullet-Physik-Engine darstellt. Sie ermöglicht Entwicklern die Verwendung von Physiksimulationen in JavaScript-Anwendungen, einschließlich Spielen, Simulationen und anderen interaktiven Erlebnissen. Die Bullet-Physik-Engine ist eine beliebte und leistungsstarke Physik-Engine, die in verschiedenen Plattformen und Programmiersprachen verwendet wird.

Ammo.js wird oft in Verbindung mit WebGL-Bibliotheken wie Three.js oder Babylon.js verwendet, um realistische physikbasierte Interaktionen und Simulationen zu webbasierten 3D-Anwendungen hinzuzufügen. Ammo.js bietet Funktionen wie Rigid Body Dynamics, Kollisionserkennung, Raycasting und Constraints, mit denen Entwickler realistische Physiksimulationen im Browser erstellen können.

Einige häufige Anwendungsfälle für Ammo.js sind:

Was ist WebAssembly und wie wird es von ammo.js genutzt

WebAssembly (oft als wasm abgekürzt) ist ein binäres Befehlsformat, das die Ausführung von Code in Webbrowsern mit nahezu natürlicher Geschwindigkeit ermöglicht. Es ist als effizientes und sicheres Low-Level-Format konzipiert, das in modernen Webbrowsern ausgeführt werden kann. WebAssembly ermöglicht es Entwicklern, leistungsstarke Anwendungen in Sprachen wie C, C++ und Rust zu schreiben und im Browser auszuführen.

Ammo.js ist eine direkte Portierung der Bullet-Physik-Engine auf JavaScript mit Emscripten, einem Compiler, der C- und C++-Code in WebAssembly übersetzt. Ammo.js nutzt WebAssembly, um die Leistungsfähigkeit der Bullet-Physik-Engine ins Web zu bringen. Durch den Einsatz von WebAssembly kann Ammo.js hochleistungsfähige Physiksimulationen in JavaScript erreichen, die es Entwicklern ermöglichen, realistische physikbasierte Interaktionen in webbasierten Anwendungen zu erstellen.

Die Verwendung von WebAssembly in Ammo.js bietet mehrere Vorteile, darunter:

Es ist wichtig zu wissen, dass Ammo.js zwar WebAssembly verwendet, aber auch einen JavaScript-Fallback für Browser bietet, die WebAssembly nicht unterstützen. Dadurch wird eine breitere Kompatibilität gewährleistet und Ammo.js kann in einer Vielzahl von Webumgebungen verwendet werden.

Weitere Informationen über die Verwendung von WebAssembly in Verbindung mit der Bibliothek finden Sie in der offiziellen Dokumentation und in den Beispielen von Ammo.js.

Raum Entwürfe

Virtual-Realität-Erlebnis in einem neuen Browser-Tab öffnen.

Virtual-Realität-Erlebnis in einem neuen Browser-Tab öffnen.

Ich persönlich tendiere zurzeit mehr zum unteren Entwurf. Diese Woche werden wir weitere Ideen sammeln und dann mit der Umsetzung beginnen. Wenn Sie mitarbeiten möchten, finden Sie bei unserem Projekt weitere Informationen Mitmachen! Einstieg in die MyOOS-Entwicklung.

Wenn Sie schon immer einen Verkaufsraum in der Virtual Reality haben wollten, aber es an der Umsetzung scheiterte, können Sie uns Ihre Wünsche gerne in den Kommentaren mitteilen.

Welcher VR Raum gefällt Ihnen von den oben Gezeigten am besten?

Finanzielle Unterstützung

Sie können mit PayPal Me
https://www.paypal.com/paypalme/r23de?locale.x=de_DE

oder über den QR-Code Geld an das MyOOS Projekt senden.

Das -Export-

Vor wenigen Tagen ich auf GitHub ein Export Script für A-Frame gefunden. Hier die Quellen

https://github.com/r23/aframe_blender_exporter

Das -Export- scheint ein sinnvoller Weg zu sein, um 3D-Modelle aus in A-Frame zu importieren. Es erlaubt Ihnen, eine .html-Datei zu exportieren, die bereits die A-Frame-Szene mit Ihren Modellen enthält. Sie können diese Datei dann in Ihrem Browser öffnen oder auf einen Webserver hochladen. Das Plugin unterstützt auch Animationen, Materialien und Lichter aus Blender

Eine andere Möglichkeit ist, die 3D Modelle aus im glTF-Format zu exportieren und dann den GLTFLoader von three.js zu verwenden, um sie in eine A-Frame-Szene zu laden. glTF ist ein offener Standard für 3D-Modelle im Web und wird von der three.js-Dokumentation empfohlen. Um glTF aus Blender zu exportieren, müssen Sie das glTF 2.0 Exporter Add-on installieren. Es gibt einige Besonderheiten, die Sie beachten müssen, wenn Sie PBR-Materialien, Armaturen, Knochen oder Morph-Ziele aus Blender exportieren wollen.

Beide Methoden haben ihre Vor- und Nachteile, je nachdem, wie komplex die 3D-Modelle sind und wie viel Kontrolle Sie über die Szene haben wollen. Sie können beide ausprobieren und sehen, welche für Ihre Zwecke besser geeignet ist.

Wie kann ich eine glTF-Datei mit dem GLTFLoader von three.js in eine A-Frame-Szene laden?

Öffnen Sie Ihr 3D-Modell in und wählen Sie File > Export > glTF 2.0. Wählen Sie die Optionen, die Sie für Ihren Export benötigen, wie z.B. ob Sie Animationen, Materialien oder Lichter exportieren wollen. Beachten Sie, dass es einige Besonderheiten gibt, die Sie beachten müssen, wenn Sie PBR-Materialien, Armaturen, Knochen oder Morph-Ziele aus Blender exportieren wollen.

Speichern Sie Ihre .gltf- oder .glb-Datei an einem Ort, auf den Sie zugreifen können.

Erstellen Sie eine A-Frame-Szene in HTML und fügen Sie den GLTFLoader von three.js als Skript hinzu. 

Verwenden Sie das gltf-model-Attribut, um Ihre glTF-Datei in Ihre A-Frame-Szene zu laden. Zum Beispiel: <a-entity gltf-model="url(zu/Ihrer/gltf/Datei)"></a-entity>. Sie können auch die Position, Rotation und Skalierung Ihrer Modelle anpassen.

Öffnen Sie Ihre HTML-Seite in einem Browser, der WebVR unterstützt, und genießen Sie Ihre A-Frame-Szene mit Ihren glTF-Modellen.

Der Code könnte so aussehen:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>A-Frame mit GLTFLoader</title>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <!-- Laden Sie das Skript für den GLTFLoader von three.js -->
  <script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
</head>
<body>
  <!-- Erstellen Sie eine A-Frame-Szene -->
  <a-scene>
    <!-- Fügen Sie eine Kamera mit einem Cursor hinzu -->
    <a-camera position="0 1.6 0">
      <a-cursor></a-cursor>
    </a-camera>
    <!-- Fügen Sie eine Lichtquelle hinzu -->
    <a-light type="ambient" color="#fff"></a-light>
    <!-- Laden Sie Ihre glTF-Datei in die Szene -->
    <a-entity gltf-model="url(zu/Ihrer/gltf/Datei)"></a-entity>
  </a-scene>
</body>
</html>

Sie können diesen Code in eine Datei mit der Endung .html speichern und sie dann in Ihrem Browser öffnen. Stellen Sie sicher, dass Sie die URL zu Ihrer glTF-Datei korrekt angeben. Wenn Sie keine glTF-Datei haben, können Sie einige Beispiele von https://github.com/r23/glTF-Sample-Models herunterladen.

Was ist aframe-extras.min.js?

aframe-extras ist eine Sammlung von Add-ons und Helfern für A-Frame VR. Um die aframe-extras.min.js Datei herunterzuladen, können Sie eine der folgenden Möglichkeiten nutzen:

Wie kann ich aframe-extras in meinem Projekt verwenden?

Um aframe-extras in Ihrem Projekt zu verwenden, gibt es verschiedene Möglichkeiten, je nachdem, ob Sie Skripte oder NPM verwenden. Hier sind einige Schritte, die Sie befolgen können:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<!-- Laden Sie das Skript für aframe-extras -->
<script src="aframe-extras.min.js"></script>

npm install --save aframe-extras

Dann müssen Sie das Paket in Ihrem JavaScript-Code importieren und die Komponenten registrieren, die Sie verwenden möchten. Zum Beispiel:

// index.js
var extras = require('aframe-extras');
// Registrieren Sie eine einzelne Komponente.
AFRAME.registerComponent('checkpoint', extras.misc.checkpoint);
// Registrieren Sie ein bestimmtes Paket und seine Abhängigkeiten.
extras.controls.registerAll();
// Registrieren Sie alles.
extras.registerAll();

Schließlich müssen Sie Ihr JavaScript mit einem Tool wie webpack kompilieren.

Wie kann ich meine VR-Szene mit A-Frame und aframe-extras anpassen?

A-Frame ist ein Web-Framework für die Erstellung von 3D/AR/VR-Erlebnissen mit HTML und Entity-Component. Aframe-extras ist eine Sammlung von Add-ons und Helfern für A-Frame VR. Mit diesen Tools können Sie verschiedene Aspekte Ihrer VR-Szene wie Beleuchtung, Himmel, Boden, Objekte und Animationen gestalten. Hier sind einige Tipps, wie Sie Ihre VR-Szene mit A-Frame und aframe-extras anpassen können:

A-Frame – Make WebVR.
Easily customized environments using the Aframe-Environment-Component.

Exit mobile version