# data[].attributes.body
Sammlung AR

# data[].attributes.body
Multi-User-VR-Welten ergänzen (youtube, pfd, sketchfab)

# data[].attributes.body
Jens Tiburski für VR
(mit Body)

# data[].attributes.body
Mann Braun Brille

# data[].attributes.body
Mann Braun

# data[].attributes.body
Frau Braun mit Brille

# data[].attributes.body
Frau Braun

# data[].attributes.body
Frau Blond mit Brille

# data[].attributes.body
Frau Blond

# data[].attributes.body
Jens Tiburski

# data[].attributes.body
Multi-User-VR-Welten mit Mozilla Hubs/Spoke für Lehrer

# data[].attributes.body
Eigene Welten für Google-CardBox teilen ...

# data[].attributes.attachment_link.readable_text
I started this VRBox application in VRMath2 since 2016 but stopped developing further in 2017. A blog about the use of Cardboard VR for 3D virtual worlds created in VRMath2 was published here. Basically, any 3D virtual worlds created in VRMath2 Editor or published/blogged in VRMath2 community can be viewed with Cardboard VR boxes.

The VRBox application can be accessed directly in your mobile browser. I have only tested in my iPhone 6 with Safari. Below are some screenshots and instructions about how to use this applicaiton. First thing first, in mobile Safari, type in the URL: https://vrmath2.net/VRBox to visit this applicaiton. Once loaded, you should see the welcome screen and some tutorial steps to use this applicaiton.

If you touch on Skip or End Tutorial button, then you will enter the application and by default, in a virtual world with some rotating cubes as shown below. Can you figure out how many cubes are there in this world? You should be able to rotate around to see cubes in any directions.

Please note that in iOS 12.2 Safari, Apple has made the access to motion sensor as privacy setting. If you cannot look around this virtual world by moving around the mobile phone, you should goto the iPhone Settings --> Safari --> Motion and Orientation Access to enable access to your mobile sensors.

If you are using iOS 13 Safari or later version, it will ask for your permission for motion sensor access. Please tap OK to allow access to motion sensor data.

All other mobile browsers such as Chrome or Firefox should work without permission.

At this point, if you shake your phone (left - right), you should see a menu pop up. Some of the functions such as login to browse 3D virtual worlds in VRMath2 community has not yet been implemented. Feel free to try out some of these functions.

Next, if you rotate your phone to landscape orientation, you should be able to see the stereoscopic views. Then, put your phone into a Cardboard box if you have to experience some immersive VR. When viewing in VR mode, shake your phone (up - down) you can get an interactive cursor. For this particular cubes world, you can point the cursor on every cube to stop and start their rotation. See how quick you can stop them all.

Cardboard boxes are quite affordable and you can find them on eBay or in Officeworks etc. In my Makerspace project, my nephew and I also made one VR glasses for this type of Cardboard VR using 3D printing. You can find this VR glasses at Thingiverse at https://www.thingiverse.com/thing:3431576.

If you like to know more about this VRBox application, please feel free to post in the Forum, or leave comments in the VRBox world blog.

# data[].attributes.attachment_link.description
I started this VRBox application in VRMath2 since 2016 but stopped developing further in 2017. A blog about the use of Cardboard VR for 3D virtual worlds created in VRMath2 was published here. Basically, any 3D virtual worlds created in VRMath2 Editor or published/blogged in VRMath2 community can be viewed with Cardboard VR boxes.

# data[].attributes.body
360°-Tour mit Lumi erstellt und bei LernSax hochgeladen ...

# data[].attributes.body
H5P-Datein offline erstellen und exportieren als h5p-Dateien oder Webseiten. u.a. auch 360°-Touren...

# data[].attributes.attachment_link.description
Lumi is a desktop app that allows you to create, edit and view interactive content with dozens of different content types.

# data[].attributes.body
Roboterarm

# data[].attributes.body
3D-Welten erzeugen und veröffentlichen, LOGO Programmierung in 3D

# data[].attributes.attachment_link.title
VRMath 2.0 | Design, Create and Share online 3D Virtual Worlds

# data[].attributes.attachment_link.description
VRMath2 is an online learning community for all to design, create, and share online 3D virtual worlds.

# data[].attributes.body
Viewer und Converter

# data[].attributes.attachment_link.description
Convert 3D files such as FBX, STL, OBJ, 3DS, GLTF, DRC, RVM, PDF, X, JT, DXF, PLY, 3MF & ASE to FBX, OBJ, 3DS & DRC formats.

# data[].attributes.body
mit der ZUM-App

# data[].attributes.attachment_link.readable_text
We are happy to introduce the first set of custom elements for the immersive web we have been working on: <img-360> and <video-360>

From the Mixed Reality team, we keep working on improving the content creator experience, building new frameworks, tools, APIs, performance tuning and so on.
Most of these projects are based on the assumption that the users have a basic knowledge of 3D graphics and want to go deep on fully customizing their WebXR experience, (eg: using A-Frame or three.js).
But there are still a lot of use cases where content creators just want very simple interactions and don't have the knowledge or time to create and maintain a custom application built on top of a WebXR framework.

With this project we aim to address the problems these content creators have by providing custom elements with simple, yet polished features. One could be just a simple 360 image or video viewer, another one could be a tour allowing the user to jump from one image to another.

Custom elements provide a standard way to create HTML elements to provide simple functionality that matches expectations of content creators without knowledge of 3D, WebXR or even Javascript.

How does this work?

Just include the Javascript bundle on your page and you could start using both elements in your HTML: <img-360> and <video-360>. You just need to provide them with a 360 image or video and the custom elements will do the rest, including detecting WebVR support. Here is a simple example that adds a 360 image and video to a page. All of the interaction controls are generated automatically:

You can try a demo here and find detailed information on how to use them on Github.

Next steps

Today we are releasing just these two elements but we have many others in mind and would love your feedback. What new elements would you find useful? Please join us on GitHub to discuss them.
We are also excited to see other companies working hard on providing quality custom elements for the 3D and XR web as Google with their<model-viewer> component and we hope others will follow.

# data[].attributes.attachment_link.description
We are happy to introduce the first set of custom elements for the immersive web we have been working on: <img-360> and <video-360> From the Mixed Reality team, we keep working on improving the content creator experience, building new frameworks, tools, APIs, performance tuning and so

# data[].attributes.body
Mathewelt

# data[].attributes.body
360°-Panorama-Tour erstellen (auf LernSax)

# data[].attributes.body
360°-Panoramen aus CoSpacesEdu exportieren

# data[].attributes.attachment_link.title
Erstellung von 360 Grad Panoramabildern mit CoSpacesEdu

# data[].attributes.body
Lernkarten

# data[].attributes.body
Ebenfalls auf LernSax: Alles über 360°-Bilder

# data[].attributes.attachment_link.readable_text
Ein etwas aufwändigeres Beispiel für eine 360°-Tour. Diese Tour wurde mit Panoramabildern über WebVR erstellt. Alle Bilder können damit auf dem LernSax-Server liegen. Das Menü ist über Image Mapping erstellt. Ganz links wurde eine Google-Tour-Map eingebunden.

Ideen zur Nachnutzung

Eine solche 360°-VR-Tour zu erstellen ist also kein Hexenwerk. Wenn jetzt jemand Lust bekommen hat, das einmal selbst auszuprobieren - eventuell auch im Zusammenhang mit einem "virtuellen" Tag der offenen Tür - bin ich gern bereit, mein Unterstützung anzubieten.

# data[].attributes.attachment_link.description
Ein etwas aufwändigeres Beispiel für eine 360°-Tour. Diese Tour wurde mit Panoramabildern über WebVR erstellt. Alle Bilder können damit auf dem LernSax-Server liegen. Das Menü ist über Image Mapping erstellt. Ganz links wurde eine Google-Tour-Map eingebunden. Eine solche 360°-VR-Tour zu erstellen ist also kein Hexenwerk.

# data[].attributes.body
Vollständig auf LernSax gehostete WebVR-Tour

# data[].attributes.body
auf LernSax

# data[].attributes.body
auf komplett auf LernSax gehostet

# data[].attributes.body
360-Grad-Panorama

# data[].attributes.body
360-Grad-Panorama

# data[].attributes.body
360-Grad-Panorama

# data[].attributes.body
Anleitungen zum online-3D-Editor BlockCAD

# data[].attributes.attachment_link.readable_text
The Intro Series is intended as an introduction to programming and creating models in BlocksCAD. The activities are suitable for grades 3-12.
Intro Series Lesson Summaries

The Math Series is a set of Common Core Math Standard-aligned lessons, with handouts to go with, covering a wide variety of math topics. The activities are suitable for grades 3-12
Math Series Lesson Summaries

Access these lessons electronically from within any class by clicking the "Assignments" tab.

# data[].attributes.attachment_link.description
The Intro Series is intended as an introduction to programming and creating models in BlocksCAD. The activities are suitable for grades 3-12. Intro Series Lesson Summaries The Math Series is a set of Common Core Math Standard-aligned lessons, with handouts to go with, covering a wide variety of math topics.

# data[].attributes.body
als VR-Klassenzimmer

# data[].attributes.attachment_link.readable_text
Online Unterricht.

VR im Unterricht.

Der Vorteil gegenüber dem herkömmlichen Online-Unterricht ist, dass eine virtuelle Anwesenheit gegeben ist. Es braucht keine grosse Umstellung und ist auch geeignet für Lehrer/innen, die digital und technisch nicht so vertraut sind. Diese können sich Schüler oder Personen zur Hilfe nehmen, die im Unterricht mit den Media-Inhalten aushelfen.

Auch junge Kinder können am Unterricht teilnehmen. Die Avatare sind sympatisch und spielerisch und können auch selber gestaltet werden.

Ein Vorteil für das virtuelle Unterrichten ist, das zum Schüler Hinbewegen. Die Schüler können sich auch formieren und in Gruppen aufgeteilt werden, um Klassenarbeiten zu erstellen. Weitere Personen oder Eltern können zur technischen Unterstützung auch dabei sein. In Virtual Reality kann mit den Händen gestikuliert werden, um eine realistischere Atmosphäre im digitalen Unterricht zu erzeugen.

Um in VR teilzunehmen braucht es ein VR Headset. Die günstigste Variante ist die Oculus Quest ab CHF 450.-. Du kannst mit der Oculus Quest den Unterricht führen und zusätzlich mit deinem Computer die medialen Inhalte einfügen und bedienen.

# data[].attributes.attachment_link.description
Online Unterricht. VR im Unterricht. Der Vorteil gegenüber dem herkömmlichen Online-Unterricht ist, dass eine virtuelle Anwesenheit gegeben ist. Es braucht keine grosse Umstellung und ist auch geeignet für Lehrer/innen, die digital und technisch nicht so vertraut sind. Diese können sich Schüler oder Personen zur Hilfe nehmen, die im Unterricht mit den Media-Inhalten aushelfen.

# data[].attributes.body
Neuigkeiten

# data[].attributes.attachment_link.readable_text
Vor einigen Monaten haben wir eine erste Preview von Hubs by Mozilla angekündigt: ein Experiment, das Social Mixed Reality in den Browser bringt. Seitdem haben wir Benutzerfreundlichkeit, Performance und die Unterstützung für Einzelgeräte wie Oculus Go maßgeblich verbessert. Heute ist es an der Zeit für unser erstes großes Funktionsupdate für Hubs: Ab sofort können Sie Videos, Bilder, Dokumente und sogar 3D-Modelle in Hubs teilen, indem Sie einfach den Link zu den Dateien einfügen.

Die Fortschritte, die wir in den letzten Monaten gemacht haben, haben uns gezeigt, dass das offene Web die beste Plattform ist, um sich in der Mixed Reality zu treffen. Einen Raum in Hubs können Sie mit jedem beliebigen, auf dem Markt verfügbaren VR-Gerät oder einfach mit Ihrem Telefon oder PC betreten. Hubs ist so einfach zu bedienen, dass unser Team mittlerweile sogar die regelmäßigen VR-Standup-Meetings damit durchführt!

Für den Browser können wir besonders leicht verständliche Funktionen entwickeln, da die Nutzer*innen ja bereits wissen, wie das Web funktioniert: Laden Sie andere ganz einfach in einen Raum in Hubs ein, indem Sie ihnen einen Link schicken. Ab sofort können Sie ähnlich unkompliziert auch Ihre Lieblingsinhalte in Hubs teilen: Kopieren Sie einfach den Link zu einem beliebigen Inhalt und fügen Sie ihn in den Raum ein!

Wenn Sie ein YouTube-Video teilen möchten, gehen Sie mit Ihrem PC oder Telefon in einen Hubs-Raum und fügen Sie die URL des Videos ein. So einfach ist das! Das Video erscheint dann im Raum und wird automatisch abgespielt. Sie können es beliebig im Raum verschieben oder an einer Wand platzieren.

Die Möglichkeit, ein Video so einfach in der virtuellen Realität mit Freunden teilen zu können, ist eine vollkommen neue Web-Erfahrung - und in Hubs nur der Anfang.

Sie können die URL von jedem Bild im Web einfügen. Darüber hinaus werden alle beliebten Bildseiten wie imgur und Giphy optimal unterstützt. 3D-Inhalte funktionieren ebenfalls: Teilen Sie Links zu 3D-Modellen in Sketchfab oder Poly oder zu einer beliebigen GLTF-Szene. Es ist fast ein bisschen wie Zauberei.

Und das ist noch lange nicht alles. Eventuell haben Sie einige Dinge, die Sie mit anderen teilen möchten - wie etwa Fotos und Dokumente - direkt auf Ihrem Handy oder PC gespeichert. Diese Dateien können Sie in Hubs hochladen oder per Drag and Drop hinzufügen; Sie können auch Inhalte aus der Zwischenablage einfügen. Laden Sie Ihre Präsentationsfolien als PDF-Datei hoch und blättern Sie sie gemeinsam in der virtuellen Realität durch. Exportieren Sie ein 3D-Modell nach GLTF, ziehen Sie es in den Browser und alle anderen sehen es in 3D. Laden Sie ein paar Fotos von Ihrem Handy hoch und erstellen Sie gemeinsam eine Galerie. Machen Sie einen Screenshot, kopieren Sie ihn in die Zwischenablage und fügen Sie ihn direkt in den Raum ein.

Ihre Privatsphäre bleibt dabei geschützt: Wir haben sichergestellt, dass alle Inhalte, die Sie hochladen, nur für die anderen Personen im Raum verfügbar sind. Alle Dateien werden verschlüsselt und direkt wieder entfernt, sobald sie nicht mehr benötigt werden. Wie immer ist der gesamte Code Open Source, sodass Sie selbst nachvollziehen können, wie er funktioniert.

Wir finden es unglaublich spannend, dass wir Social Mixed Reality im Browser schon heute auf eine ganz neue Art und Weise erleben können - und es gibt unendlich viele Möglichkeiten, diese neuen Funktionen zu nutzen. Um Ihrer Kreativität ein wenig auf die Sprünge zu helfen, werden wir demnächst einige kurze Video-Tutorials veröffentlichen. Wir planen auch, kontinuierlich weitere Content-Typen hinzuzufügen und arbeiten bereits an neuen Methoden, wie Sie Medien in Hubs einfügen können. Wenn Sie Ideen, Feedback oder Vorschläge für uns haben, lassen Sie es uns wissen und melden Sie sich im Channel #social im WebVR Slack an oder reichen Sie ein Github Issue ein.

Wir wünschen Ihnen viel Spaß beim Testen der neuen Funktionen!

# data[].attributes.attachment_link.title
Hubs by Mozilla: Bilder, Videos und 3D-Modelle im Social Mixed Reality Raum teilen - Mozilla Presse-Center

# data[].attributes.attachment_link.description
Vor einigen Monaten haben wir eine erste Preview von Hubs by Mozilla angekündigt: ein Experiment, das Social Mixed Reality in den Browser bringt. Seitdem haben wir Benutzerfreundlichkeit, Performance und die Unterstützung für Einzelgeräte wie Oculus Go maßgeblich verbessert.

# data[].attributes.body
WebVR

# data[].attributes.attachment_link.description
A free, 5-part video course with interactive code examples that will teach you the fundamentals of WebVR using A-Frame.

# data[].attributes.attachment_link.readable_text
Bemerkungen

In diesem Abschnitt erhalten Sie einen Überblick über das, was ein Name ist und warum ein Entwickler es verwenden möchte.

Es sollte auch alle großen Themen innerhalb von aframe erwähnen und auf die verwandten Themen verweisen. Da die Dokumentation für aframe neu ist, müssen Sie möglicherweise erste Versionen dieser verwandten Themen erstellen.

Versionen

A-Frame 0.x

Legacy-Versionen

Eigenschaften

Fügen Sie einfach ein script Tag und a-scene . A-Frame kann mit 3D-Boilerplate, VR-Einstellungen und Standardsteuerungen arbeiten. Nichts zu installieren, keine Buildschritte.

HTML ist leicht zu lesen, zu verstehen und zu kopieren und einzufügen. A-Frame basiert auf HTML und ist für jeden zugänglich: Webentwickler, VR-Enthusiasten, Künstler, Designer, Pädagogen, Macher, Kinder.

Erstellen Sie VR-Anwendungen für Vive, Rift, Daydream, GearVR und Cardboard mit Unterstützung für alle entsprechenden Controller. Hast du kein Headset oder Controller? Kein Problem! A-Frame funktioniert weiterhin auf Standard-Desktops und Smartphones.

A-Frame ist ein leistungsstarkes Three.js-Framework, das eine deklarative, zusammensetzbare, wiederverwendbare Entity-Component-Struktur.js bereitstellt. HTML ist nur die Spitze des Eisbergs. Entwickler haben uneingeschränkten Zugriff auf JavaScript, DOM-APIs, three.js, WebVR und WebGL.

A-Frame ist von Grund auf für WebVR optimiert. Während A-Frame das DOM verwendet, berühren seine Elemente nicht die Browser-Layout-Engine. 3D-Objektaktualisierungen werden alle mit einem einzigen requestAnimationFrame-Aufruf mit wenig Aufwand im Speicher ausgeführt. Weitere Informationen finden Sie unter A-Painter, einem in A-Frame integrierten Tilt Brush-Klon, der wie native (90+ FPS) ausgeführt wird.

Da das Web auf der Idee des HTML basiert, ist A-Frame mit den meisten Bibliotheken, Frameworks und Tools kompatibel, darunter React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery.

A-Frame bietet einen praktischen integrierten visuellen 3D-Inspector. Öffne eine A-Frame-Szene, drücke Strg + Alt + I und fliege dahin, um hinter die Motorhaube zu schauen !

Nehmen Sie leistungsstarke Komponenten, die von Entwicklern veröffentlicht wurden, und fügen Sie sie direkt aus HTML hinzu. Ähnlich wie beim Unity Asset Store sammelt und kuratiert die A-Frame-Registry diese Komponenten für eine einfache Erkennung.

Mit den Kernkomponenten von A-Frame wie Geometrien, Materialien, Lichtern, Animationen, Modellen, Raycaster, Schatten, positioniertem Audio, Text und den Steuerelementen von Vive / Touch / Daydream / GearVR / Cardboard ist der Boden in Schwung. Machen Sie mit Community-Komponenten wie Partikelsystemen, Physik, Mehrbenutzer, Ozeane, Berge, Spracherkennung, Bewegungserfassung, Teleportation, Superhänden und Augmented Reality noch weiter.

Fertig machen

A-Frame kann aus einer einfachen HTML-Datei entwickelt werden, ohne etwas installieren zu müssen! Eine gute Möglichkeit, A-Frame zu testen, um das Starter-Beispiel auf Glitch zu remixen, einem Online-Code-Editor, der sofort hostet und kostenlos bereitstellt. Oder erstellen Sie eine .html Datei und fügen Sie A-Frame in den head :

Um A-Frame in eine HTML-Datei aufzunehmen, löschen wir ein script Tag, das auf den CDN-Build verweist:

Wir können A-Frame auch über npm installieren:

$ npm install aframe

Dann können wir A-Frame in unsere Anwendung bündeln. Zum Beispiel mit Browserify oder Webpack:

require('aframe');

Wenn Sie npm verwenden, können Sie die Befehlszeilenschnittstelle angle für A-Frame verwenden. angle kann eine Szenenvorlage mit einem einzigen Befehl initialisieren:

npm install -g angle && angle initscene

Erste Schritte für AR

Um AR-Anwendungen im Web zu erstellen, müssen Sie eine neue Bibliothek mit dem Namen AR.js hinzufügen . Zuerst laden Sie A-Frame, gefolgt von AR.js.

Newt Sie müssen Ihre Szene mit dem A a-scene Tag A-Frames und dem artoolkit Artoolkit- artoolkit einrichten. Der sourceType muss Ihre Webcam sein. Damit wird auch die Font-Kamera Ihres Smartphones unterstützt.

Das a-marker-camera Tag markiert ein Bild innerhalb des aufgezeichneten Bildschirms, das ein Bild darstellt. In diesem Fall ist es marker.png . Wenn die Kamera diesen Marker erkennt, wird das Feld auf dem Marker angezeigt.

Nachfolgend finden Sie den Beispielcode:

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> <script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script> <script> THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/' </script> <body> <a-scene artoolkit='sourceType: webcam;'> <a-box position='0 0 0.5' material='opacity: 0.5;'></a-box> <a-marker-camera preset='marker.png'></a-marker-camera> </a-scene> </body>

# data[].attributes.attachment_link.title
aframe - Erste Schritte mit aframe | aframe Tutorial

# data[].attributes.attachment_link.description
In diesem Abschnitt erhalten Sie einen Überblick über das, was ein Name ist und warum ein Entwickler es verwenden möchte. Es sollte auch alle großen Themen innerhalb von aframe erwähnen und auf die verwandten Themen verweisen. Da die Dokumentation für aframe neu ist, müssen Sie möglicherweise erste Versionen dieser verwandten Themen erstellen.

# data[].attributes.attachment_link.readable_text
Wir von VRketing sind uns ziemlich sicher, dass Virtuelle Realitäten in absehbarer Zeit das World Wide Web erobern werden. VR-Kompatibilität einer Website wird sich als Standard in Zukunft genauso durchsetzen, wie heute responsives Webdesign. Bis es soweit ist, bedarf es jedoch noch jede Menge Entwickler- und Aufklärungsarbeit.

Mozilla hat ein eigenes VR Team, dessen Aufgabe es ist, die Forschung voranzutreiben und zu verbreiten. Das VR Team hat hierfür ein Open-Source Framework für die Erstellung von 3D-Inhalten in Webbrowsern ins Leben gerufen.

Das A-Frame ist mit allen gängigen VR-Brillen kompatibel und kann auch in sämtlichen Standardbrowsern und mobilen Endgeräten verwendet werden. Das Framework ermöglicht in seiner Grundform bereits interaktive Erlebnisse und ist leicht erlern- und erweiterbar. Man benötigt für den Anfang lediglich Grundkenntnisse in HTML.

Zum Ausprobieren der Grundlagen empfehlen wir die Nutzung von Codepen.
Inhaltsverzeichnis
1 Einführung

Um ein A-Frame in eine auf html basierenden Website zu implementieren muss ein entsprechendes JavaScript importiert werden.
Die Objekte werden dann innerhalb von A-Szene-Elementen platziert. Der Grundaufbau - mit dem Beispiel eine Würfels - sieht dann so aus:

 <html> <head> <title>Grundaufbau A-Frame</title> <script src="https://aframe.io/releases/latest/aframe.min.js"></script> </head> <body> <a-scene> <a-cube></a-cube> </a-scene> </body> </html>

2 Objekte

A-Frame beinhaltet eine Reihe von Grundbausteinen, wie Videos, Würfeln, Bildern und weiteren. An späterer Stelle im Tuturial gehen wir auf alle Grundbausteine ein.
Jeder Grundbaustein hat spezielle Attribute, wie Höhe und Tiefe. Komponenten beinhalten zum Beispiel die Geometrie oder die Steuerung. Jedes Element kann durch die Grund-Attribute ( position, rotation, scale) in Bezug zueinander gesetzt werden.

Am Beispiel eines Würfels:

Innerhalb des Koordinatensystem X Y Z bedeutet +X eine Einheit nach rechts, +Y eine Einheit nach links und +Z eine Einheit in Richtung der Standard-Kamera. Entfernungen werden in Metern beziffert, da es sich immer auf die Wahrnehmung mit einem VR fähigem Endgerät bezieht. Die Rotation wird normal in Grad angegeben.

Die Objekte Kamera und Licht sind standardmäßig in jeder Szene, egal, ob sie vorher integriert wurden. Die Grundeinstellungen der Kamera in Bezug auf die Position sind 0 1.8 4. Die Grundeinstellungen für das Licht für die Position sind -1 2 1 mit einer Intensität von 0,2. Wenn man selbst ein eigenes Kamera- oder Licht-Objekt integriert, werden die Standardeinstellungen automatisch überschrieben. Weitere Anpassungsmöglichkeiten sind unter den Objekt-Unterpunkten zu finden: Kamera, Licht.

3 Beispiele

Beispiele für A-Frames finden Sie hier und hier. An einer kommerziellen A-Frame Seite wird aktuell von unseren Entwicklern gearbeitet - bekannt ist uns bisher keine.

4 Grundbausteine

Die Grundbausteine sind eine Hand voll Basiselemente, die häufig benötigt werden. Um die volle Bandbreite des A-Frames nutzen zu können, lesen Sie sich die Funktionsweise des Objekt-Komponenten-Systems durch. Alle Grundelemente können auch in Objekt-Komponenten-Schreibweise umgeschrieben werden. Ein roter Würfel mit Kantenlänge 3 Meter könnte so erzeugt werden:

oder in Objekt-Komponenten-Schreibweise:

Mit Grundbausteinen können Entwickler sofort mit VR-Websites starten ohne sich tiefer mit der Flexibilität des A-Frames auseinanderzusetzen zu müssen.

Grundbausteine und Objekt-Komponenten können gleichzeitig innerhalb einer A-Szene genutzt werden.

4.1 <a-camera>

Der A-Camera-Baustein ist, wie oben schon beschrieben, standardmäßig in jeder Szene implementiert ohne, dass er extra gesetzt werden muss. Mit diesem Baustein habe ich großen Einfluss auf die Ansicht und die Bedienung. In der nachfolgenden Tabelle sind alle mögliche Einflussgrößen (Attribute) aufgeschlüsselt. Auf die dazugehörigen Komponenten wird später näher eingegangen.

(Quelle: https://aframe.io/docs/primitives/a-camera.html)

4.2 <a-cube>

Das A-Cube-Element setzt einen einfachen Würfel in das Frame.

(Quelle: https://aframe.io/docs/primitives/a-cube.html)

4.3 <a-curvedimage>

Mit diesem Element können gekrümmte Bilder eingefügt werden. Das kann sinnvoll sein, wenn sich der Nutzer in einer Art rundem Raum befinden soll. Aktuell ist hier allerdings darauf zu achten in welchem Format das Bild abgebildet werden soll, damit keine Verzerrungen entstehen. In zukünftigen Updates wird die Verwendung also noch vereinfacht aber mit ein wenig Geduld ist die Verwendung jetzt schon sehr praktisch.

(Quelle: https://aframe.io/docs/primitives/a-curvedimage.html)

4.4 <a-cylinder>

Mit dem A-Cylinder Element kann jede Art von Zylinder erzeugt werden. Durch die Attribute radius-bottom und radius-top sind auch Kegel-Formen möglich.

(Quelle: https://aframe.io/docs/primitives/a-cylinder.html)

4.5 <a-image>

Mit dem Image-Baustein können, wie mit dem CurvedImage-Baustein Bilder in eine A-Frame-Szene implementiert werden. Auch hier muss bei der aktuellen Version noch auf die Maße geachtet werden, um Verzerrungen zu vermeiden. Ebenfalls schwierig gestaltet sich gegenwärtig noch das Überlappen von Bildern.

(Quelle: https://aframe.io/docs/primitives/a-image.html)

4.6 <a-light>

Licht ist, wie die Kamera, ein Grundbaustein, der immer gesetzt wird - egal ob er im Quellcode berücksichtigt wird oder nicht. Die Standardwerte werden entsprechend überschrieben, wenn man als Entwickler selbst ein Licht einfügt.

(Quelle: https://aframe.io/docs/primitives/a-light.html)

4.7 <a-model>

In eine VR-Website mit A-Frame können 3D-Modelle eingefügt werden. OBJ- und DAE-Dateiformate werden durch den A-Model-Baustein geladen.

(Quelle: https://aframe.io/docs/primitives/a-model.html)

4.8 <a-plane>

Glatte Flächen werden mit dem A-Plane-Baustein eingesetzt.

(Quelle: https://aframe.io/docs/primitives/a-plane.html)

4.9 <a-sky>

Dieser Baustein fügt einen Hintergrund in die A-Frame-Szene ein. Der Hintergrund kann einfarbig aber auch ein Bild sein. Bei Bildern ist jedoch zu beachten, dass nur kubische Panoramabilder Sinn ergeben.

(Quelle: https://aframe.io/docs/primitives/a-sky.html)

4.10 <a-sphere>

Mit diesem Grundbaustein können Kugeln in die Szene eingefügt werden. Die Attribute und Komponenten, sind ähnlich denen eines Würfels.

(Quelle: https://aframe.io/docs/primitives/a-sphere.html)

4.11 <a-video>

Mit diesem Grundbaustein können gewöhnliche Videos in die Szene eingefügt werden. Für 360 Grad Videos ist das nächste Element gedacht.

(Quelle: https://aframe.io/docs/primitives/a-video.html)

4.12 <a-videosphere>

Für das Einfügen von 360 Grad Videos gibt es den A-Videosphere-Baustein.

(Quelle: https://aframe.io/docs/primitives/a-videosphere.html)

5 Verbindung mit Browsern und anderen Endgeräten

A-Frames funktionieren auf fast allen gängigen Endgeräten. Auf dem Smartphone wurde es bisher auf iOS und Android getestet. Man kann Virtual Reality Websites ganz normal im Browser laden, den VR Button drücken und dann das Handy in die VR-Brille reinlegen. Auf Desktop PCs können die VR Websites via klicken und ziehen betätigt werden. Die Bedienung ist generell sehr intuitiv.

6 Objekt-Komponenten-System

Das Objekt-Komponenten-System ist sehr flexibel und kann in überschaubare Bauteile aufgesplittet werden.

Objekte sind Instanzen innerhalb der A-Frame-Szene. Alle Grundbausteine sind zum Beispiel Objekte. Komponenten sind Eigenschaften, die den Objekten zugeordnet werden.

Eine Instanz hat in der Regel mehrere Komponenten. Ein Würfel ist ein Objekt und seine Farbe und Position sind beispielsweise Eigenschaften von dazugehörigen Komponenten. Die Komponenten werden noch unterteilt und gegliedert. Die Farbe wäre in dem Fall eine Eigenschaft der Material-Komponente.

Am Beispiel:

<a-entity geometry="primitive: box; depth: 3; height: 3; width: 3" material="color: red"></a-entity>

Wir haben hier einen Kasten mit Geometrie- und Material-Komponenten. Die Geometrie-Komponente legt hier einen Quader als Ausgangsform zu Grunde und definiert Höhe, Tiefe und Breite.

Die Farbe wird durch die Material-Komponente color festgelegt. Wenn man an dieser Stelle ein bisschen ausprobiert, wird man feststellen, dass die Möglichkeiten vielfältig und dennoch einfach umzusetzen sind.

7 Komponenten

Im letzten Abschnitt des Grundlagen-Tutorials werden wir uns mit den einzelnen Komponenten des A-Frames auseinandersetzen.

Kamera

Die camera-Komponente beeinflusst den Blickwinkel und die Schärfe, die der Nutzer auf ein Objekt hat.

Cursor

Die cursor-Komponente beeinflusst die Eigenschaften von Klicken innerhalb der Szene.

Fog

Die fog-Komponente legt fest, inwieweit Objekt bei größerer Entfernung verschwimmen sollen oder nicht.

Geometrie

Die geometrie-Komponente ist sehr grundlegend für ein Objekt. Sie legt den Schatten die Größe und die Grundform fest. Folgende Grundformen können definiert werden:

Rechteck

Rechtecke werden mit dem box-Attribut erzeugt:

In unserem Beispiel wird ein Quader erzeugt, da die Seiten alle gleich lang sind, sogar ein Würfel mit der Kantenlänge 5 Meter.

Kreis

Vielecke können mit dem circle-Attribut erzeugt werden. Um einen Kreis zu erzeugen, nimmt man einfach ein Vieleck mit sehr vielen Ecken. Da der Standardwert für die Anzahl an Ecken 8 ist, wir durch folgenden Code ein 8-Eck mit einem Radius von 2 Metern erzeugt:

Folgende Werte können zusätzlich noch bearbeitet werden:

Zylinder

Mit dem cylinder-Attribut können sowohl klassische Zylinder, als auch gebogene Oberflächen und Rohre erzeugt werden. Eine gebogene Oberfläche könnte zum Beispiel so erzeugt werden:

Kegel

Ein Kegel hat dieselben Eigenschaften, wie ein Zylinder und zwei weitere:

Die Standardwerte für radiusTop und radiusBottom sind jeweils 1.

Ebene

Ebenen können mit dem plane-Attribut erstellt werden. Seine Eigenschaften sind width und heigth und deren Standardwerte 2.

Ring

Ein Ring ist als flaches Vieleck ähnlich einer DVD zu verstehen mit einem Außen- und einem Innenring.

Kugel

Eine Kugel wird folgendermaßen erzeugt:

Torus

Ein Torus ist ein 3D-Ring. Hier ist ein Bild eines Torus:

Torusknoten

Ein Torusknoten ist eine Verflechtung mehrerer Torus-Körper. Zur besseren Vorstellung, was sich darunter verbirgt:

Die einzelnen Torus-Körper lassen sich definieren, wie ein gewöhnlicher Torus. Die Verflechtung wird durch die Eigenschaften p und q bestimmt.

Licht

Es gibt ein großes Spektrum von Licht, was für eine A-Frame-Szene genutzt werden kann.

Die Grundarten ( type):

Umgebungslicht (ambient)

direktes Licht (directional)

Sonnenlicht (hemisphere)

punktuelles Licht (point)

Lichtspot (spot)

Je nachdem, welche Grundart von Licht man wählt, hat man unterschiedliche Eigenschaften zur Auswahl. Die gewählte Grundart ist deshalb in Klammern gesetzt:

Loader

Die loader-Komponente legt fest, welches 3D-Model geladen wird und was es für ein Dateiformat hat:

Material

Die material-Komponente definiert die Optik eines Objektes. Die Eigenschaften sind selbsterklärend, weshalb auf eine Beschreibung verzichtet wurde:

Position

Die Position wird innerhalb eines Koordinatensystems festgelegt. Innerhalb des Koordinatensystem X Y Z bedeutet +X eine Einheit nach rechts, +Y eine Einheit nach links und +Z eine Einheit in Richtung der Standard-Kamera.

Rotation

Die rotation-Komponente hat nur 3 Eigenschaften, nämlich die Neigung in Richtung der X-, Y- und der Z-Achse in Grad.

Scale

Die scale-Komponente gibt die Ausrichtung von einem fiktiven Mittelpunkt aus an. Die Achsenausrichtung ist wieder X,Y und Z.

Sound

Durch die sound-Komponente können Objekten Töne und Lautstärken zugeordnet werden.

Wir hoffen, das Tutorial hat euch einen ersten Einblick in die Welt von Mozillas A-Frame gegeben. Wir begeistern uns schon länger für das Thema und sind gespannt auf die zukünftigen Entwicklungen in dem Bereich. Wenn Ihr Änderungs-Ideen für das Tutorial habt, schreibt uns doch bitte einfach an: info@vrketing.de.

# data[].attributes.attachment_link.title
Tutorial: Einführung in A-Frame - VRketing

# data[].attributes.attachment_link.description
Wir von VRketing sind uns ziemlich sicher, dass Virtuelle Realitäten in absehbarer Zeit das World Wide Web erobern werden. VR-Kompatibilität einer Website wird sich als Standard in Zukunft genauso durchsetzen, wie heute responsives Webdesign. Bis es soweit ist, bedarf es jedoch noch jede Menge Entwickler- und Aufklärungsarbeit.

# data[].attributes.attachment_link.readable_text
Learning 3D is a quick and simple series for new Sketchfab users to explore and learn about the basic principles of 3D. These tutorials will offer a foundation of knowledge and prepare you to create your own 3D models or scans on software outside of the Sketchfab platform.
Let's start from the beginning.

We know a square is a 2D object - those two dimensions being the length and the width.
A cube is a 3D object because, with the length and the width, a dimension of depth is added.

A vertex is a point placed in the space. More than one vertex are called vertices.

With the 3D cube, for example, the vertices correspond to the corners. They define the shape.

Linking 3 or more vertices together creates a face.
Linking 3 vertices creates a triangle.
Linking 4 vertices creates a quad.
Linking more than 4 vertices creates a polygon.
Geometries
A face is a 2D geometry. Since a 2D geometry can be a triangle, a square, or a polygon, a 3D model is a combination of one or several 2D or 3D geometries.

But if a 3D model is made out of faces, how do we know which ones? Triangles? Quads? To find out in the Sketchfab viewer, we can look at all the edges of the faces of a model using the wireframe option in the Inspector:

You can explore the wireframe of most Sketchfab models by clicking the keyboard shortcut 5.

Each face has an orientation defined by its vertices. An orientation data called normal is attached to each vertex. In other words, each vertex looks at one direction, and this direction is the normal.

A mathematical process called interpolation will take the orientation of each vertex and automatically calculate the orientation of each pixel of the face. With interpolation, the orientation of all the pixels between the vertices will be guessed.

Normals will be useful to manage reflection, when we add some lights to your 3D scene.

If the normals attached to the vertices are perfectly parallel between each other and go in the same direction (like the above image), the face will look flat.

But if the normals attached to the vertices look at different directions, the face could have a curved shape (like the sphere below and on the right). That's interpolation!

Vertex normals have a big impact on how the object looks and how it reflects the lighting.

However, using normals does not actually change the shape or vertices of an object. It just gives the illusion that its shape is smooth and built from many points (vertices). It just appears smoother.

Why not actually change the shape of the sphere by adding more vertices? Because performance will suffer. The speed at which you load and render a 3D model depends ( among other things) on the number of vertices. Adding many more vertices to make your model smoother would impact performance quite a bit.

Up next: Learning 3D - Part II: Adding color, texture and light

# data[].attributes.attachment_link.description
Learning 3D is a quick and simple series for new Sketchfab users to explore and learn about the basic principles of 3D. These tutorials will offer a foundation of knowledge and prepare you to create your own 3D models or scans on software outside of the Sketchfab platform.

# data[].attributes.body
für Glitch-WebVR

# data[].attributes.body
Mächtiges Programm zum Erzeugen von WebVR-Anwendungen.

# data[].attributes.attachment_link.readable_text
Powerful, Beautiful, Simple, Open

Web-Based 3D At Its Best

Babylon.js 4.0 is here and marks a major step forward in one of the world's leading WebGL-based graphics engines. From the powerful new Inspector, best in class physically-based-rendering, countless optimizations, and much more, Babylon.js 4.0 brings powerful, beautiful, simple, and open 3D to everyone on the web.

# data[].attributes.attachment_link.title
Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best

# data[].attributes.attachment_link.description
Babylon.js 4.0 is here and marks a major step forward in one of the world's leading WebGL-based graphics engines. From the powerful new Inspector, best in class physically-based-rendering, countless optimizations, and much more, Babylon.js 4.0 brings powerful, beautiful, simple, and open 3D to everyone on the web.

# data[].attributes.body
Professionelles Programm zum Erzeugen von
3D-Objekten und Szenen.

# data[].attributes.attachment_link.readable_text
Free and Open Source

Blender is a public project hosted on blender.org, licensed as GNU GPL, owned by its contributors.

For that reason Blender is Free and Open Source software, forever. Learn more

Part of the industry

Blender is a member of ASWF, Khronos, Linux Foundation and OIN. It's also well supported by major hardware vendors such as AMD, Apple, Intel, and NVIDIA.

It's about people.

Designers, developers, engineers, artists. All driven by passion. All using Blender to make an impact.

The Ecosystem

Countless communities and thriving businesses are built around Blender.

Together, these tutorial makers and content creators, add-on developers and global marketplaces form an ever-expanding ecosystem.
Find Blender Communities
Everything You Need

Cycles is Blender's built-in powerful unbiased path-tracer engine that offers stunning ultra-realistic rendering.

· Real-time viewport preview

· CPU & GPU rendering

· PBR shaders & HDR lighting support

· VR rendering support

Blender's comprehensive array of modeling tools make creating, transforming and editing your models a breeze.

· Full N-Gon support

· Edge slide, inset, grid and bridge fill, and more

· Advanced sculpting tools and brushes

· Multi-resolution and Dynamic subdivision

· 3D painting with textured brushes and masking

· Python scripting for custom tools and add-ons

VFX professionals say: "Probably the best tracker in the market". Blender includes production ready camera and object tracking. Allowing you to import raw footage, track the footage, mask areas and see the camera movements live in your 3D scene. Eliminating the need to switch between programs.

· Auto and Manual tracking

· Powerful camera reconstruction

· Real-time preview of your tracked footage and 3D scene

· Support for Planar tracking and Tripod solvers

Thanks to the high quality rigging and animation tools, Blender is being used for numerous short films, advertisements, TV series and feature films now.

· Envelope, skeleton and automatic skinning

· B-spline interpolated bones

· Curve editor and dope sheets

· Custom bone shapes for fast input

· Sound synchronization

Story Art, Drawing 2D in 3D

Really! Drawing directly in a 3D viewport makes a lot of sense. It opens unsurpassed workflow freedom for story-boarders and 2D artists.

· Combine 2D with 3D right in the viewport

· Full Animation Support with Onion Skinning

· Layers & Colors for Stroke and Fill

· Sculpt brush strokes & Parent to 3D objects

Blender has a flexible Python controlled interface. Layout, colors, size and even fonts can be adjusted. Use hundreds of add-ons by the community or create your own using Blender's accessible Python API.

· Customize the interface layout and colors

· Hi-res/Retina screen support

· Create your own tools and add-ons

· Draw over the OpenGL viewport

· Connect with Blender's Render API

# data[].attributes.attachment_link.title
blender.org - Home of the Blender project - Free and Open 3D Creation Software

# data[].attributes.body
Professionelles Programm zum Erzeugen von komplexen Szenen bis hin zu 3D-Spielen. Wird von kommerziellen Spieleherstellern verwendet, obwohl es kostenlos ist!

# data[].attributes.attachment_link.readable_text
Unity creators can deploy their projects to 20+ platforms²

downloads per month of Made with Unity applications³

of the top 1,000 games are using Unity to grow their games⁴

When created, when played, every game will be touched by AI. See how Unity Muse can transform the way you create.

Success stories

See how creators and studios around the world have achieved remarkable success with Unity's solutions and services.

Deep resources, dynamic community

Subscription plans

Personal

Bring your vision to life with free access to the most widely used game engine in the world.

Pro

Unlock your team's potential with the tools professionals use to create hit games across devices and platforms.

Enterprise

Manage complex real-time 3D projects with expert support and creation tools that scale for teams of any size.

Disclaimers

1. Creator credits: Bleak Sword DX, More8bit, Devolver Digital | GTFO, 10 Chambers | Laika: Aged Through Blood, Brainwash Gang, Headup Publishing | Muhammad Ali, Showmax Game Changers, Chocolate Tribe | Sea of Stars, Sabotage Studios | BattleBit Remastered, SgtOkiDoki, Vilaskis, TheLiquidHorse

2. As of September 2023. Source: Derived from internal Unity resources.

3. As of September 2023. Source: Internal Unity sources, Data.ai Steam DB. Disclaimer: Downloads number is a combined figure of 3.56 billion mobile downloads based on data.ai data plus an internal estimate of 98 million downloads based on Steam data.

4. Source: data.ai. Disclaimer: Top 1,000 games is top 1,000 gaming apps by downloads in last 4 weeks from data.ai as of February 2023.

Copyright © 2023 Unity Technologies

"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere ( more info here). Other names or brands are trademarks of their respective owners.

# data[].attributes.attachment_link.title
Unity Real-Time Development Platform | 3D, 2D, VR & AR Engine

# data[].attributes.attachment_link.description
Create and grow real-time 3D games, apps, and experiences for entertainment, film, automotive, architecture, and more. Get started with Unity today.

# data[].attributes.headline
Anleitungen zum Erzeugen von virtuellen Welten

# data[].attributes.subject
Anleitungen zum Erzeugen von virtuellen Welten

# data[].attributes.body
Hier finden Sie Anleitungen zu Programmen, mit denen virtuelle Welten erstellt werden können.

# data[].attributes.headline
Anleitungen zum Erzeugen von 3D-Objekten

# data[].attributes.subject
Anleitungen zum Erzeugen von 3D-Objekten

# data[].attributes.body
Hier finden Sie Anleitungen zu Programmen, mit denen 3D-Körper für virtuelle Welten erzeugt werden können.

# data[].attributes.body
Leicht zu bedienendes Programm zum Erstellen virtueller Welten.
Erklär-Video folgt ...

# data[].attributes.attachment_link.provider_name
CoSpaces Edu: Make AR & VR in the classroom

# data[].attributes.attachment_link.title
CoSpaces Edu: Make AR & VR in the classroom

# data[].attributes.attachment_link.description
Bring CoSpaces Edu into the classroom and enhance your teaching inside an intuitive and engaging platform.

# data[].attributes.body
Editor zum Erstellen von Multi-User-Welten.
Erklär-Video folgt ...

# data[].attributes.headline
Erstellung von 3D-Objekten und virtuellen Welten

# data[].attributes.subject
Erstellung von 3D-Objekten und virtuellen Welten

# data[].attributes.body
Auf dieser Seite geht es darum, Tools vorzustellen, mit denen man als Lehrer eigene 3D-Objekte erstellen kann und diese dann auch veröffentlichen kann. Ebenfalls wird erklärt, wie man diese Objekte dann in 3D-Welten (Szenen) einbaut und sie letztendlich Multi-User-fähig macht.

# data[].attributes.body
Online-Tool zum nachträglichen Verfeinern von Objekten. Kann auch neue Objekte kreieren ...
Erklär-Video folgt ...

# data[].attributes.body
Online-Tool zum Erstellen von 3D-Objekten und Szenen inclusive Animationen
Erklär-Video folgt ...