Erstellung von einem SSL-Zertifikat

Virtual Reality Web-App mit Blender und Three.js Teil 2

Als wir den Artikel über die Baker Street schrieben, hatten wir sehr kurz die Idee, mal eben einen virtuellen Rundgang durch das Haus mit der Nummer 221 B zu erstellen, weil wir zurzeit ein viktorianisches Zimmer in Blender, dem Open-Source-3D-Computergrafikprogramm, modellieren.

Sie haben es eilig? Dann speichern Sie diesen Blogartikel von R23 als PDF

Brauchen Sie den Inhalt dieses Artikels “Virtual Reality Web-App mit Blender und Three.js Teil 2” schnell und bequem? Dann speichern Sie ihn doch einfach als PDF!

Die literarischen Figuren Sherlock Holmes und Dr. Watson wohnten allerdings “nur” in einer möblierten Wohnung. Und wir hätten uns an die literarische Beschreibung oder einer Interpretation aus einem Film halten müssen. Die Idee haben wir vor diesem Hintergrund relativ schnell verworfen.

Übrig blieb nur der Wunsch, auf die Erstellung eines Virtual Reality – VR Erlebnisses mit dem viktorianischen Zimmer, ohne externe Inhalte, weil wir hierdurch auf die nervigen Cookie-Banner für unsere Leserinnen und Leser verzichten können. Apropos Cookie-Banner, da haben wir eine Browser--Empfehlung für Sie, damit Sie endlich ungestört wieder surfen können.

Verwandeln Sie Ihren Commerce mit 3D-Visualisierung von R23

Ein Maskottchen / Charakter transportiert die Botschaft Ihrer Dienstleistungen und Produkte nach außen. Darüber hinaus kann ein Maskottchen / Charakter für einen Wiedererkennungswert sorgen.

Charakterdesign / Maskottchen

Wir bieten Ihnen Maskottchen / Charakter Design für Ihre Marke, in 3D oder als Zeichnung. Ihre einzigartige Sympathiefigur.

Neue Browser-Erweiterung entfernt Cookie-Banner

Wussten Sie schon, gegen die lästigen Cookie-Einwilligungs-Banner, hat die Verbraucherzentrale Bayern die quelloffene Browser-Erweiterung “Nervenschoner” entwickelt.

Zurück zu unserem Thema, Virtual Reality – Erlebnis auf der eigenen Webseite.

Wir haben relativ schnell einen passenden E-Learning-Kurs gefunden und belegen diesen zurzeit. Im ersten Teil wurde ein einfaches Gebäude in modelliert.

Web-App mit und Three.js

Bei der Buchung von dem Kurs gingen wir von einer Umgebung aus. Lieder wurde die Programmierung “leicht” erweitert.

In dem Kurs haben wir uns mal eben Visual Studio Code installiert und dann in einem Schnelldurchlauf eine Notes.js Umgebung eingerichtet. Mit Webpack, A-Frame, und weiteren Frameworks, die man vermutlich für ein Virtual Reality – Erlebnis benötigt.

Nach einer etwas komplizierten Programmierung wurden wir mit der Erstellung von einem SSL-Zertifikat auf einem Windows Rechner konfrontiert. Da wir die Befehle mit Sicherheit bis zu unserem nächsten Web-App mit und Javascript Frameworks Projekt vergessen haben, notieren wir dies in unserem Blog.

Wir würden uns freuen, wenn auch weitere Leserinnen und Leser die folgende Zusammenfassung der Erstellung von einem SSL-Zertifikat gebrauchen können.

Erstellung von einem SSL-Zertifikat

Zuerst wird Openssl benötigt. Openssl sollte auf dem System vorhanden sein.

Erstellung von einem SSL-Zertifikat
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

Dialog

Nach Eingabe von dem Befehl gehen Sie bitte wie folgt vor:

Country Name (2 letter code) [AU]: DE

Hier ist der Länderkürzel anzugeben. Für Deutschland “DE”, Österreich “AT”…

State or Province Name (full name) [Some-State]: North Rhine Westphalia

Hier geben Sie bitte das Bundesland des Inhabers ein

Locality Name (eg, city) []: Hagen

Hier geben den Ort des Inhabers ein

Organization Name (eg, company) [Internet Widgits Pty Ltd]: Ihr Unternehmen

Hier geben Sie den Firmennamen / Organisationsnamen / Vor- und Zunamen ein, je nachdem, was am zutreffendsten ist

Organizational Unit Name (eg, section) []:

Hier können Sie eine Abteilung eingeben, dieses Feld soll in der Regel aber leer bleiben.

Common Name (eg, YOUR name) []:

Hier geben Sie die zu sichernde Site ein.

Email Address []: webmaster@DOMAIN.TLD

Hier geben Sie Ihre E-Mail-Adresse ein (WICHTIG: Diese muss der Inhaber abrufen können.

Gegebenenfalls werden Sie nach folgenden ‘extra’-Angaben gefragt

A challenge password []: An optional company name []:

Dies bitte leer lassen.

npm run build

Nach der Programmierung erzeugen wir für unser Projekt die main.js.

npm run build

C:\xampp\htdocs\web3d>npm run build

web-page@1.0.0 build
webpack

asset main.js 2.68 MiB [emitted] [minimized] [big] (name: main) 1 related asset
orphan modules 4.17 MiB [orphan] 102 modules
runtime modules 221 bytes 1 module
cacheable modules 6.41 MiB
modules by path ./node_modules/@yandeu/events/cjs/*.js 6.91 KiB
./node_modules/@yandeu/events/cjs/index.js 6.68 KiB [built] [code generated]
./node_modules/@yandeu/events/cjs/version.js 236 bytes [built] [code generated]
./src/index.js + 57 modules 3.7 MiB [built] [code generated]
./node_modules/aframe/dist/aframe-master.js 2.38 MiB [built] [code generated]
./node_modules/matter-js/build/matter.js 334 KiB [built] [code generated]

Es folgen einige Hinweise

WARNUNG in der Konfiguration
Die Option ‘mode’ wurde nicht gesetzt, Webpack wird auf ‘production’ für diesen Wert zurückgreifen.
Setzen Sie die Option ‘mode’ auf ‘development’ oder ‘production’, um Standardwerte für jede Umgebung zu aktivieren.
Sie können sie auch auf ‘none’ setzen, um jegliches Standardverhalten zu deaktivieren. Weitere Informationen: https://webpack.js.org/configuration/mode/

WARNUNG bei Größenbeschränkung von Assets: Die folgenden Assets überschreiten die empfohlene Größenbeschränkung (244 KiB).
Dies kann die Webleistung beeinträchtigen.
Assets:
main.js (2.68 MiB)

WARNUNG bei der Größenbeschränkung für Eintragspunkte: Die kombinierte Größe der folgenden Eintragspunkte überschreitet die empfohlene Grenze (244 KiB). Dies kann die Web-Performance beeinträchtigen.
Einstiegspunkte:
main (2.68 MiB)
main.js

WARNUNG in den Webpack-Leistungsempfehlungen:
Sie können die Größe Ihrer Bundles begrenzen, indem Sie import() oder require.ensure verwenden, um einige Teile Ihrer Anwendung mit Verzögerung zu laden.
Für weitere Informationen besuchen Sie https://webpack.js.org/guides/code-splitting/

Server starten in der Entwicklungsumgebung

Zuerst installieren wir uns den Webserver aus Notes

npm install --global http-server

Anleitung: https://www.npmjs.com/package/http-server

Starten mit

http-server -S -C cert.pem

Notes Webserver

Der Server startet mit folgenden Informationen:

Starting up http-server, serving ./ through https

http-server version: 14.1.1

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
https://192.168.178.29:8080
https://127.0.0.1:8080
Hit CTRL-C to stop the server

Heutiges Ergebnis

Web-App

Screenshot

Virtual Reality Web-App

A-Frame schreibt über Interaktionen und Steuerungen

Aufgrund der Vielzahl von Plattformen, Geräten und Eingabemethoden, die A-Frame unterstützen kann, gibt es keine einheitliche Methode, um Interaktionen hinzuzufügen. Darüber hinaus ist die VR-Interaktion ergebnisoffen. Anders als im 2D-Web, wo wir uns nur um Maus- und Berührungseingaben kümmern müssen, und anders als bei Cardboard, wo wir uns nur um eine Taste kümmern müssen, können wir in VR alles tun: greifen, werfen, reiben, drehen, stoßen, strecken, drücken usw. Darüber hinaus bieten Mixed Reality, Tracker und benutzerdefinierte Controller sogar noch mehr bei der Interaktion!

Quelle: https://aframe.io/docs/1.3.0/introduction/interactions-and-controllers.html

Wie geht es weiter?

In dem Online-Kurs werden nun weitere Möglichkeiten eingebaut. Wir werden vermutlich noch eine weitere Navigation durch den Raum ermöglichen, damit Anwenderinnen und Anwender im 2D-Web sich das Gebäude zumindest auf ihrem Monitor ansehen können, wenn sie keinen Joystick an ihrem Computer haben.

Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen uns damit eine große Freude!

Wie können wir Ihnen helfen?

Wir unterstützen Sie bei der Umsetzung Ihres Augmented Reality (AR) oder Virtual Reality (VR) Projektes! Ob Produktfotografie, 3D-Scan-Service, 3D-Visualisierung oder fertige 3D-Modelle für AR/VR – wir beraten Sie persönlich und unverbindlich.

Wenn Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen (Fotos, Zeichnungen, Skizzen) wünschen, nutzen Sie einfach unser Anfrageformular.


Beitragsautor R23

3D-Modelle für Metaverse und Echtzeit-Anwendungen: VR, AR und mehr

Als Atelier für Metaverse Inhalte und interaktive Markenerlebnisse bieten wir Ihnen eine breite Palette an 3D-Modellen, die sich perfekt für Echtzeitanwendungen eignen. Ob Sie in eine virtuelle Welt eintauchen wollen (Virtual Reality, VR), virtuelle Objekte in die reale Welt einblenden wollen (Augmented Reality, AR) oder beides kombinieren wollen (Mixed Reality, MR) – unsere Modelle sind für alle Formen von Extended Reality (XR) optimiert. Dank unserer Expertise können Sie wertvolle Entwicklungszeit und -kosten sparen. Nutzen Sie unsere 3D-Modelle als Prototypen für Ihre XR-Erfahrungen oder integrieren Sie sie in Ihr fertiges Projekt. Wir stehen Ihnen gerne mit Rat und Tat zur Seite und sorgen dafür, dass Ihre Markenerlebnisse einzigartig und unvergesslich werden.

3D-Visualisierung
3D-Scan – Dienstleistung

Angebot anfordern


Kommentare

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert