VR Commerce / Immersive Shopping

[r23]

Hallo,

mit unserem Shopsystem kann man die ersten Schritte im VR Commerce machen. Durch die Trennung von Programm und Gestaltung können wir VR Räume einrichten.

Unsere Kategoriebeschreibung mit einer 360 Grad Ansicht ist besonders für Küchen und Badezimmer gedacht.

Es wird bei dem Projekt Zeit, dass wir den nächsten Schritt Richtung VR Commerce gehen.

Beispiel:

Die Kaufhauskette Bloomingdale’s bietet eine Website zum immersiven Shopping bzw. ein virtuelles Einkaufszentrum an.
https://www.bloomingdales.com/c/anniver ... -shopping/


Beste Grüße

Ralf

[r23]

Hallo, das ist Bing. Ich bin hier, um Ihnen zu helfen.

Ich habe einige Informationen über A-Frame-Plugins für immersives Shopping gefunden. A-Frame ist ein beliebtes Framework für WebXR, das einen modularen Ansatz zum Erstellen von VR- und AR-Anwendungen im Web bietet¹. Sie können 3D-Welten mit HTML und Entity-Component erstellen und sie auf jedem Headset, Mobilgerät oder Desktop anzeigen².

Ein mögliches Plugin, das Sie verwenden könnten, ist **aframe-svelte**, das eine Vorlage für immersive Web-Apps mit A-Frame und Svelte bietet. Svelte ist ein Compiler, der Ihnen hilft, schnelle Webanwendungen zu schreiben³. Mit aframe-svelte können Sie Svelte-Komponenten verwenden, um Ihre A-Frame-Szene zu gestalten und zu steuern³.

Ich hoffe, das hilft Ihnen weiter. Wenn Sie mehr wissen möchten, können Sie die folgenden Links besuchen:

¹: [Überraschend einfach: Immersive Web mit AFrame | iX | Heise Magazine](https://www.heise.de/select/ix/2021/10/ ... 4094383504)
²: [A-Frame – Make WebVR](https://aframe.io/)
³: [GitHub - wmurphyrd/aframe-svelte: Template for immersive web apps with A-Frame + Svelte](https://github.com/wmurphyrd/aframe-svelte)

Quelle: Unterhaltung mit Bing, 7.7.2023
(1) Überraschend einfach: Immersive Web mit AFrame | iX | Heise Magazine. https://www.heise.de/select/ix/2021/10/ ... 4094383504.
(2) A-Frame – Make WebVR. https://aframe.io/.
(3) GitHub - wmurphyrd/aframe-svelte: Template for immersive web apps with .... https://github.com/wmurphyrd/aframe-svelte.

[r23]

Um einen Rundgang wie https://www.bloomingdales.com/c/anniver ... -shopping/ zu erstellen, benötigen Sie ein WebXR-Framework wie A-Frame, das Ihnen erlaubt, 3D-Szenen mit HTML zu erstellen. Sie müssen auch 3D-Modelle Ihrer Produkte und Umgebungen haben, die Sie in Ihre Szene einfügen können. Sie können vorgefertigte Modelle verwenden oder Ihre eigenen erstellen. Außerdem müssen Sie Interaktionen und Animationen programmieren, um Ihren Rundgang lebendig und ansprechend zu gestalten.

Die genannte Homepage verwendet **A-Frame** als WebXR-Framework und **Sketchfab** als Quelle für 3D-Modelle. Sie können dies überprüfen, indem Sie die Seite im Browser öffnen, die rechte Maustaste drücken und den Seitenquelltext anzeigen wählen. Dort sehen Sie, dass die Seite A-Frame-Skripte und Sketchfab-Links enthält.

Wenn Sie mehr über A-Frame erfahren möchten, können Sie die offizielle Website besuchen² oder sich dieses Magazinartikel ansehen¹. Wenn Sie mehr über Sketchfab erfahren möchten, können Sie die offizielle Website besuchen oder sich dieses Video ansehen.

Ich hoffe, das beantwortet Ihre Frage. Wenn Sie weitere Hilfe benötigen, lassen Sie es mich bitte wissen.

¹: [Überraschend einfach: Immersive Web mit AFrame | iX | Heise Magazine](https://www.heise.de/select/ix/2021/10/ ... 4094383504)
²: [A-Frame – Make WebVR](https://aframe.io/)
: [Sketchfab - The best 3D viewer on the web](https://sketchfab.com/)
: [How to use Sketchfab models in A-Frame - YouTube](https://www.youtube.com/watch?v=9w4pY0xLZKs)

Quelle: Unterhaltung mit Bing, 7.7.2023
(1) Guide to Bloomingdale's Flagship Store in New York City - TripSavvy. https://www.tripsavvy.com/bloomingdales ... de-1613464.
(2) Immersive Shopping | Bloomingdale's 150th Anniversary. https://www.bloomingdales.com/c/anniver ... -shopping/.
(3) Private Shopping Tour of Bloomingdales - Dubai Mall. https://www.mandarinoriental.com/de/dub ... dubai-mall.

[r23]

3D Visat Player ist ein Programm, das Ihnen erlaubt, virtuelle Touren zu erstellen und anzusehen, die mit 3DVista-Software erstellt wurden. 3DVista ist eine professionelle Virtual Tour Software, die seit 1999 führend ist¹². Mit 3DVista können Sie interaktive 3D-Modelle, E-Learning- und Trainingstouren, Live-geführte Touren und mehr erstellen. Sie können Ihre Touren auch mit der kostenlosen 3DVista App verwalten und offline oder online anzeigen¹.

Um mehr über 3D Visat Player und 3DVista zu erfahren, können Sie die folgenden Links besuchen:

¹: [3DVista - Professional Virtual Tour Software, leading since 1999.](https://www.3dvista.com/en/)
²: [3DVista - Professionelle Virtual Tour Software, führend seit 1999.](https://www.3dvista.com/de/)
: [Virtual Tour PRO - Panoramen, 3D Touren und 360º Videos - 3DVista](https://www.3dvista.com/de/products/virtual-tour-pro/)

Quelle: Unterhaltung mit Bing, 7.7.2023
(1) 3DVista - Professional Virtual Tour Software, leading since 1999.. https://www.3dvista.com/en/.
(2) 3DVista - Professionelle Virtual Tour Software, führend seit 1999.. https://www.3dvista.com/de/.
(3) Virtual Tour PRO - Panoramen, 3D Touren und 360º Videos - 3DVista. https://www.3dvista.com/de/products/virtual-tour-pro/.

[r23]

Click and Go Navigation ist eine Funktion, die es Ihnen erlaubt, sich in einer virtuellen Tour zu bewegen, indem Sie einfach auf einen Punkt klicken, zu dem Sie gehen möchten. Diese Funktion wird von 3DVista angeboten, einer professionellen Virtual Tour Software¹. Um diese Funktion in A-Frame zu nutzen, benötigen Sie eine Erweiterung für A-Frame, die diese Art von Navigation ermöglicht.

Ich habe einige Erweiterungen gefunden, die Ihnen helfen könnten, Click and Go Navigation für A-Frame zu implementieren. Hier sind einige Beispiele:

- **aframe-click-drag-component**: Diese Erweiterung ermöglicht es Ihnen, Objekte in einer A-Frame-Szene zu klicken und zu ziehen. Sie können diese Erweiterung verwenden, um Hotspots zu erstellen, die Sie zu anderen Szenen oder Orten führen².
- **aframe-teleport-controls**: Diese Erweiterung ermöglicht es Ihnen, sich in einer A-Frame-Szene zu teleportieren, indem Sie einen Controller oder eine Maus verwenden. Sie können diese Erweiterung verwenden, um eine Parabel zu zeichnen, die Ihren Zielort anzeigt³.
- **aframe-walk-component**: Diese Erweiterung ermöglicht es Ihnen, sich in einer A-Frame-Szene zu bewegen, indem Sie die WASD-Tasten oder einen Controller verwenden. Sie können diese Erweiterung verwenden, um eine Kollisionserkennung und eine Höhenanpassung hinzuzufügen.

Ich hoffe, das hilft Ihnen weiter. Wenn Sie mehr über A-Frame erfahren möchten, können Sie die offizielle Website besuchen oder sich einige Beispiele ansehen.

¹: [3DVista - Professional Virtual Tour Software, leading since 1999.](https://www.3dvista.com/en/)
²: [GitHub - jujunjun110/aframe-click-drag-component: Click and drag component for a-frame](https://github.com/jujunjun110/aframe-c ... -component)
³: [GitHub - fernandojsg/aframe-teleport-controls: Teleport controls for A-Frame](https://github.com/fernandojsg/aframe-teleport-controls)
: [GitHub - donmccurdy/aframe-extras: Add-ons and helpers for A-Frame VR.](https://github.com/donmccurdy/aframe-ex ... c/controls)
: [A-Frame – Make WebVR](https://aframe.io/)
: [A-Frame Examples](https://aframe.io/examples/)

Quelle: Unterhaltung mit Bing, 7.7.2023
(1) Navigations | Playwright. https://playwright.dev/docs/navigations.
(2) A-Frame – Make WebVR. https://aframe.io/.
(3) WinUI 3.0 Desktop - C# Page Navigation - Stack Overflow. https://stackoverflow.com/questions/680 ... navigation.

[r23]

Hallo,

Ich habe A-Frame und A-Frame - Extras in das Projekt über npm -install aufgenommen. Das Verzeichnis ~/js stört mich.

https://github.com/r23/MyOOS/commit/66c ... 2459db6df7

Vielleicht ist es falsch, vermutlich macht man dies ganz anders....

Vielleicht ändern wir dies zukünftig.

Aber kein Shopbetreiber wird mit npm - bei diesem Projekt irgendetwas updaten oder installieren.

Beste Grüße

Ralf

[r23]

Hallo,

ich habe zwei 360 Grad Ansichten von einem Kaufhaus in meinem Blog veröffentlicht und den Start der Entwicklung von einem VR Kaufhaus angekündigt.

https://blog.r23.de/software/open-sourc ... e-projekt/

In diesem Beitrag gehe ich auf die technischen Anforderungen und auf die geplanten Frameworks ein.

Fragen zu dem Projekt gerne hier.

Beste Grüße

Ralf

[r23]

Hallo,

als IDE verwenden wir für VR Shopping Visual Studio Code

Für Visual Studio Code gibt es auf Udemy zurzeit einen kostenlosen zweistündigen Kurs.
https://www.udemy.com/course/einfuhrung ... udio-code/

Installation und Konfiguration werden in diesem Kurs erklärt.

Beste Grüße

Ralf

[r23]

Hallo,

wir verwenden für den VR Raum eine NPM - Umgebung.

in dem Verzeichnis
~/MyOOS/vr_shopping> habe ich mit code . Visual Studio Code gestartet und im Terminal gab ich ein:

\MyOOS\vr_shopping> npm init -y

es wurde die package.json: erstellt.

Die package.json: wurde für das Projekt angepasst.


Unser VR Raum wird mit webpack später erstellt.

\MyOOS\vr_shopping> npm install webpack webpack-cli --save-dev


D.h. wir bauen in einer Entwicklungsumgebung unser VR-Kaufhaus und werden dann mit npm run build unsere JavaScripte für den Shop erzeugen.

Ich habe mit three.js installiert
\MyOOS\vr_shopping> npm install three --save-dev

\MyOOS\vr_shopping> npm install aframe --save-dev

Es kommt zu folgenden Hinweisen:


npm WARN skipping integrity check for git dependency ssh://git@github.com/dmarcos/three-buffer-vertex-data.git
npm WARN skipping integrity check for git dependency ssh://git@github.com/dmarcos/three-bmfont-text.git

8<-
Das sind Warnungen, die darauf hinweisen, dass npm die Integrität von Git-Abhängigkeiten nicht überprüfen kann, die direkt aus einem Repository installiert werden. Das bedeutet, dass npm nicht garantieren kann, dass der Code, den Sie herunterladen, mit dem übereinstimmt, was der Autor beabsichtigt hat. Dies kann ein Sicherheitsrisiko darstellen, wenn Sie nicht dem Autor oder dem Repository vertrauen. Um diese Warnungen zu vermeiden, können Sie entweder die Abhängigkeiten aus einer vertrauenswürdigen Quelle wie dem npm-Register installieren oder die Option `--no-verify` verwenden, um die Integritätsprüfung zu überspringen¹. Allerdings ist dies nicht empfohlen, da es die Sicherheit beeinträchtigen kann.

Quelle: Unterhaltung mit Bing, 31.7.2023
(1) [BUG] package-lock.json integrity value for git dependencies ... - GitHub. https://github.com/npm/cli/issues/2846.
8<-

ich habe wie in meinem Blogbeitrag angekündigt https://blog.r23.de/software/open-sourc ... e-projekt/
aframe-extras installiert
\MyOOS\vr_shopping> npm install --save aframe-extras

aframe-blink-controls

\MyOOS\vr_shopping> npm install aframe-blink-controls

man kommt Rückmeldungen. Hier eine Erklärung

npm ist ein Paketmanager für JavaScript, der es Ihnen ermöglicht, Module und Abhängigkeiten für Ihre Projekte zu installieren und zu verwalten. npm audit ist ein Befehl, der Ihre package.json-Datei analysiert und die Versionen Ihrer Abhängigkeiten mit einer Datenbank von bekannten Sicherheitslücken vergleicht. Wenn eine Schwachstelle gefunden wird, gibt npm audit Ihnen die Schwere der Schwachstelle und die Möglichkeit, sie zu beheben.

npm audit fix ist ein Befehl, der versucht, die unsicheren Abhängigkeiten Ihres Projekts automatisch zu aktualisieren. Allerdings macht er das nur für die Abhängigkeiten, die keine Probleme aufgrund von SEMVER-Regeln verursachen sollten. SEMVER steht für Semantic Versioning und ist ein Konventionssystem, das angibt, wie sich die Versionen von Paketen ändern. ²

Die Option --force ist eine gefährliche Option, weil sie die Abhängigkeiten unabhängig von allen Regeln aktualisiert. Das kann dazu führen, dass eine Abhängigkeit von Version 1.2.0 auf Version 2.3.0 springt, zum Beispiel. Das bedeutet, dass Funktionen, die Sie in Ihrem Projekt verwenden, möglicherweise nicht mehr existieren oder ein anderes Verhalten haben, was Ihr Projekt effektiv kaputt machen kann.

Um diese Frage zu beantworten: Sie müssen nichts machen, wenn Sie mit den aktuellen Versionen Ihrer Abhängigkeiten zufrieden sind und keine kritischen Sicherheitslücken haben. Wenn Sie jedoch alle Probleme (einschließlich derjenigen, die zu Kompatibilitätsproblemen führen können) beheben wollen, können Sie npm audit fix --force ausführen. Aber seien Sie vorsichtig und stellen Sie sicher, dass Sie wissen, was Sie tun und welche Auswirkungen es auf Ihr Projekt haben kann.

Beste Grüße

Ralf

[r23]

Die universal-controls Komponente ist eine veraltete Komponente, die in den neueren Versionen von aframe-extras durch die movement-controls Komponente ersetzt wurde¹. Die movement-controls Komponente ermöglicht es Ihnen, verschiedene Eingabegeräte wie Tastatur, Maus, Touchscreen oder Gamepad zu verwenden, um sich in Ihrer VR-Szene zu bewegen². Sie können die movement-controls Komponente einem Entity mit einer Kamera-Komponente hinzufügen, zum Beispiel:

<a-entity camera look-controls movement-controls="controls: keyboard"></a-entity>

Sie können auch verschiedene Steuerungsmodi auswählen, wie z.B. teleportieren, fliegen oder gehen. Sie können auch die checkpoint-controls Komponente verwenden, um sich zu bestimmten Punkten in der Szene zu bewegen, indem Sie auf sie klicken². Sie können mehr über die movement-controls und checkpoint-controls Komponenten in der Dokumentation von aframe-extras lesen³.

Ich hoffe, das beantwortet Ihre Frage. Wenn Sie mehr über aframe-extras erfahren möchten, können Sie sich auch einige Beispiele auf GitHub ansehen³.

Quelle: Unterhaltung mit Bing, 1.8.2023
(1) Interactions & Controllers – A-Frame. https://aframe.io/docs/1.4.0/introducti ... llers.html.
(2) How do I use checkpoint controls in A-Frame? - Stack Overflow. https://stackoverflow.com/questions/608 ... in-a-frame.
(3) c-frame/aframe-extras: Add-ons and helpers for A-Frame VR. - GitHub. https://github.com/c-frame/aframe-extras.
(4) undefined. https://glitch.com/~museum-exhibit-demo.

[r23]

Hallo,

ich habe Enable3D in das Projekt aufgenommen


Ein weiteres Projekt, das erwähnenswert ist, ist "Enable3D"[5]. Dies ist ein 3D-Framework auf Basis von Three.js und Ammo.js, das nahtlos mit Phaser 3 integriert werden kann. Es bietet eine Vielzahl von Beispielen und Vorlagen für die Erstellung von 3D-Spielen und -Anwendungen, einschließlich der Möglichkeit, durch Räume und Umgebungen zu navigieren.

Es ist auch erwähnenswert, dass die offizielle Three.js-Dokumentation[4] eine Anleitung zur Erstellung von VR-Inhalten bietet, einschließlich der Erstellung von Räumen und Umgebungen. Die Dokumentation bietet eine umfassende Einführung in die Erstellung von VR-Inhalten mit Three.js und bietet viele Beispiele und Vorlagen, die als Ausgangspunkt für eigene Projekte dienen können.

[1] https://github.com/ngokevin/kframe/tree ... nts/room[4] https://threejs.org/docs/
[5] https://enable3d.io/examples.html

Citations:
[1] https://blenderartists.org/t/best-optio ... 042?page=3
[2] https://www.npmjs.com/search?q=enable3d
[3] https://voskan.host/2023/04/05/react-th ... metaverse/
[4] https://threejs.org/docs/
[5] https://enable3d.io/examples.html
[6] https://github.com/enable3d/enable3d


Eine Sammlung von Beispielen a-frame hier
https://github.com/supermedium/superframe/tree/master

[r23]

Hallo,

ich habe Enable3D in das Projekt aufgenommen

MyOOS\vr_shopping> npm install enable3d --save-dev


Ein weiteres Projekt, das erwähnenswert ist, ist "Enable3D"[5]. Dies ist ein 3D-Framework auf Basis von Three.js und Ammo.js, das nahtlos mit Phaser 3 integriert werden kann. Es bietet eine Vielzahl von Beispielen und Vorlagen für die Erstellung von 3D-Spielen und -Anwendungen, einschließlich der Möglichkeit, durch Räume und Umgebungen zu navigieren.

Es ist auch erwähnenswert, dass die offizielle Three.js-Dokumentation[4] eine Anleitung zur Erstellung von VR-Inhalten bietet, einschließlich der Erstellung von Räumen und Umgebungen. Die Dokumentation bietet eine umfassende Einführung in die Erstellung von VR-Inhalten mit Three.js und bietet viele Beispiele und Vorlagen, die als Ausgangspunkt für eigene Projekte dienen können.

[1] https://github.com/ngokevin/kframe/tree ... nts/room[4] https://threejs.org/docs/
[5] https://enable3d.io/examples.html

Citations:
[1] https://blenderartists.org/t/best-optio ... 042?page=3
[2] https://www.npmjs.com/search?q=enable3d
[3] https://voskan.host/2023/04/05/react-th ... metaverse/
[4] https://threejs.org/docs/
[5] https://enable3d.io/examples.html
[6] https://github.com/enable3d/enable3d


Eine Sammlung von Beispielen a-frame hier
https://github.com/supermedium/superframe/tree/master

[r23]

Wir haben jetzt eine Entwicklungsumgebung für VR Shopping eingerichtet.


Eben etwas Wissen auffrischen oder neues lernen ist jetzt wichtig

Für Visual Studio Code gibt es auf Udemy zurzeit einen kostenlosen zweistündigen Kurs.
https://www.udemy.com/course/einfuhrung ... udio-code/

Für A-Frame gibt es einen kostenlosen Kurs auf
https://www.codecademy.com/enrolled/cou ... rn-a-frame

Beste Grüße

Ralf

[r23]

Hallo,

ich habe Enable3D in das Projekt aufgenommen

MyOOS\vr_shopping> npm install enable3d --save-dev


Ein weiteres Projekt, das erwähnenswert ist, ist "Enable3D"[5]. Dies ist ein 3D-Framework auf Basis von Three.js und Ammo.js, das nahtlos mit Phaser 3 integriert werden kann. Es bietet eine Vielzahl von Beispielen und Vorlagen für die Erstellung von 3D-Spielen und -Anwendungen, einschließlich der Möglichkeit, durch Räume und Umgebungen zu navigieren.

Es ist auch erwähnenswert, dass die offizielle Three.js-Dokumentation[4] eine Anleitung zur Erstellung von VR-Inhalten bietet, einschließlich der Erstellung von Räumen und Umgebungen. Die Dokumentation bietet eine umfassende Einführung in die Erstellung von VR-Inhalten mit Three.js und bietet viele Beispiele und Vorlagen, die als Ausgangspunkt für eigene Projekte dienen können.

[1] https://github.com/ngokevin/kframe/tree ... nts/room[4] https://threejs.org/docs/
[5] https://enable3d.io/examples.html

Citations:
[1] https://blenderartists.org/t/best-optio ... 042?page=3
[2] https://www.npmjs.com/search?q=enable3d
[3] https://voskan.host/2023/04/05/react-th ... metaverse/
[4] https://threejs.org/docs/
[5] https://enable3d.io/examples.html
[6] https://github.com/enable3d/enable3d


Eine Sammlung von Beispielen a-frame hier
https://github.com/supermedium/superframe/tree/master

[r23]

Anleitung einer Metaverse - Umgebung


React, Three.js, and A-Frame: Unlocking the Power of Web-Based Virtual Experiences in the Metaverse
https://voskan.host/2023/04/05/react-th ... metaverse/