VR Commerce / Immersive Shopping

r23 · Beitrag von **r23** » 11.08.2023, 16:35

Hallo,

in meinem Blog habe ich eine kurze Einführung in A-Frame und Three.js veröffentlicht.
https://blog.r23.de/virtual-reality/ein ... einem-weg/

Wir haben jetzt in der Entwicklungsumgebung Blender Dateien als Platzhalter.

Diese Woche werden wir das Laden von VR auf A-Frame umstellen. Uns mit der Form vom #floor beschäftigen. und hoffentlich mit dem Raum selber.

Beste Grüße

Ralf

r23 · Beitrag von **r23** » 11.08.2023, 23:03

Download Empfehlung / Anleitung

https://riptutorial.com/Download/aframe-de.pdf

r23 · Beitrag von **r23** » 12.08.2023, 03:27

Hallo,

Ich habe die heutige 3D-Szene mit meiner VR-Brille geprüft und nun Punkte, die ich ändern möchte.

1. Wenn man über das Geländer geht, kann man im VR Raum doch Höhenangst bekommen. Es muss eine Beschränkung her. Durch Wände laufen ist nicht besonders toll.

2. In einer Testumgebung, bin ich sitzend durch eine Spiellandschaft "gefahren" ... nach wenigen Minuten hatte ich die VR Krankheit erlebt

Ich werde teleportier in unsere 3D-Szene einabeun.

Um in einem Gebäude und in der VR-Szene mit dem Teleporter und der VR-Brille zu springen, kannst du eine der folgenden Komponenten verwenden:

- [aframe-teleport-controls]: Diese Komponente ermöglicht es dir, eine Parabel zu zeichnen, um einen Punkt auszuwählen, an den du dich teleportieren möchtest. Du kannst die Farbe, die Breite und die Geschwindigkeit der Parabel anpassen, sowie die Form und die Größe des Treffersymbols. Du kannst auch die Kollisionselemente angeben, auf denen du landen kannst, und den maximalen Winkel für das Landen festlegen. Diese Komponente unterstützt verschiedene Controller, wie z.B. HTC Vive, Oculus Touch, Windows Mixed Reality und Gear VR⁴.

- [aframe-blink-controls](^2^): Diese Komponente ist eine modifizierte Version der aframe-teleport-controls, die zusätzlich eine Rotation beim Teleportieren ermöglicht. Du kannst die Richtung wählen, in die du dich nach dem Teleportieren drehen möchtest, indem du einen Pfeil auf dem Treffersymbol verwendest. Du kannst auch eine Schnelldrehung mit dem Daumenstick aktivieren, um dich um 45 Grad zu drehen. Diese Komponente ist hauptsächlich für Oculus Quest und Quest 2 getestet².

Um diese Komponenten in das A-Frame Castle Beispiel einzubauen, musst du folgende Schritte befolgen:

- Lade die entsprechende JavaScript-Datei aus dem dist-Ordner der jeweiligen GitHub-Repositorien herunter und füge sie deinem Projektordner hinzu. (erledingt)

- Füge ein <script> Tag in deinem HTML-Dokument hinzu, um die JavaScript-Datei zu referenzieren. (erledingt)

Folgende Punkte eben auf die Todo Liste

- Füge die teleport-controls oder blink-controls Komponente zu deinem Controller hinzu, z.B. <a-entity id="left-hand" teleport-controls="button: trigger"></a-entity>.
- Passe die Eigenschaften der Komponente nach deinen Wünschen an.
- Gib die Kollisionselemente an, auf denen du landen kannst, z.B. collisionEntities: .ground,.wall,.roof.
- Teste dein Projekt in einer VR-fähigen Umgebung.

VR-Krankheit

Die VR-Krankheit ist eine Form von Übelkeit, die mit dem Eintauchen in eine computergenerierte Umgebung auftritt. Sie kann während des VR-Erlebnisses entstehen, typischerweise beim Spielen eines Computerspiels mit einer VR-Brille, setzt sich jedoch häufig auch nach dem Verlassen der virtuellen Realität fort. Die VR-Krankheit wird durch einen Widerspruch zwischen den Signalen von den Augen und dem Gleichgewichtssinn ausgelöst. Die Augen nehmen eine Bewegung wahr, die nicht mit der tatsächlichen Bewegung des Körpers übereinstimmt. Das Gehirn kann diese widersprüchlichen Informationen nicht richtig verarbeiten und reagiert mit Symptomen wie Schwindel, Übelkeit, Kopfschmerzen oder Schweißausbrüchen.

Die VR-Krankheit ist also ähnlich wie die Reisekrankheit, die manche Menschen beim Autofahren oder Fliegen erleben. Die VR-Krankheit kann aber auch von anderen Faktoren beeinflusst werden, wie zum Beispiel der Qualität der Grafik, der Geschwindigkeit der Bewegung, der Steuerung der Kamera oder der Art des Spiels. Nicht jeder ist gleich anfällig für die VR-Krankheit. Manche Menschen können stundenlang in der VR spielen, ohne Probleme zu haben, während andere schon nach wenigen Minuten unwohl werden. Frauen sind häufiger betroffen als Männer und Kinder sind anfälliger als Erwachsene.

Es gibt einige Tipps und Tricks, wie man die VR-Krankheit vermeiden oder reduzieren kann. Zum Beispiel sollte man sich vor dem Spielen ausreichend ausruhen und hydratisieren, eine angenehme Raumtemperatur und Beleuchtung schaffen, die VR-Brille richtig einstellen und anpassen, langsam an die VR gewöhnen und regelmäßig Pausen machen¹². Wenn man trotzdem Symptome verspürt, sollte man das Spiel sofort beenden und sich erholen. Die VR-Krankheit ist zwar unangenehm, aber in der Regel nicht gefährlich oder langfristig schädlich.

VR-Krankheit – Wikipedia. https://de.wikipedia.org/wiki/VR-Krankheit.

Warum VR-Spiele Übelkeit auslösen und was man tun kann. https://www.techbook.de/home-entertainm ... n-tun-kann.

Übelkeit durch VR: Wie ihr mit Motion Sickness umgehen könnt - GamePro. https://www.gamepro.de/artikel/motion-s ... 54285.html.

Warum VR-Spiele Übelkeit auslösen und was man tun kann. https://www.techbook.de/home-entertainm ... n-tun-kann.

Übelkeit durch VR: Wie ihr mit Motion Sickness umgehen könnt - GamePro. https://www.gamepro.de/artikel/motion-s ... 54285.html.

VR-Krankheit – Wikipedia. https://de.wikipedia.org/wiki/VR-Krankheit.

Todo:

Ich werde die floor.gld durch eine navmesh.glb ersetzen. Diese wird in der neuen Blenderdatei enthalten sein.

r23 · Beitrag von **r23** » 13.08.2023, 10:24

Hallo,

die Lösung für das Problem soll die Erstellung von einem NavMeshes sein. Jetzt wird es etwas wild. Wir verwenden dafür UPBGE

UPBGE ist ein Fork des Blender Game Engine, der die Entwicklung von interaktiven 3D-Spielen in Blender ermöglicht.
https://upbge.org/#/download

Die Datei wird nur entpackt und benötigt keine Installation. (soweit ich dies jetzt gesehen habe)

UPBGE ist eine erweiterte Version der Blender Game Engine, die dir erlaubt, interaktive 3D-Spiele in Blender zu erstellen. NavMeshes sind Netzwerke von Polygonen, die die begehbaren Bereiche einer Szene definieren. Mit NavMeshes kannst du die Bewegung von Charakteren oder Objekten in deiner Szene steuern und vermeiden, dass sie durch Wände gehen oder von der Plattform fallen.

Um ein NavMesh mit UPBGE zu erstellen, musst du folgende Schritte befolgen:

- Erstelle oder importiere deine Szene in Blender. Du kannst z.B. das [Castle-Modell] aus dem aframe-extras-Beispiel verwenden.

- Wähle im oberen Menü den Render Engine auf UPBGE aus. Dieser Modus ermöglicht es dir, Navigation Mesh Physics zu verwenden.

- Wähle das Modell aus und öffne das Scene Panel im Properties Editor. Dort findest du den Button "Build Navigation Mesh", mit dem du ein NavMesh für dein Modell generieren kannst.

- Das NavMesh wird als neues Objekt in deiner Szene erstellt. Du kannst es im Object Mode bearbeiten, um es an deine Bedürfnisse anzupassen. Du kannst z.B. einige Flächen auswählen und ihnen einen neuen Index zuweisen, um verschiedene Regionen zu definieren.

- Exportiere dein NavMesh als GLB-Datei. Du kannst dazu den [glTF 2.0 Exporter] für Blender verwenden.

Du kannst mehr über Navigation Mesh Physics in der UPBGE-Dokumentation lesen. Dort findest du auch eine Beschreibung der verschiedenen Optionen und Einstellungen, die du für dein NavMesh verwenden kannst.

Ich hoffe, diese Antwort hilft dir weiter. Wenn du mehr über UPBGE und Blender lernen möchtest, kannst du dir auch diese Videos ansehen:

- [UPBGE -- Blender 3.6 Powered Game Engine]: Dieses Video zeigt dir die neuen Funktionen und Möglichkeiten von UPBGE in Blender 3.6.
https://www.youtube.com/watch?v=E2CssnQnOUI

Navigation Mesh Physics — UPBGE Manual. https://upbge.org/docs/latest/manual/ma ... _mesh.html.
Move To with Navmesh — UPBGE Manual. https://upbge.org/docs/latest/manual/ma ... vmesh.html.
Mesh — UPBGE Manual. https://upbge.org/docs/latest/manual/ma ... /mesh.html.

r23 · Beitrag von **r23** » 15.08.2023, 01:40

Hallo,

ich verwende seit wenigen Monaten eine KI für die Erstellung von 360 Bildern.

: claymation_ein_modernes_helles_und_organisches_ka.jpg (46.55 KiB) 867 mal betrachtet

Zunächst möchte ich Ihnen sagen, dass das Bild ein 360-Grad-Panorama ist, das von einer künstlichen Intelligenz namens Skybox AI erstellt wurde. Das können Sie an dem Wasserzeichen erkennen, das oben und unten auf dem Bild steht1. Skybox AI ist ein Produkt von Blockade Labs, einer Firma, die sich auf die Erstellung von virtuellen Welten spezialisiert hat2.

Was die Häuser angeht, so sehen sie aus wie kleine Iglus mit grünen Dächern und blauen Türen. Ich vermute, dass sie aus einem Material bestehen, das isolierend und wasserdicht ist. Vielleicht sind es Kunststoffe oder Metalle. Die Häuser sind rund, weil das eine effiziente Form ist, die wenig Platz verbraucht und viel Raum bietet. Außerdem sind runde Formen aerodynamisch und können starken Winden besser standhalten.

Die Bäume sind ebenfalls rund und haben verschiedene Farben. Ich denke, dass sie künstlich sind und vielleicht eine Funktion haben, wie zum Beispiel die Erzeugung von Sauerstoff oder Energie. Die Farben könnten einen Hinweis auf den Zustand oder die Art der Bäume geben. Zum Beispiel könnten blaue Bäume Wasser speichern oder grüne Bäume Photosynthese betreiben.

Das Bild erinnert mich an eine futuristische oder fantastische Welt, in der die Menschen in Harmonie mit der Natur leben oder eine neue Art von Natur geschaffen haben. Es wirkt friedlich und fröhlich, aber auch etwas unrealistisch und künstlich.

Eine mögliche Interpretation des Bildes ist, dass es eine Utopie darstellt, also eine ideale Gesellschaft, in der alles perfekt ist. Die runden Häuser symbolisieren die Einheit und Gleichheit der Menschen, die keine Ecken und Kanten haben. Die bunten Bäume zeigen die Vielfalt und Schönheit der Natur, die von den Menschen respektiert und geschützt wird. Das Panorama vermittelt einen Eindruck von Weite und Freiheit, in dem es keine Grenzen oder Hindernisse gibt.

: tech_noir__cyberpunk_a_modern_bright_and_organic.jpg (46.2 KiB) 867 mal betrachtet

Es ist ein 3D-Renderbild, das von einer künstlichen Intelligenz namens Skybox AI erstellt wurde. Das können Sie an dem Wasserzeichen erkennen, das auf dem Bild steht¹.

Ich finde das Bild sehr interessant und beeindruckend. Es hat einen ganz anderen Stil als das erste Bild, das Sie mir gezeigt haben. Das erste Bild war eher cartoonhaft und bunt, während dieses Bild eher realistisch und kühl wirkt. Das erste Bild erinnerte mich an eine utopische oder dystopische Welt, in der die Menschen in runden Häusern und bunten Bäumen leben. Dieses Bild erinnert mich an eine moderne oder futuristische Welt, in der die Menschen in einem technologisch fortgeschrittenen Raum leben.

Ich habe einige Informationen über futuristische Zimmer im Internet gesucht und einige Merkmale gefunden, die zu diesem Bild passen könnten²³. Zum Beispiel:

- Runde Formen: Das Zimmer ist kreisförmig und hat eine runde Uhr, die die Zeit anzeigt. Runde Formen sind effizient und aerodynamisch und können ein Gefühl von Einheit und Gleichheit vermitteln.

- Auffällige Lichtinstallationen: Das Zimmer hat eine lila und blaue Farbschema und hat mehrere Bildschirme und Paneele an den Wänden. Die Lichter sind indirekt und schaffen eine Atmosphäre von Ruhe und Eleganz.

- Schwebende Elemente: Das Zimmer hat mehrere Fischtanks an den Wänden mit bunten Fischen und Pflanzen. Die Fischtanks scheinen zu schweben und können eine Funktion haben, wie zum Beispiel die Erzeugung von Sauerstoff oder Energie.

- Glas und Acryl: Das Zimmer hat einen reflektierenden Boden mit einem schwarz-weißen Schachbrettmuster. Der Boden ist aus Glas oder Acryl und kann eine Illusion von Schwerelosigkeit erzeugen.

Eine mögliche Interpretation des Bildes ist, dass es einen Kontrast zwischen Natur und Technologie zeigt. Die Fische und Pflanzen sind natürliche Elemente, die in einem künstlichen Raum eingeschlossen sind. Die Uhr ist ein technologisches Element, das die Zeit misst, die in der Natur nicht existiert. Das Zimmer könnte ein Ort sein, an dem die Menschen sich von der Außenwelt abkapseln oder sich mit ihr verbinden können.

Eine andere mögliche Interpretation ist, dass es einen Aspekt der Persönlichkeit oder des Lebensstils des Bewohners zeigt. Die Fische und Pflanzen könnten ein Hobby oder eine Leidenschaft sein, die der Bewohner pflegt. Die Uhr könnte ein Symbol für die Disziplin oder den Stress sein, die der Bewohner hat. Das Zimmer könnte ein Ort sein, an dem der Bewohner sich entspannt oder arbeitet.

r23 · Beitrag von **r23** » 21.08.2023, 19:20

Hallo,

*freu* mir ist gerade die Erstellung von einem Navmesh gelungen.

Auszug aus meinem morgigen Blogbeitrag

Was ist ein Navmesh

Ein Navmesh ist eine abstrakte Datenstruktur, die in Anwendungen mit künstlicher Intelligenz verwendet wird, um Agenten bei der Wegfindung durch komplizierte Räume zu unterstützen. Dieser Ansatz ist seit mindestens Mitte der 1980er Jahre in der Robotik bekannt, wo er als Wiesenkarte bezeichnet wurde, und wurde im Jahr 2000 in der Videospiel-KI populär. ³

Ein Navmesh besteht aus einer Sammlung von zweidimensionalen konvexen Polygonen (einem Polygonnetz), die definieren, welche Bereiche einer Umgebung von Agenten durchquerbar sind. Mit anderen Worten, ein Charakter in einem Spiel könnte sich frei innerhalb dieser Bereiche bewegen, ohne von Bäumen, Lava oder anderen Hindernissen behindert zu werden, die Teil der Umgebung sind. Angrenzende Polygone sind in einem Graphen miteinander verbunden. Die Wegfindung innerhalb eines dieser Polygone kann trivial in einer geraden Linie erfolgen, weil das Polygon konvex und durchquerbar ist. Die Wegfindung zwischen Polygonen im Netz kann mit einer der vielen Graphensuchalgorithmen erfolgen, wie z.B. A*. ²

Agenten auf einem Navmesh können so kollisionsdetektionsprüfungen mit Hindernissen vermeiden, die Teil der Umgebung sind. Die Darstellung von durchquerbaren Bereichen in einer 2D-ähnlichen Form vereinfacht Berechnungen, die sonst in der \"wahren\" 3D-Umgebung durchgeführt werden müssten, und erlaubt im Gegensatz zu einem 2D-Gitter durchquerbare Bereiche, die sich oben und unten auf verschiedenen Höhen überlappen. ²

Die Polygone verschiedener Größen und Formen in Navigationsnetzen können beliebige Umgebungen mit größerer Genauigkeit darstellen als regelmäßige Gitter. ⁴

Navigationsnetze können manuell, automatisch oder durch eine Kombination aus beidem erstellt werden. In Videospielen könnte ein Leveldesigner die Polygone des Navmeshes manuell in einem Level-Editor definieren. Dieser Ansatz kann sehr arbeitsintensiv sein. ⁴ Alternativ könnte eine Anwendung erstellt werden, die die Levelgeometrie als Eingabe nimmt und automatisch ein Navmesh ausgibt. Es wird häufig angenommen, dass die Umgebung, die durch ein Navmesh dargestellt wird, statisch ist - sie ändert sich nicht im Laufe der Zeit - und somit kann das Navmesh offline erstellt und unveränderlich sein. Es gab jedoch einige Untersuchungen über Online-Aktualisierungen von Navmeshes für dynamische Umgebungen.

8<-

Wenn die Kundin, der Kunde in deinem Verkaufsraum ist, können diese nicht mehr durch die Wände gehen.

Wir haben noch viele Punkte auf der To-do-Liste, aber heute haben wir einen wichtigen Punkt gelöst.

Viele Grüße

Ralf

r23 · Beitrag von **r23** » 26.08.2023, 21:48

Hallo,

um Lazy Loading bei den Imports zu verwenden, können wir Sie die dynamische import()-Syntax verwenden, die von webpack unterstützt wird. Diese Syntax ermöglicht es uns, Module erst dann zu importieren, wenn sie benötigt werden, anstatt sie im Voraus zu laden. Zum Beispiel könnten wir folgenden Code schreiben:

Code: Alles auswählen

// Import only the core of AFRAME
import * as AFRAME from 'aframe/core';

// Lazy load the extras, physics system and blink controls when needed
AFRAME.registerComponent('lazy-load', {
  init: function () {
    // Use import() to load the modules dynamically
    import('aframe-extras').then((module) => {
      // Register the extras with AFRAME
      module.registerAll();
    });
    import('aframe-physics-system').then((module) => {
      // Register the physics system with AFRAME
      module.registerAll();
    });
    import('aframe-blink-controls').then((module) => {
      // Register the blink controls with AFRAME
      module.registerAll();
    });
  }
});

// Use the lazy-load component in your scene
<a-scene lazy-load>
  <!-- Your scene content -->
</a-scene>

Dieser Code wird die zusätzlichen Module nur dann laden, wenn die lazy-load-Komponente initialisiert wird, anstatt sie in der Hauptdatei zu bündeln. Dies kann die Ladezeit und den Speicherverbrauch Ihrer Anwendung reduzieren.

Ob dies wirklich mit unserem immersiven Showroom funktioniert habe ich nicht ausprobiert.

r23 · Beitrag von **r23** » 26.08.2023, 21:58

Hallo,

ich habe Webpack Code Splitting für unseren immersiven Showroom eingebaut.

Was das ist und warum dies vielleicht sinnvoll war, darüber habe ich gebloggt
https://blog.myoos.de/metaverse-experie ... splitting/

Schönes Wochenende

Ralf

r23 · Beitrag von **r23** » 01.09.2023, 04:07

Hallo,

Informationen zu unserem heutigen Release
https://blog.myoos.de/metaverse-experie ... s-projekt/

Das Navmesh funktioniert.

Beste Grüße

Ralf

r23 · Beitrag von **r23** » 20.09.2023, 14:47

Hallo,

in unserem Atelier erstellen wir Produktanimationen. Diese Videos kann man auch in einem VR-Shopping Erlebnis einbauen.

Über die Größe und die Vorteile habe ich einen Blogbeitrag für Myoos geschrieben.

Optimale Auflösung für Web XR Video in der MyOOS VR-Commerce Umgebung
https://blog.myoos.de/optimale-aufloesu ... -umgebung/

Viele Grüße

Ralf

r23 · Beitrag von **r23** » 21.09.2023, 05:52

Hallo,

in diesem Video teste ich free teleport locomotion für das Projekt.
https://www.youtube.com/watch?v=ppDkYQEtGf8

ich hoffe, dass ich die Komponenten in MyOOS Version 2.4.67 zur Verfügung stellen kann.

Beste Grüße

Ralf

r23 · Beitrag von **r23** » 27.09.2023, 00:58

Hallo,

A-Frame Template Component

eine andere Möglichkeit ist, die A-Frame Template Component zu verwenden. Du kannst dann die src-Attribut der Template-Komponente auf die gewünschte Szene setzen, wenn die Daten geladen sind. Das würde so aussehen:

Code: Alles auswählen

<a-scene>
  <a-assets>
    <script id="scene1" type="text/html">
      <!-- Hier definieren Sie Ihre erste Szene -->
    </script>
    <script id="scene2" type="text/html">
      <!-- Hier definieren Sie Ihre zweite Szene -->
    </script>
  </a-assets>
  <a-entity template="src: #scene1"></a-entity> <!-- Hier setzen Sie die initiale Szene -->
</a-scene>

java Script

Code: Alles auswählen

document.addEventListener('DOMContentLoaded', function() {
    const scene = document.querySelector('a-scene');
    const splash = document.querySelector('#splash');
    const loading = document.querySelector('#splash .loading');
    const template = document.querySelector('[template]'); // Hier wählen Sie das Template-Element aus

    const emitEvent = (eventName, listeners) => {
        listeners.forEach((listener) => {
            const el = document.querySelector(listener);
            el.emit(eventName);
        })
    };

    const emitMediaEvent = (eventType, listeners) => {
        listeners.forEach((listener) => {
            const el = document.querySelector(listener);
            el.components.soundeventType;
        })
    };

    scene.addEventListener('loaded', function (e) {
        setTimeout(() => {
            loading.style.display = 'none';
            splash.style.display = 'none'; // Hier wird der Splash-Bildschirm ausgeblendet
            template.setAttribute('template', 'src', '#scene2'); // Hier setzen Sie die neue Szene
        }, 50);
    });
});

Der Unterschied zwischen der Lösung in unserem Projekt und dieser Lösungen ist, dass die erste Lösung den Start-Button überflüssig macht und die Szene direkt anzeigt, wenn sie geladen ist, während die zweite Lösung den Start-Button nutzt, um zwischen verschiedenen Szenen zu wechseln. Die erste Lösung ist einfacher und schneller, aber die zweite Lösung bietet mehr Flexibilität und Kontrolle über die Szenenübergänge.

Wir verzichten beim Preloader ab MyOOS 2.4.68 auf den startButton.

Viele Grüße

Ralf

r23 · Beitrag von **r23** » 28.09.2023, 03:30

Ein weiterer Meilenstein ist mir gerade nach zig unzähligen Versuchen geglückt. *freu*

In unserer VR-Commerce Umgebung können wir jetzt glTF Dateien mit Animationen anzeigen. *freu*

Der Export der Animation ist mir gerade bei der Wasseroberfläche geglückt.

Was ist der glTF Validator und wie benutze ich ihn?

Der glTF Validator ist ein Werkzeug, das dir hilft, die Qualität und Konformität deiner glTF-Modelle zu überprüfen. glTF ist ein offenes Format für die Übertragung und Darstellung von 3D-Szenen und -Modellen. Der Validator analysiert nicht nur die JSON-Struktur, sondern auch die Mesh-Daten, die Materialien, die Animationen und andere Aspekte deines Modells. Er zeigt dir mögliche Fehler, Warnungen und Hinweise an, die du beheben kannst, um dein Modell zu verbessern¹.

Es gibt verschiedene Möglichkeiten, den glTF Validator zu verwenden. Eine Möglichkeit ist, die Web-Version zu verwenden, die du unter https://github.khronos.org/glTF-Validator/ finden kannst. Du kannst einfach eine glTF- oder GLB-Datei auswählen oder per Drag-and-Drop hochladen. Die Validierung wird lokal in deinem Browser durchgeführt. Die hochgeladenen Dateien werden nicht gespeichert.

Für die Animation habe ich auch Sandbox von Babylonjs https://sandbox.babylonjs.com/ verwendet.

Dir steht in unserer Umgebung der Animation-Mixer von Don McCurdy zur Verfügung
https://github.com/c-frame/aframe-extra ... /README.md

Das wird ein sehr spannendes Jahr

Viele Grüße

Ralf

r23 · Beitrag von **r23** » 28.09.2023, 19:33

Hallo,

Die Wasseroberflächen in unserem VR Commerce Erlebnis sind GLB Dateien, die die Animationen enthalten. Jetzt ist die Frage, lege ich die Wasseroberflächen in eine GLB Datei oder nehme ich für jede Wasseroberfläche eine eigene Datei.

Ich arbeite in meiner Entwicklungsumgebung mit einer KI zusammen und hier der Dialoag:

Ich freue mich, dass du dich für A-Frame interessierst, eine Web-basierte Plattform für die Erstellung von virtuellen Realitäten.

Um deine Frage zu beantworten, es kommt darauf an, wie du deine animierten Wasserflächen gestalten möchtest. Wenn du sie als Teil eines einzigen 3D-Modells erstellst, kannst du sie als eine .glb-Datei zusammenfassen und mit dem gltf-model-Komponenten von A-Frame laden. Das hat den Vorteil, dass du nur eine Datei anfordern musst und die Animationen bereits im Modell enthalten sind.

Wenn du jedoch die Wasserflächen als separate Elemente in deiner Szene platzieren möchtest, kannst du sie auch getrennt importieren. Das erlaubt dir mehr Flexibilität bei der Positionierung und Skalierung der Flächen. Du kannst auch die material-Komponente von A-Frame verwenden, um die Eigenschaften der Flächen zu ändern, wie z.B. die Opazität, die Farbe oder die Textur. Außerdem kannst du die animation-Komponente von A-Frame verwenden, um die Flächen zu animieren, z.B. indem du ihre Position, Rotation oder Skalierung im Laufe der Zeit veränderst.

Ich hoffe, das hilft dir bei deinem Projekt. Wenn du mehr über A-Frame erfahren möchtest, kannst du dir die Dokumentation, die Beispiele oder die Community ansehen. Viel Spaß beim Erstellen deiner VR-Szene!

Wie erstelle ich eine Animation in A-Frame?

Um eine Animation in A-Frame zu erstellen, kannst du das animation-Komponente verwenden, das dir erlaubt, Werte von Komponenten oder Attributen im Laufe der Zeit zu verändern. Du kannst verschiedene Eigenschaften der Animation festlegen, wie z.B. die Start- und Endwerte, die Dauer, die Wiederholung, die Richtung, die Verzögerung und die Easing-Funktion.

Du kannst das animation-Komponente als ein Attribut eines a-entity-Elements definieren, oder als ein a-animation-Element innerhalb eines a-entity-Elements. Zum Beispiel, um eine Box zu rotieren, kannst du folgenden Code verwenden:

Code: Alles auswählen

<a-entity geometry="primitive: box" material="color: red" animation="property: rotation; to: 0 360 0; loop: true; dur: 2000"></a-entity>

oder

Code: Alles auswählen

<a-entity geometry="primitive: box" material="color: red">
  <a-animation attribute="rotation" to="0 360 0" loop="true" dur="2000"></a-animation>
</a-entity>

Beide Codes erzeugen die gleiche Animation, aber das a-animation-Element erlaubt dir, mehrere Animationen für das gleiche Element zu definieren².

Du kannst auch verschiedene Arten von Werten animieren, wie z.B. Farben, Vektoren oder Objekteigenschaften. Du musst nur den Typ der Animation angeben, wenn du eine Farbe oder einen Vektor animierst. Zum Beispiel, um die Farbe einer Kugel zu ändern, kannst du folgenden Code verwenden:

Code: Alles auswählen

<a-entity geometry="primitive: sphere" material="color: blue" animation="property: material.color; type: color; to: green; dur: 1000"></a-entity>

ich habe in blender eine oberfläche animiert mit dem modifiere ozean. während der animation ändert das objekt seine größe. wenn ich die wasseroberfläche in einem pool animiere, kann es passieren, dass die animation das bestehende statische 3d modell des pools berührt. gibt es in a-frame probleme mit der überlappung von modellen? funktioniert die animation trotzdem?

Ich freue mich, dass du dich für A-Frame und Blender interessierst, zwei großartige Werkzeuge für die Erstellung von 3D-Inhalten.

Um deine Frage zu beantworten, es gibt in A-Frame keine Probleme bei der Überschneidung von Modellen, solange du die richtigen Kollisionsformen verwendest. Die Animation sollte auch noch funktionieren, wenn du die Wasserfläche in einem Pool animierst, aber du musst darauf achten, dass die Größe der Fläche nicht zu groß oder zu klein wird.

Eine Möglichkeit, die Größe der Fläche zu kontrollieren, ist, die Skalierung des Objekts in Blender anzupassen. Du kannst auch die Ocean Modifier-Einstellungen ändern, um die Wellenhöhe, die Auflösung oder die Geschwindigkeit der Animation zu beeinflussen¹. Eine andere Möglichkeit ist, die Skalierung des Objekts in A-Frame zu ändern, indem du die scale-Komponente verwendest². Du kannst auch die Animation-Komponente verwenden, um die Skalierung im Laufe der Zeit zu verändern³.

Wie kann ich Kollisionen zwischen Modellen in A-Frame erkennen?

Um Kollisionen zwischen Modellen in A-Frame zu erkennen, gibt es verschiedene Möglichkeiten, je nachdem, welche Art von Modellen du verwendest und wie du sie bewegst. Hier sind einige Optionen, die du ausprobieren kannst:

- Wenn du primitive Formen wie Boxen, Kugeln oder Zylinder verwendest, kannst du die **bounding box** oder **bounding sphere** Methode verwenden, um zu überprüfen, ob sich die Modelle überschneiden. Dazu musst du die Position und die Größe der Modelle kennen und eine einfache mathematische Formel anwenden, um den Abstand oder die Schnittmenge zwischen ihnen zu berechnen. Du kannst auch die **intersect** Methoden von **three.js** verwenden, um die Überschneidung zwischen verschiedenen Arten von Objekten zu ermitteln². Um auf das three.js Objekt zuzugreifen, musst du die el.object3D Referenz verwenden.

- Wenn du komplexe Modelle wie .gltf oder .glb Dateien verwendest, kannst du die **physics engine** von A-Frame nutzen, um Kollisionen zu simulieren und zu erkennen³. Dazu musst du den Modellen eine **physics body** Komponente hinzufügen, wie z.B. **static-body**, **dynamic-body** oder **kinematic-body**, je nachdem, ob sie sich bewegen oder nicht. Du musst auch eine **physics shape** Komponente hinzufügen, um die Kollisionsform der Modelle anzugeben, wie z.B. **box**, **sphere** oder **hull**³. Du kannst dann das **collide** Ereignis verwenden, um zu erfahren, wann ein Modell mit einem anderen kollidiert.

- Wenn du eine spezielle Anwendung hast, wie z.B. eine VR-Szene mit einem Controller, der mit anderen Objekten interagieren soll, kannst du die **aframe-physics-extras** Bibliothek verwenden, die eine Reihe von nützlichen Komponenten für Kollisionserkennung und -behandlung bietet⁴. Zum Beispiel kannst du die **collision-filter** Komponente verwenden, um festzulegen, welche Objekte mit dem Controller kollidieren sollen und welche nicht⁴. Du kannst auch die **grabbable** Komponente verwenden, um Objekte aufzunehmen und loszulassen.

r23 · Beitrag von **r23** » 03.10.2023, 13:33

Hallo,

ich habe vor ein paar Tagen den Fork CharacterControl angelegt.
https://github.com/r23/CharacterControl

Mit dem letzten Update von CharacterControl kann man dies per npm installieren.

Hallo, das ist Bing. Ich bin froh, dass Sie sich für A-Frame interessieren. A-Frame ist eine Web-Framework für die Erstellung von virtuellen Realitäten (VR) mit HTML und JavaScript¹. Um eine A-Frame-Szene zu erstellen, benötigen Sie ein <a-scene>-Element, das die globale Wurzel des Szenengraphen darstellt². Sie können dann verschiedene Entitäten wie Boxen, Zylinder, Kegel, Kameras, Lichter und Sounds hinzufügen, um Ihre VR-Welt zu gestalten².

Um einen Charakter-Controller wie ecctrl in einer A-Frame-Szene zu verwenden, müssen Sie einige zusätzliche Schritte ausführen. Ecctrl ist ein NPM-Paket, das auf react-three-fiber und react-three-rapier basiert⁶. React-three-fiber ist ein React-Renderer für three.js, eine beliebte 3D-Bibliothek für das Web¹⁶. React-three-rapier ist eine React-Bibliothek für die Integration von Rapier, einem 3D-Physik-Engine¹⁷. Um diese Bibliotheken in einer A-Frame-Szene zu verwenden, müssen Sie sie zuerst installieren und dann eine Komponente schreiben, die die Charaktersteuerung implementiert. Sie können sich an dem Beispiel in der ecctrl-Repository orientieren⁶, aber Sie müssen einige Anpassungen vornehmen, um es mit A-Frame kompatibel zu machen.

Eine Möglichkeit, dies zu tun, ist die Verwendung von aframe-react, einer Brücke zwischen A-Frame und React. Mit aframe-react können Sie A-Frame-Komponenten als React-Komponenten schreiben und rendern. Sie können auch Ihre eigenen benutzerdefinierten Komponenten erstellen, indem Sie die registerComponent-Methode von A-Frame verwenden. Um ecctrl als eine solche Komponente zu registrieren, müssen Sie die init-Methode überschreiben, um die erforderlichen Abhängigkeiten zu importieren und die Charaktersteuerung zu initialisieren. Sie müssen auch die tick-Methode überschreiben, um die Charakterbewegung auf jeder Rahmenaktualisierung zu aktualisieren. Schließlich müssen Sie die Komponente an das <a-scene>-Element anhängen und Ihr Charaktermodell als ein Kind der Komponente rendern.

Das könnte ungefähr so aussehen:

Code: Alles auswählen

import React from "react";
import { render } from "react-dom";
import { Scene } from "aframe-react";
import { CharacterController } from "ecctrl";
import { CharacterModel } from "./CharacterModel";

// Register the ecctrl component
AFRAME.registerComponent("ecctrl", {
  init: function () {
    // Import the dependencies
    const { Physics } = require("react-three-rapier");
    const { KeyboardControls } = require("ecctrl");

    // Initialize the character controller
    this.characterController = new CharacterController();

    // Create a keyboard map
    const keyboardMap = [
      { name: "forward", keys: ["ArrowUp", "KeyW"] },
      { name: "backward", keys: ["ArrowDown", "KeyS"] },
      { name: "leftward", keys: ["ArrowLeft", "KeyA"] },
      { name: "rightward", keys: ["ArrowRight", "KeyD"] },
      { name: "jump", keys: ["Space"] },
      { name: "run", keys: ["Shift"] },
      { name: "action1", keys: ["1"] },
      { name: "action2", keys: ["2"] },
      { name: "action3", keys: ["3"] },
      { name: "trigger", keys: ["KeyF"] },
    ];

    // Render the physics and the keyboard controls
    render(
      <Physics>
        <KeyboardControls map={keyboardMap}>
          {this.characterController}
        </KeyboardControls>
      </Physics>,
      this.el
    );
  },

  tick: function () {
    // Update the character movement
    this.characterController.update();
  },
});

// Render the scene with the ecctrl component and the character model
render(
  <Scene>
    <a-entity ecctrl>
      <CharacterModel />
    </a-entity>
  </Scene>,
  document.body
);

Ich hoffe, das hilft Ihnen weiter. Wenn Sie mehr über A-Frame erfahren möchten, können Sie die offizielle Dokumentation¹ oder einige Tutorials lesen. Viel Spaß beim Erstellen Ihrer VR-Welt!

VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping

Re: VR Commerce / Immersive Shopping