JavaScript-Bibliothek zum Erstellen von 3D-Interaktionen und -Animationen
Eine Open-Source-JavaScript-API, mit der HTML-DOM-Elemente in die interaktive strukturierte Ebene konvertiert werden können. Sie können WebGL ganz einfach verwalten und Ihre Meshes relativ zu den DOM-Elementen Ihrer Webseite positionieren.
curtains.js ist eine leichtgewichtige Open-Source-JavaScript-Bibliothek, die Softwareentwicklern die Möglichkeit gibt, ihre HTML-DOM-Elemente mühelos in interaktive texturierte Ebenen umzuwandeln. Die Bibliothek ist klein, aber sehr stabil, sodass Benutzer auf einfache Weise leistungsstarke 3D-Interaktionen und -Animationen erstellen können. Es kann mühelos HTML-Elemente mit Bildern und Videos in 3D-WebGL-texturierte Ebenen übersetzen, sodass Benutzer sie über Shader animieren können.
Die Bibliothek ist sehr einfach zu bedienen, aber Sie müssen über gute Grundkenntnisse in HTML, CSS, JavaScript und Shadern verfügen. Ein Shader ist eine Reihe von Anweisungen, die in der Grafikpipeline ausgeführt werden und dem Computer mitteilen, wie er jedes Pixel rendern soll. Sie müssen auch mehr über die Vertex- und Fragment-Shader, die Verwendung von Uniformen sowie die Grundlagen der GLSL-Syntax wissen.
Diese curtains.js ist unter der MIT-Lizenz verfügbar, was bedeutet, dass sie für persönliche und kommerzielle Projekte kostenlos verwendet werden kann. Das Hauptziel der Bibliothek ist es, eine einfache Möglichkeit zur Handhabung von WebGL und zur Positionierung Ihrer Meshes relativ zu den DOM-Elementen Ihrer Webseite bereitzustellen. WebGL ist eine JavaScript-API zum Echtzeit-Rendering von 3D- und 2D-Grafiken in einem Browser.
Erste Schritte mit Zen-3d
Der einfachste Weg, um curtains.js zu installieren, ist die Verwendung von npm. Bitte verwenden Sie den folgenden Befehl für eine reibungslose Installation.
Installieren Sie curtains.js über NPM
npm i curtainsjs Verwalten Sie Szenen mit JavaScript
Die Open-Source-Bibliothek curtains.js enthält nützliche Funktionen im Zusammenhang mit der Szenenverwaltung und ihren relevanten Eigenschaften. Die Szene stapelt alle Objekte, die gezeichnet werden, einschließlich Ebenen und Shader-Passes, in verschiedenen Arrays und ruft sie in der richtigen Reihenfolge zum Zeichnen auf. Sie können die Flugzeugstapel einfach zurücksetzen, den Ortsstapel löschen, ihn mit den neuen Ortsindizes neu aufbauen, einer Szene neue Flugzeuge hinzufügen, ein Flugzeug aus einer Szene entfernen, die Position eines Flugzeugs ändern und so weiter.
Umgang mit Rendereigenschaften
Die kostenlose Bibliothek curtains.js bietet die Möglichkeit, Renderings problemlos in Ihrer eigenen Anwendung zu handhaben. Die Renderer-Klassenbehandlung hat mehrere wichtige Funktionalitäten im Zusammenhang mit dem WebGL-Kontext bereitgestellt, z. B. Erstellung und Wiederherstellung, Erweiterungen, WebGL-Befehle und mehr. Es kann verwendet werden, um einen Container zu generieren, eine Leinwand anzuhängen, WebGL-Erweiterungen, Kontextverlust-/Wiederherstellungsereignisse zu handhaben und ein Scene-Klassenobjekt zu erstellen, das alle hinzugefügten Objekte verfolgt. Abgesehen von den oben genannten unterstützt es auch die Handhabung globaler WebGL-Befehle, wie z.
Animieren Sie Bilder und Videos über JavaScript
Die Open-Source-Bibliothek curtains.js gibt Softwareentwicklern die Möglichkeit, Bilder und Videos problemlos in ihren eigenen Anwendungen zu animieren. Mit der Bibliothek können Entwickler Ebenen erstellen, die Bilder und Videos enthalten, die sich wie einfache HTML-Elemente verhalten, wobei Position und Größe durch CSS-Regeln definiert werden. Sie können auch mehrere Texturen, mehrere Ebenen, Leinwandtext mit mehreren Ebenen, mehrere Videotexturen und vieles mehr verwenden.
