3D Elemente auf Internetseiten einbinden
Die Welt ist 3-dimensional und lässt sich deshalb auf einem Monitor nur leidlich gut darstellen.
Schon lange gibt es Versuche 3D-Objekte in Internet-Seiten einzubauen.
Die wichtigesten Standards dafür sind:

VRML

VirtualRealityModellingLanguage
  • gilt als überholt
  • viele Links zu VRML sind tot
  • Kein Browser Support bzw. nur über Plugin!!

WebGL

 Web Graphic Language
  • nicht Einsteiger freundlich
  • unzureichender Browsersupport

Three

 JavaScript-Bibliothek zur Visuaisierung von 3D Objekten.
  • nicht ganz einfach
  • viele Demos
  • unzureichender Virtual Reality-Support

A-FRAME
  • Open-Source
  • VRML ähnliche Syntax
  • Sehr einfach
  • baut auf Three.js auf
  • supported von vielen Browsern
  • Support für fast alle 3D-Brillen
  • ideal auch für Smartphones

Von Virtueller Realität spricht man wenn eine künstliche, nicht real existierende Welt erschaffen wird.
Von Augmented Realität spricht man wenn eine echte Welt mit Informationen angereichert oder überlagert wird,
  z.B. Einblendung von NaviInfos auf der Frontscheibe eines Autos während einer echten Fahrt.

Einfache Virtuelle Welt mit A FRAME



Vollständiger Quellcode zur obigen Virtuellen Welt mit A-FRAME: 
<html>
<head>
	<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
	<a-scene>
		<a-box      position="-1 0.5  -3" color="aqua"    rotation="0 45 0"                       ></a-box>
		<a-sphere   position=" 0 1.25 -5" color="red"     radius="1.25"                           ></a-sphere>
		<a-cylinder position=" 1 0.75 -3" color="yellow"  radius="0.5"       height="1.5"         ></a-cylinder>
		<a-plane    position=" 0 0    -4" color="#7BC8A4" rotation="-90 0 0" height="4" width="4" ></a-plane>
		<a-sky color="lightblue"></a-sky>
	</a-scene>
</body>
</html>
Der Beobachter bzw. die Camera steht default im Nullpunkt auf 1.6m Höhe, das entspricht dem Auge eines Durchschnittsmenschen.
Die Blaue Box steht x=-1 m also links vom Betrachter, y=0.5m über dem Boden und in z=-3m Entfernung vom Betrachter.
Die Rote Kugel steht x=0m also direkt vor dem Betrachter, y=1.25m über dem Boden und in z=-5m Entfernung vom Betrachter.
Der Gelbe Zylinder steht x=+1m also rechts vom Betrachter, in y=0.75m über dem Boden und in z=-3m Entfernung vom Betrachter.
Die Bodenplatte ist x=0 direkt vor dem Betrachter, liegt y=0 auf dem Boden und deren Mitte ist in z=-4m Entfernung. Breite und Tiefe sind je 4 M
Beachte: die x,y,z -Werte beziehen sich immer auf die Mitte des Objekts.
Wenn die Mitte des Zylinders auf y=0.75m definiert ist und er eine Höhe von 1.5m hat, steht er also auf dem Boden!!

WASD-Navigation

Zusätzlich zur Maus stehen die folgenden Tasten zur Verfügung!
 ↑
W		 
← AStand-
punkt		D →
 S
↓		 
    

A-FRAME Inspektor

Die Tastenkombination
    STRG-ALT-I
öffnet eine Seite um Detail-Infos zur VR-Welt anzuzeigen!
funktioniert NUR im Vollbildmodus

VR-Welt mit Tisch!

Ein Tisch mit einer 2mx3m und 5 cm dicken Tischplatte=BOX in 80 cm Höhe und 4 Füssen =CYLINDER r=5cm Höhe=0.8m


VR-Welt mit Baum

Bestehend aus 3 grünen Kegeln und 1 braunen Zylinder(Stamm)

VR-Welt mit Schneemann

Bestehend aus 3 weissen Kugeln und 5 schwarzen kleinen Kugeln(Augen+Knöpfe) und 3 Zylindern(=Hut+Arm)
Die Nase ist ein 40 cm hoher karottenfarbiger Kegel(=CONE)

VR-Welt mit GoCart

Bestehend aus Zylindern(Räder,Achsen,Lenkrad) und Boxen(Bodenplatte,Sitz,Lehne)
Der Nullpunkt liegt hier in Fahrzeugmitte. Die Camera ist bei x=0.5 y=0.8 z=1.9

VR-Welt mit 360 Grad Aussicht