mcpField
S
spline-3d-integration

spline-3d-integration

github.com/sickn33開発48.7k91 回インストール今日更新
リポジトリ

spline-3d-integration について

Web プロジェクトに Spline のインタラクティブな 3D シーンを組み込む開発者向けのスキルです。主要なフロントエンド構成ごとの方法、実行時操作、性能調整、問題解決を例とともに説明します。

主な機能

  1. 01構成に応じた統合方法の選択
  2. 02Vanilla Web、React、Next.js、Vue に対応
  3. 03シーン URL の設定案内
  4. 04実行時操作の例
  5. 05性能調整と問題解決

活用シーン

  1. 01Web サイトにインタラクティブな 3D シーンを埋め込む
  2. 02フロントエンド構成に合う方法を選ぶ
  3. 03シーンの読み込みや操作の問題を調査

インストール

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill spline-3d-integration

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

examples/
interactive-scene.tsx
react-spline-wrapper.tsx
vanilla-embed.html
guides/
PERFORMANCE.md
REACT_INTEGRATION.md
VANILLA_INTEGRATION.md
COMMON_PROBLEMS.md

詳細

Spline 3D 統合スキル

Spline.design のインタラクティブな 3D シーンをウェブプロジェクトに埋め込むための総合ガイドです。

使用する場面

  • インタラクティブな Spline シーンをウェブプロジェクトに埋め込む必要がある場合。
  • Vanilla Web、React、Next.js、Vue、または iframe のコンテキストに適した統合方法を選ぶ場合。
  • シーン URL、ランタイム制御、パフォーマンス、または Spline の埋め込みでよくある問題について知りたい場合。

クイックリファレンス

タスクガイド
Vanilla HTML/JS への埋め込みguides/VANILLA_INTEGRATION.md
React / Next.js / Vue への埋め込みguides/REACT_INTEGRATION.md
パフォーマンスとモバイル最適化guides/PERFORMANCE.md
デバッグとよくある問題guides/COMMON_PROBLEMS.md

動作例

ファイル内容
examples/vanilla-embed.html背景とフォールバックを備えた、最小限の Vanilla JS 埋め込み
examples/react-spline-wrapper.tsxフォールバック付きの、遅延読み込みする React ラッパーの例
examples/interactive-scene.tsxイベント、オブジェクト制御、カメラを含む完全なインタラクティブ例

Spline とは？

Spline はブラウザベースの 3D デザインツールです。Figma の 3D 版のようなものです。デザイナーは Spline エディターでインタラクティブな 3D シーン（オブジェクト、マテリアル、アニメーション、物理演算、イベント）を作成し、ホストされた .splinecode ファイルの URL を使ってウェブ向けにエクスポートします。

ステップ 1 — スタックを特定する

コードを書く前に、既存のプロジェクトファイルを確認してフレームワークを特定します。

スタック方法
Vanilla HTML/JS<spline-viewer> ウェブコンポーネント、または @splinetool/runtime
React / Vite@splinetool/react-spline
Next.js@splinetool/react-spline/next
Vue@splinetool/vue-spline
iframe（Webflow、Notion など）公開 URL の iframe

ステップ 2 — シーン URL を取得する

ユーザーに Spline エディターを開き、Export → Code Export の順に進んで、prod.spline.design の URL をコピーしてもらいます。

https://prod.spline.design/XXXXXXXXXXXXXXXX/scene.splinecode

URL をコピーする前に、Play Settings を確認するようユーザーに伝えてください。

  • ✅ サイトに暗い背景やカスタム背景がある場合は、Hide Background をオンにします
  • ✅ 有料プランを利用している場合は、Hide Spline Logo をオンにします
  • ✅ 読み込みを速くするには、Geometry Quality を Performance に設定します
  • ✅ 不要な場合は、Page Scroll、Zoom、Pan を無効にします（乗っ取りのリスクを減らせます）
  • ✅ 設定を変更した後は、Generate Draft または Promote to Production をクリックします。URL は自動更新されません

ステップ 3 — 関連ガイドを読む

スタックとシーン URL が分かったら、上記の適切なガイドファイルを読み、その手順に従います。統合を完了する前に、必ず COMMON_PROBLEMS.md を読んでください。ここには重要な注意点が記載されており、読まないと本番環境で初めて問題が明らかになることがあります。

厳格なルール

Spline は、依頼があり、意図されたインタラクションに有用な場合にのみ使用してください。読みやすいコンテンツ、キーボード／フォーカスの動作、および動きを抑えた静的な代替手段を維持してください。デザイン上の好みを理由に、負荷の大きい 3D を追加したり、シーンを公開したりしてはいけません。

例は未テストの統合スケッチであり、本番環境での認証を示すものではありません。インストール済みバージョンに合わせてパッケージ／エクスポート設定を確認し、レビュー済みの CDN 依存関係を固定し、シーンのオリジンを許可リストに登録してください。また、サードパーティーのシーンを取得したり、本番環境へ移行したりする前に許可を得てください。公開シーンに秘密情報を含めないでください。セルフホストしていても、テクスチャやランタイムアセットを取得する場合があり、権利と CORS の確認が必要です。デバイスの幅やコア数は目安であり、GPU 性能を保証するものではありません。検証中はプレースホルダーと読み込みエラーが見える状態にしてください。

制限事項

  • このスキルは、タスクが上記の説明範囲に明確に該当する場合にのみ使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中止して確認を求めてください。

コメント

Markdown 対応