Three.jsベースのインタラクティブツールで、2Dから3Dへの透視変換と行列パラメータをリアルタイムに可視化します。
インストール＆ダウンロード
1. ClawHub CLI
レジストリから直接スキルをインストールする最速の方法です。
npx clawhub@latest install perspective-transform-visualizer
2. 手動インストール
スキルフォルダを以下のいずれかの場所にコピーしてください
~/.openclaw/skills/ <project>/skills/ 優先順位：ワークスペース > ローカル > バンドル
3. プロンプトのインストール
このプロンプトをOpenClawにコピーするだけで、自動的にインストールされます。
Clawhubを使って perspective-transform-visualizer をインストールして。Clawhubがインストールされていない場合は、先にインストールしてください（npm i -g clawhub）。
ダウンロードをご希望ですか？
ZIPアーカイブで生のスキルファイルを取得します。
Perspective Transform Visualizer とは？
Perspective Transform Visualizerは、Openclaw Skills向けに設計された専門的なユーティリティであり、開発者や学生が複雑な幾何学的変換を直感的に理解できるようにします。Three.jsを活用して2D形状を3D空間でレンダリングし、平行移動、回転、拡大縮小、せん断、透視といったパラメータがグラフィックに与える影響を正確に確認できます。このツールは、抽象的な数学行列と視覚的結果の橋渡しをする、フロントエンド開発者やグラフィックス愛好家にとって不可欠なツールです。
このツールは高い対話性を備えており、AIエージェントが自然言語入力に基づいて構成を動的に変更できます。CSS transformのデバッグや線形代数の指導など、このスキルは変換ロジックに対して明確な視覚的フィードバックループを提供します。
Perspective Transform Visualizer のユースケース
- 3D透視効果と座標マッピングの直感的な理解。
- Web開発における変換行列パラメータ(m00〜m22)のデバッグ。
- 平行移動、回転、拡大縮小、せん断の教育的デモンストレーション。
- UIデザインやアニメーションのための特定の変換パラメータの組み合わせの可視化。
Perspective Transform Visualizer の仕組み
- AIエージェントが、特定の変換やカスタム行列を可視化するリクエストを受け取ります。
- エージェントはランタイム環境(チャネルおよびサーフェス)を分析し、ユーザーがローカル環境にいるか、モバイルなどのリモートデバイスにいるかを判断します。
- ローカルユーザーの場合、エージェントはファイル編集ツールを使用してindex.htmlファイル内のconfigDataオブジェクトを修正します。
- エージェントはデフォルトブラウザでローカルファイルを開くか、ホストされているオンラインバージョンのリンクを提供します。
- ブラウザはThree.jsシーンをレンダリングし、注入されたパラメータに基づいて透視変換が適用された2Dポリゴンを表示します。
Perspective Transform Visualizer のセットアップ
このツールをOpenclaw Skillsと統合するには、ビジュアライザーファイルをエージェントがアクセス可能なディレクトリに配置してください。Three.jsがローカルにバンドルされているため、外部依存関係は不要です。
# ディレクトリ構造の確認
ls perspective_transform_visualizer/
# フォルダにはindex.html、three.min.js、css/ディレクトリが含まれている必要があります。
配置後、エージェントに「Open the perspective transform visualizer」と頼むか、「Set rotation to 45 degrees」のような特定のパラメータを指定することでスキルをトリガーできます。
Perspective Transform Visualizer のデータスキーマとタクソノミー
このスキルは、index.htmlファイル内にあるconfigDataオブジェクトを通じて状態を管理します。スキーマは以下の通りです:
| オブジェクト | キー | 説明 |
|---|---|---|
| matrix | m00 - m22 | 3x3変換行列の個々の要素。 |
| sliders | tx, ty, rotate | 平行移動(X/Y)および回転(度)。 |
| sliders | sx, sy, shx, shy | 拡大縮小(X/Y)およびせん断(X/Y)係数。 |
| sliders | px, py, tz | 透視(X/Y)およびZ軸平行移動。 |
| polygon | [[x,y], ...] | 変換される2D形状を定義する座標ペアの配列。 |
Perspective Transform Visualizer の高度な機能
- ローカルファイルアクセスとモバイルユーザー向けのオンラインURLデプロイメントを切り替えるインテリジェントなランタイム検出。
- ユーザーが正確な数学的可視化のために生の3x3配列を入力できる直接行列注入。
- エージェントが特定の状態をHTMLファイルに「保存」できる永続的な構成編集。
- インターネット接続がなくても動作を保証するローカルThree.js依存関係によるオフラインファースト設計。
SKILL.md
ローディング
関連するOpenclawのスキル
X Builder Digest
ソーシャルフィードのJSONを、開発者や研究者向けの専門的な英語・中国語バイリンガルMarkdownダイジェストに変換する技術スキルです。
explore-usa
Fliggy (Alibaba Group) エコシステムのリアルタイムデータを使用して、包括的なアメリカ旅行旅程を計画する専門AIエージェントスキルです。
Databricks SQL Read-Only
Openclaw Skillsを使用してDatabricks SQLクエリを実行するための、安全な読み取り専用インターフェースです。
Draw.io ダイアグラム生成スキル
AI AgentからプロフェッショナルなDraw.io XMLを生成し、鮮明な画像形式で直接エクスポートする自動描画アシスタントです。
特徴*
