Moh4696/open-3d-skills

これは何？

主な機能

• 01モデルファイルを用意せず、すべてコードでthree.jsシーンを構築します。
• 02生成したクリップからスクロール連動の映像を作成し、継ぎ目のチェックや視差効果を抑える設定にも対応します。
• 03stacked-alpha MP4、VP9 alpha、WebPフレームを使って、Safariを含むすべてのブラウザー向けに透過動画を生成します。
• 04ポーズのグリッドをもとに、カーソルを追従するキャラクターのリグを生成します。
• 05段階的な分解表示、X線表示、断面表示、ラベルを備えたインタラクティブな分解図を作成します。
• 06ヘッドレスChromiumとWebKitでページを3種類のサイズで検証し、コンタクトシート付きのレポートを出力します。
• 07仮想クロックを使い、あらゆるページをフレーム単位で正確な60 fps動画として記録します。

ユースケース

• 60 fpsで動作するリアルタイム3Dシーンを備えた製品ページやランディングページの構築。
• AI生成クリップをWebサイト上のスクロール連動映像に仕立てる。
• SafariでもChromeでも動作する透過動画オーバーレイの追加。
• インタラクティブな分解表示で機械の仕組みを説明する。
• SNSやクライアント向けに、Webページの滑らかなデモ動画を記録する。

クイックスタート

1. 1

   npx skills CLI ですべての8つのスキルをインストールします（Node 22.20 以降が必要です）

   npx skills add Moh4696/open-3d-skills
2. 2

   スキルを読み込ませるため、新しいエージェントセッションを開始します

使う前に知っておきたいこと

• !これらは単体アプリではなくコーディングエージェント向けの手順です。使用するには Claude Code や Codex などのエージェントが必要です。
• !一部のスキルでは Python 3.9 以降、ffmpeg、画像または動画生成サービスが必要です。
• !README によると、スキルに API キーは保存されません。そのため、生成サービスへのアクセスはご自身で用意する必要があります。

収録されている特集

トピック

よくある質問

open-3d-skills とは？

three.jsを使った3D・スクロール連動Webサイトの構築、アニメーション、検証をコーディングエージェントに教える8つのスキル。 Open 3D Skillsは、3Dやアニメーションを取り入れたWebサイトを構築するための8つのエージェントスキルです。コードで記述するリアルタイムのthree.jsシーン、動画クリップから生成するスクロール連動の映像、Safariで再生できる透過動画、カーソルを追従するキャラクター、機械のインタラクティブな分解表示、さらにこれらの素材制作に使うAI画像・動画生成を扱います。

open-3d-skills は無料で使えますか？ライセンスは？

open-3d-skills は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

open-3d-skills は今もメンテナンスされていますか？

活発にメンテナンス中。open-3d-skills の最終コミットは 2026年10月31日 です。

open-3d-skills は何に使えますか？

60 fpsで動作するリアルタイム3Dシーンを備えた製品ページやランディングページの構築。 AI生成クリップをWebサイト上のスクロール連動映像に仕立てる。 SafariでもChromeでも動作する透過動画オーバーレイの追加。 インタラクティブな分解表示で機械の仕組みを説明する。 SNSやクライアント向けに、Webページの滑らかなデモ動画を記録する。

open-3d-skills のインストール方法は？

npx skills CLI ですべての8つのスキルをインストールします（Node 22.20 以降が必要です）: npx skills add Moh4696/open-3d-skills スキルを読み込ませるため、新しいエージェントセッションを開始します

open-3d-skills はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/Moh4696/open-3d-skills