mcpField
C
cloudai-threejs

cloudai-threejs

github.com/podo開発29164 回インストール1 日前に更新
リポジトリ

cloudai-threejs について

cloudai-threejs は、Web 上のインタラクティブな 3D 要素や体験を構築するための Three.js スキルセットです。シーン設定、ジオメトリ、マテリアル、照明、カメラ制御、アニメーション、WebGL のパフォーマンス手法を扱います。

主な機能

  1. 01Three.js のシーンとレンダラーの設定
  2. 02ジオメトリとマテリアルの作成
  3. 03照明とカメラ制御
  4. 04オブジェクトアニメーション
  5. 05WebGL のパフォーマンス手法

活用シーン

  1. 01インタラクティブな 3D 製品ビジュアライゼーションの構築
  2. 02インタラクティブな Web 背景の作成
  3. 03没入型 Web 体験の開発

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/podo/design-agent-skills --skill cloudai-threejs

インストール後、Claude Code で/cloudai-threejsを入力して読み込まれたか確認します。

同梱ファイルstub.yaml

詳細

cloudai-threejs

カタログの概要 — パッケージ全体はこちらです：CloudAI-X/threejs-skills

判断フロー

Three.js または 3D ウェブ開発を行う前に、これを実行してください。

  1. Three.js スキルはすでにインストールされていますか？ 確認方法：~/.design-agent-skills/skills/threejs/SKILL.md が存在するか確認します。

    • はい → threejs を呼び出して進めます
    • いいえ → ステップ 2 に進みます

  2. シェルにアクセスできますか？

    • はい → 以下のインストールコマンドを実行してから、スキルを呼び出します
    • いいえ → インストールコマンドを表示します。Claude Code では、先頭に ! を付けてチャットメッセージとして送信します。グローバルにインストールする場合は -g を追加し、プロジェクトのみにインストールする場合は省略します

インストールコマンド

npx skills add CloudAI-X/threejs-skills

インストール後の呼び出し

  • スキル名：ls ~/.design-agent-skills/skills/ を実行して、インストール済みのスキル名を確認します
  • トリガーフレーズ：「Three.js」、「3D web」、「WebGL 3D」、「3D scene」

機能

ウェブ上でインタラクティブな 3D 要素や体験を構築するための Three.js スキルスイートです。Three.js の全パイプラインを網羅し、シーンやレンダラーのセットアップ、ジオメトリとマテリアル、ライティングの設定、カメラコントロール、オブジェクトのアニメーション、WebGL のパフォーマンスに関するベストプラクティスを扱います。製品のビジュアライゼーション、インタラクティブな背景、没入感のあるウェブ体験にご利用ください。

コメント

Markdown 対応