ThreeUIは、きれいな3D表現を眺めるだけのギャラリーではありません。
動きを試す。色や速さを変える。コードやプロンプトを取り出す。そのままAIコーディングへ渡す。
「3Dをゼロから書く」前に、動く表現を選んで、自分のサイトへ寄せるところから始められます。
今回はThreeUIの公開カタログを確認し、無料のCommunityコンポーネント「Liquid Form」を実装しました。紹介だけではわからない、無料範囲、導入方法、実際の重さ、使うときの注意点まで記録します。
ThreeUIは3D表現を「探す・試す・渡す」場所
ThreeUIの良さは、完成した見た目と実装の間が短いことです。
公開カタログでは、次の10分類から表現を探せます。
- Landing Pages
- Hero
- Three.js
- Backgrounds
- Buttons
- Text Animation
- UI Elements
- CSS
- Motion Design
- Sections
各ページにはライブ表示があります。対応するコンポーネントでは、速さ、形、色、カメラ、光、ポインターへの反応をその場で変えられます。
たとえばLiquid Formには、speed、morph、noiseScale、mouseAmount、metal、camera、tintHue、tintAmountがあります。見た目の違いを言葉だけで指定せず、値を動かしてから実装へ進めます。
無料のCommunity版とProは同じではない
2026年8月24日時点で、ThreeUIの公開画面には全284件と表示されています。この数にはProが含まれます。
一方、Community版のGitHub READMEは、50の親コンポーネント、111ルート、141の無料variantと23の単独コンポーネント、合計164件と説明しています。
ただし、同じリポジトリのCommunity同期レポートは、2026年8月23日生成で43親、102ルート、138variantです。公式内でも数字が揃っていません。
ここから言えるのは、160以上が無料という方向は確認できるが、件数は更新中なので固定値として扱わないほうがよいということです。使いたいものがCommunityかProかは、個別ページとGitHubで確認します。
Communityのアプリ、公開コンポーネント、ThreeUIが制作したCommunity画像はMITです。同梱フォントはSIL Open Font License 1.1です。Three.js runtimeもMITです。画像やフォントを含む場合は、リポジトリの個別ライセンスも確認します。
ThreeUIで現在できること
3Dのヒーローと背景を置く
樹木のある世界、寺院、地形、棚、布、粒子、球体、液体などを画面の主役にできます。
静止画像を背景に置くのとは違います。カーソル、時間、スクロールへ反応させられます。
ボタンと文字にも質感を与える
3Dシーンだけではありません。液体金属のボタン、光る境界線、文字の渦、パスに沿う文字、ローダー、トグルなどもあります。
サイト全体を3Dにしなくても、入口の一箇所だけに使えます。
設定を変えてからコードへ持ち出す
対応ページではライブ表示の横で値を変えられます。Usageにはimport名と最小コードがあります。
React環境なら、Community版はnpmから導入できます。
npm install @designcodeio/threeui共有CSSを一度読み、コンポーネントを呼び出します。
import { LiquidFormBackground } from "@designcodeio/threeui";
import "@designcodeio/threeui/style.css";
export function Scene() {
return <LiquidFormBackground speed={0.6} morph={1.2} tintHue={202} />;
}動作条件はReactとReact DOM 18.2以上、ブラウザ側はWebGLまたはWebGL2です。詳しい手順はThreeUI公式のInstallationで確認できます。
AIへプロンプトまたは実装情報を渡す
各コンポーネントを見ながら、実装プロンプトやUsageをAIコーディングへ渡せます。
ただし、全カタログをAIクライアントから検索し、promptや完全なsourceを取得するThreeUI MCPはPro限定です。MCPのURLを追加するだけで匿名利用できる仕組みではありません。OAuthログインとPro権利の確認があります。
無料で試すなら、Community版のページとGitHubを見て、使うコンポーネントを一つに絞るところから始めるのが安全です。
Liquid Formをattrip向けに実装した
選んだのはLiquid Formです。
銀色の物体がゆっくり変形します。カーソルを動かすと、カメラと光がわずかに追いかけてきます。画像素材は使いません。GLSLのray marchingをRaw WebGLで描くコンポーネントです。
そのまま置くのではなく、次の3つの世界を切り替えられるようにしました。
- 静かな水銀：変形を小さくし、硬い光をゆっくり動かす
- 生きている石：形の揺れとポインターへの反応を大きくする
- 深海の月：青い色と強い光で暗闇から浮かせる
中央に説明を並べず、左に短い言葉、右下に操作だけを置きました。
触ると、光が動く。
この一文を読んだ直後に、本当に光が動く構成です。ThreeUIの価値は、説明より先に触ると伝わります。
実際に光と形を変えてみる
下の画面へカーソルを動かしてください。スマートフォンでは画面を触りながら試せます。
静かな水銀、生きている石、深海の月を押すと、同じ形でも速さ、揺れ、光の色が変わります。動きを止めるも試せます。
実装すると見えてきた重さと操作性
今回のproduction buildは、JavaScriptが203.46kB、gzip後64.87kBでした。CSSは53.79kB、gzip後23.13kBです。
PC 1280px、スマートフォン375pxと320pxで確認しました。
- 横方向のはみ出しは0
- 操作ボタンは46px
- 3つの切り替えが動作
- 動きの停止と再開が動作
prefers-reduced-motionでは自動で静止- consoleのerrorとwarningは0
- production依存の既知の脆弱性は0
Liquid Formは画面外へ出ると描画を止め、device pixel ratioも最大1.5へ抑えています。それでも3Dやshaderは、普通の画像より負荷があります。
記事の途中へ何個も置くより、ファーストビューか、一つの体験ブロックへ絞るほうがよさそうです。
ThreeUIを使う前に決める3つのこと
WebGLで何ができるか、36個から選ぶ
ThreeUI以外の公式サンプルも、見て終わりではなく、実際に触れる形でまとめました。
水、光、粒子、3D商品、写真の歪み、音の可視化、ゲーム、VR。12のサイトから3つずつ選び、「自分なら何に使うか」まで短く書いています。
何を伝える動きなのか
きれいだから置くと、数秒で飽きます。
液体なら変化、粒子ならつながり、布なら柔らかさ。表現と伝えたい意味を一つにします。
どこまで無料で使うのか
CommunityとProを先に分けます。とくにMCP、Pro source、完全な284件を同じ無料範囲だと思わないことが大切です。
動かない人にも内容が届くか
WebGLが使えない場合があります。動きを減らす設定を使う人もいます。
3Dが表示されなくても、見出し、説明、ボタンが読める構造を残します。3Dを内容そのものではなく、内容へ入る扉として使います。
ThreeUIはAI時代の「動く参考資料」になる
ThreeUIを使うと、3Dの専門知識が不要になるわけではありません。
ただ、白紙からscene、camera、shaderを組む前に、動く完成形を選べます。値を変えられます。AIへ具体的な名前と設定を渡せます。
これまでの参考資料は、画像を見て「こんな感じ」と伝えるものでした。ThreeUIは、動き、光、値、コードをまとめて渡せる参考資料です。
最初は一つで十分です。ThreeUIのBrowseを開き、気になったCommunityコンポーネントを一つ選ぶ。色、速さ、反応を変える。それを自分のサイトの意味へつなげる。
その順番なら、3Dは飾りではなく、触ってわかる体験になります。
ThreeUIについてよくある質問
ThreeUIはすべて無料ですか？
すべてではありません。Communityはオープンソースです。全カタログ、Pro source、MCPにはPro範囲があります。
WordPressでも使えますか？
使えます。ただし、ThreeUIのCommunityパッケージはReact前提です。Viteなどでbundleし、生成したCSSとJavaScriptをテーマやプラグインから読み込む形が扱いやすいです。
Three.jsを知らなくても使えますか？
導入はできます。負荷、カメラ、光、入力、モバイル表示を調整するときは、Three.js、WebGL、Canvasの基礎が役立ちます。
