Three.js Basic-Eintragsserie (1)

01
Voraussetzungen für Three.js

Wenn es um Three.js geht, müssen wir zuerst über OpenGL und WebGL sprechen.

OpenGL ist ein plattformübergreifender 3D/2D-Zeichnungsstandard (Spezifikation) und WebGL (Web Graphics Library) ist ein 3D-Zeichnungsprotokoll.

WebGL ermöglicht die gemeinsame Verwendung von JavaScript und OpenGL, aber die Verwendung der nativen API von WebGL zum Schreiben von 3D-Programmen ist sehr kompliziert und erfordert relativ mehr mathematische Kenntnisse, was für Frontend-Entwickler sehr kostspielig ist.

WebGL

WebGL ist eine Javascript-3D-Grafikschnittstelle, die JavaScript und OpenGL ES 2.0 kombiniert.

OpenGL

OpenGL ist ein offener Grafikstandard, programmiersprachenübergreifend, plattformübergreifend, Javascript, Java, C, C++, Python usw. können OpenGL unterstützen, und die Javascript-Implementierung von OpenGL ist WebGL. OpenGL ES 2.0 ist eine Teilmenge von OpenGL, die für eingebettete Geräte wie Mobiltelefone und Spielekonsolen entwickelt wurde.

Leinwand

Canvas ist das Canvas-Element von HTML5. Wenn Sie Canvas verwenden, müssen Sie den Kontext von Canvas verwenden. Sie können den 2D-Kontext verwenden, um zweidimensionale Bilder zu zeichnen, oder Sie können den 3D-Kontext verwenden, um dreidimensionale Bilder zu zeichnen. 3D-Kontext bezieht sich auf WebGL.

02
Was ist Three.js?

Offizielle Website: Javascript 3D-Bibliothek (Javascript 3D-Bibliothek).

Three.js ist eine einfach zu bedienende und leichtgewichtige 3D-Bibliothek, die auf WebGL-Paketierung basiert. Three.js kapselt die von WebGL bereitgestellte Schnittstelle sehr gut, vereinfacht viele Details, reduziert die Lernkosten erheblich und verbessert die Leistung und die Funktionen sind ebenfalls sehr mächtig .

Benutzer können problemlos 3D-Grafiken erstellen, ohne WebGL im Detail lernen zu müssen, und es ist das Hauptwerkzeug für Frontend-Entwickler, um 3D-Grafiken zu entwickeln.

Das WeChat-Minispiel Jump wird ebenfalls auf Basis von Three.js entwickelt, und Threejs ist jetzt führend.

Kurz gesagt: Three.js ist eine JS-Bibliothek, die 3D-Effekte erzielen kann

03 Die Beziehung zwischen
OpenGL, WebGL, Canvas und Three.js

OpenGL: 3D-Grafikstandard

WebGL: OpenGL + JavaScript

Leinwand：WebGL + Leinwand 2D

Three.js: eine Bibliothek, die auf der WebGL-Verpackung basiert

Ähnlich zu:

ECMAscript: Skriptsprachenspezifikation

JavaScript: Skriptsprache

jQuery: eine Bibliothek, die auf JavaScript-Paketierung basiert

Eine kurze Zusammenfassung: Die Beziehung zwischen WebGL und Three.js entspricht der Beziehung zwischen JavaScript und jQuery.