Ein auf Three.js basierendes interaktives Tool zur Echtzeit-Visualisierung von 2D-zu-3D-Perspektivtransformationen und Matrixparametern.
Installieren & Herunterladen
1. ClawHub CLI
Der schnellste Weg, einen Skill direkt aus der Registry zu installieren.
npx clawhub@latest install perspective-transform-visualizer
2. Manuelle Installation
Kopiere den Skill-Ordner an einen dieser Orte
~/.openclaw/skills/ <project>/skills/ Priorität: Workspace > Lokal > Integriert (Bundled)
3. Prompt-Installation
Kopiere diesen Prompt in OpenClaw, um ihn automatisch zu installieren.
Hilf mir, perspective-transform-visualizer über Clawhub zu installieren. Falls Clawhub nicht installiert ist, installiere es bitte zuerst (npm i -g clawhub).
Lieber herunterladen?
Hole dir die rohen Skill-Dateien in einem ZIP-Archiv.
Was ist Perspective Transform Visualizer?
Der Perspective Transform Visualizer ist ein spezialisiertes Dienstprogramm für Openclaw Skills, das Entwicklern und Studenten hilft, komplexe geometrische Transformationen intuitiv zu verstehen. Durch die Nutzung von Three.js werden 2D-Formen in einem 3D-Raum gerendert, sodass Benutzer genau sehen können, wie sich Parameter wie Translation, Rotation, Skalierung, Scherung und Perspektive auf eine Grafik auswirken. Dieses Tool schließt die Lücke zwischen abstrakten mathematischen Matrizen und visuellen Ergebnissen und ist damit ein unverzichtbares Dienstprogramm für Frontend-Entwickler und Grafikbegeisterte.
Das Tool ist hochgradig interaktiv konzipiert und ermöglicht es einem KI-Agenten, seine Konfiguration dynamisch basierend auf Eingaben in natürlicher Sprache zu ändern. Egal, ob Sie ein CSS transform debuggen oder lineare Algebra unterrichten, diese Skill bietet eine klare, visuelle Feedback-Schleife für Transformationslogik.
Perspective Transform Visualizer Anwendungsfälle
- Intuitives Verständnis von 3D-Perspektiveneffekten und Koordinaten-Mapping.
- Debugging von Transformationsmatrix-Parametern (m00 bis m22) für die Webentwicklung.
- Pädagogische Demonstrationen von Translation, Rotation, Skalierung und Scherung.
- Visualisierung spezifischer Kombinationen von Transformationsparametern für UI-Design und Animation.
So funktioniert Perspective Transform Visualizer
- Der KI-Agent erhält die Anforderung, eine bestimmte Transformation oder eine benutzerdefinierte Matrix zu visualisieren.
- Der Agent analysiert die Laufzeitumgebung (Kanal und Oberfläche), um festzustellen, ob sich der Benutzer lokal oder auf einem entfernten Gerät wie einem Mobiltelefon befindet.
- Für lokale Benutzer modifiziert der Agent das configData-Objekt innerhalb der index.html-Datei mithilfe von Dateibearbeitungstools.
- Der Agent öffnet die lokale Datei im Standardbrowser oder stellt einen Link zur gehosteten Online-Version bereit.
- Der Browser rendert die Three.js-Szene und zeigt das 2D-Polygon mit der angewandten Perspektivtransformation basierend auf den injizierten Parametern an.
Perspective Transform Visualizer Einrichtung
Um dieses Tool mit Openclaw Skills zu integrieren, stellen Sie sicher, dass sich die Visualizer-Dateien im zugänglichen Verzeichnis Ihres Agenten befinden. Es sind keine externen Abhängigkeiten erforderlich, da Three.js lokal gebündelt ist.
# Überprüfen der Verzeichnisstruktur
ls perspective_transform_visualizer/
# Der Ordner sollte index.html, three.min.js und das css/-Verzeichnis enthalten.
Sobald die Dateien platziert sind, können Sie die Skill auslösen, indem Sie Ihren Agenten bitten: "Open the perspective transform visualizer" oder bestimmte Parameter angeben wie "Set rotation to 45 degrees."
Perspective Transform Visualizer Datenschema & Taxonomie
Die Skill verwaltet den Status über ein configData-Objekt, das sich in der index.html-Datei befindet. Das Schema umfasst:
| Objekt | Schlüssel | Beschreibung |
|---|---|---|
| matrix | m00 - m22 | Einzelne Elemente der 3x3-Transformationsmatrix. |
| sliders | tx, ty, rotate | Translation (X/Y) und Rotation in Grad. |
| sliders | sx, sy, shx, shy | Skalierungs- (X/Y) und Scherfaktoren (X/Y). |
| sliders | px, py, tz | Perspektive (X/Y) und Z-Achsen-Translation. |
| polygon | [[x,y], ...] | Ein Array von Koordinatenpaaren, das die zu transformierende 2D-Form definiert. |
Perspective Transform Visualizer Erweiterte Funktionen
- Intelligente Laufzeiterkennung zum Umschalten zwischen lokalem Dateizugriff und Online-URL-Bereitstellung für mobile Benutzer.
- Direkte Matrix-Injektion, die es Benutzern ermöglicht, rohe 3x3-Arrays für präzise mathematische Visualisierungen einzugeben.
- Persistente Konfigurationsbearbeitung, die es dem Agenten ermöglicht, einen bestimmten Status in der HTML-Datei zu "speichern".
- Offline-First-Design mit lokalen Three.js-Abhängigkeiten, das sicherstellt, dass das Tool auch ohne Internetverbindung funktioniert.
SKILL.md
Laden
Verwandte Openclaw-Skills
X Builder Digest
Eine technische Fähigkeit, um Social-Feed-JSON in professionelle zweisprachige (Englisch/Chinesisch) Markdown-Zusammenfassungen für Entwickler und Forscher zu verwandeln.
explore-usa
Eine spezialisierte KI-Agent-Skill zur Planung umfassender US-Reiserouten unter Verwendung von Echtzeitdaten aus dem Fliggy (Alibaba Group) Ökosystem.
Databricks SQL Read-Only
Eine sichere, schreibgeschützte Schnittstelle zur Ausführung von Databricks SQL-Abfragen unter Verwendung von Openclaw Skills.
Draw.io Diagramm-Generierungs-Skill
Ein automatisierter Diagramm-Assistent, der professionellen Draw.io XML-Code generiert und direkt aus Ihrem AI agent in klare Bildformate exportiert.
Benutzerdefinierte API-Zusammenfassung
Eine spezialisierte KI-Skill, die agents mit externen APIs für leistungsstarke Textzusammenfassungen und Inhaltsextraktion verbindet.
OctenSearch
Eine leistungsstarke Websuche-Fähigkeit, die KI-Agenten in unter 80ms mit Echtzeit-Daten versorgt, die für LLMs optimiert sind.
Hervorgehoben*
