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

3D-Visualisierung Schlagwörter: , , , 0 Kommentare

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.

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.

V/AR Modelle bereit für Metaverse

Sparen Sie Entwicklungszeit und -kosten, machen Sie Prototypenerfahrungen oder verwenden Sie unsere 3D-Modelle in Ihrem V/AR Projekt.
Charakterdesign / Maskottchen

Der neue Trend nennt sich VR-Commcere. Mit dem Browser in die erweiterte Realität, ohne App. Wir haben es umgesetzt.

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.

Virtual Reality Web-App mit und Three.js

Bei der Buchung von dem Kurs gingen wir von einer Three.js 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, Three.js 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- auf einem Windows Rechner konfrontiert. Da wir die Befehle mit Sicherheit bis zu unserem nächsten Virtual Reality 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- gebrauchen können.

Erstellung von einem SSL-

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

Virtual Reality 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 Kreativität 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.

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.

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

R23 Newsletter

ABONNIEREN SIE UNSEREN NEWSLETTER

Liebe Leserin, lieber Leser,

wenn Sie sich für aktuelle Themen und Tipps rund um unser Atelier für Virtual & interessieren, dann melden Sie sich jetzt für unseren kostenlosen Newsletter an. Sie erhalten wöchentlich eine E-Mail mit spannenden Artikeln, exklusiven Angeboten und praktischen Ratschlägen.

Um sich anzumelden, füllen Sie einfach das folgende Formular aus und klicken Sie auf “SETZ DICH AUF DIE LISTE”. Sie können sich jederzeit wieder abmelden, wenn Sie möchten.

Wir freuen uns auf Ihre Anmeldung!

Wir senden keinen Spam! Erfahren Sie mehr in unserer Datenschutzerklärung.

Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen uns damit eine große Freude!
R23
R23 : Metaverse, Augmented Reality, Virtual Reality

Kommentar verfassen

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

Ralf Dreiundzwanzig: Atelier für Virtual & Augmented Reality

Aktuell

Virtuelle Influencerin

Charakterdesign
In unserem r23 Atelier in Hagen entwerfen wir für Ihr Unternehmen, Ihre Organisation oder Ihr Projekt die passende virtuelle Influencerin. Wir entwerfen gerade eine virtuelle Influencerin für uns selbst. Verfolgen Sie die Entstehung auf https://blog.r23.de/tag/claudia/
Virtuelle Influencer von R23