A Three.js-powered interactive tool for visualizing 2D-to-3D perspective transformations and matrix parameters in real-time.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install perspective-transform-visualizer
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install perspective-transform-visualizer using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Perspective Transform Visualizer?
The Perspective Transform Visualizer is a specialized utility designed for Openclaw Skills that enables developers and students to intuitively understand complex geometric transformations. By leveraging Three.js, it renders 2D shapes in a 3D space, allowing users to see exactly how parameters like translation, rotation, scaling, shearing, and perspective affect a graphic. This tool bridges the gap between abstract mathematical matrices and visual results, making it an essential utility for frontend developers and graphics enthusiasts.
The tool is designed to be highly interactive, allowing an AI agent to modify its configuration dynamically based on natural language inputs. Whether you are debugging a CSS transform or teaching linear algebra, this skill provides a clear, visual feedback loop for transformation logic.
Perspective Transform Visualizer Use Cases
- Intuitive understanding of 3D perspective effects and coordinate mapping.
- Debugging transformation matrix parameters (m00 through m22) for web development.
- Educational demonstrations of translation, rotation, scaling, and shearing.
- Visualizing specific combinations of transformation parameters for UI design and animation.
How Perspective Transform Visualizer Works
- The AI agent receives a request to visualize a specific transformation or custom matrix.
- The agent analyzes the runtime environment (channel and surface) to determine if the user is local or on a remote device like a mobile phone.
- For local users, the agent modifies the configData object within the index.html file using file editing tools.
- The agent opens the local file in the default browser or provides a link to the hosted online version.
- The browser renders the Three.js scene, displaying the 2D polygon with the applied perspective transformation based on the injected parameters.
Perspective Transform Visualizer Setup
To integrate this tool with Openclaw Skills, ensure the visualizer files are placed in your agent's accessible directory. No external dependencies are required as Three.js is bundled locally.
# Verify the directory structure
ls perspective_transform_visualizer/
# The folder should contain index.html, three.min.js, and the css/ directory.
Once placed, you can trigger the skill by asking your agent to "Open the perspective transform visualizer" or providing specific parameters like "Set rotation to 45 degrees."
Perspective Transform Visualizer Data Schema & Taxonomy
The skill manages state through a configData object located in the index.html file. The schema includes:
| Object | Key | Description |
|---|---|---|
| matrix | m00 - m22 | Individual elements of the 3x3 transformation matrix. |
| sliders | tx, ty, rotate | Translation (X/Y) and rotation in degrees. |
| sliders | sx, sy, shx, shy | Scaling (X/Y) and shearing (X/Y) factors. |
| sliders | px, py, tz | Perspective (X/Y) and Z-axis translation. |
| polygon | [[x,y], ...] | An array of coordinate pairs defining the 2D shape to be transformed. |
Perspective Transform Visualizer Advanced Features
- Intelligent runtime detection to switch between local file access and online URL deployment for mobile users.
- Direct matrix injection allowing users to input raw 3x3 arrays for precise mathematical visualization.
- Persistent configuration editing that allows the agent to "save" a specific state into the HTML file.
- Offline-first design with local Three.js dependencies ensuring the tool works without an internet connection.
SKILL.md
Loading
Related Openclaw Skills
X Builder Digest
A technical skill to transform social feed JSON into professional bilingual English and Chinese markdown digests for builders and researchers.
explore-usa
A specialized AI agent skill for planning comprehensive United States travel itineraries using real-time data from the Fliggy (Alibaba Group) ecosystem.
Databricks SQL Read-Only
A secure, read-only interface for executing Databricks SQL queries using Openclaw Skills.
Draw.io Diagram Generator Skill
An automated diagramming assistant that generates professional Draw.io XML and exports them to crisp image formats directly from your AI agent.
Custom API Summary
A specialized AI skill that connects agents to external APIs for high-performance text summarization and content extraction.
OctenSearch
A high-performance web search skill providing AI agents with real-time, LLM-optimized data in under 80ms.
Featured*
