Überblick über WebGL 3D in HTML5 (Teil 2) – Einführung in die Klassenbibliotheksentwicklung und Framework_HTML5-Tutorial-Fähigkeiten

Wir haben bereits gesehen, wie ermüdend es ist, mit der nativen WebGL-API zu entwickeln. Aus diesem Grund wurde eine große Anzahl von WebGL-Frameworks entwickelt. Mithilfe dieser Frameworks können Sie schnell die benötigten 3D-Szenen erstellen. Diese Frameworks kapseln verschiedene Elemente zum Erstellen von 3D-Szenen in unterschiedlichem Maße, z. B. Szenen, Kameras, Modelle, Beleuchtung, Materialien usw. Mit diesen gekapselten Objekten können Sie problemlos die erforderlichen 3D-Szenen erstellen, sodass Sie sich nur darauf konzentrieren müssen mehr zur Logik.

Derzeit gibt es keinen Vorteil, der andere Frameworks überfordern kann. Welche Art von Framework man wählt, hängt jedoch von den persönlichen Vorlieben ab. Bei der Auswahl eines Frameworks ist es jedoch meiner Meinung nach besser, auf den Zeitpunkt der letzten Aktualisierung zu achten Wählen Sie das Framework aus und wählen Sie ein stabiles und aktualisiertes Framework aus, mit dem Sie immer die neuesten Funktionen nutzen können, wodurch Ihr Programm stabiler wird.

Das folgende Beispiel wurde mit dem Three.js-Framework entwickelt.
Three.js ist ein relativ umfassendes Open-Source-Framework, das verschiedene Elemente von 3D-Szenen gut kapselt. Sie können damit ganz einfach Kameras, Modelle, Lichter, Materialien und mehr erstellen. Sie können auch verschiedene Renderer auswählen. Sie können Canvas zum Rendern verwenden oder WebGL oder SVG zum Rendern verwenden.

Darüber hinaus kann Three.js 3D-Dateien in vielen Formaten laden. Ihre Modelldateien können von Blender, Maya, Chinema4D, 3DMax usw. stammen. Und es hat relativ grundlegende Dinge eingebaut: (Kugeln) Kugeln, (Ebenen) Ebenen, (Würfel) Würfel, (Zylinder) Zylinder. Three.js macht es sehr einfach, diese Objekte zu erstellen.

Okay, kein Unsinn mehr, schauen Sie sich einfach den Code an:

Kopieren Sie den Code

Der Code lautet wie folgt :