ThreeUI｜インタラクティブな3D WebUIコンポーネントライブラリ

ポイント

• 50の親コンポーネント（バリアント等を含め164のブラウズ結果）
• 面倒な認証なしでローカル開発やReactアプリへの導入が可能
• 本体コードはMITライセンス（同梱フォントはSIL OFL 1.1）

概要・解決する課題

Webサイトにリッチな3D要素を導入する際、Three.jsなどのセットアップやUIとしてのインタラクションの実装には膨大な工数がかかっていました。ThreeUIは、インタラクティブな3Dコンポーネントを即座にブラウズし、Reactプロジェクトへ導入できる環境を提供します。有料版（Pro/Beta）と同一の表示・操作シェルを備えながら、Community版としてオープンソースで公開されているため、コストやアカウント作成の手間をかけずに3D UIを組み込めます。

ただし、Community版にProおよびBetaのコンポーネントは含まれません。またHTML文書全体を描画するコンポーネントは、node_modules/@designcodeio/threeui/lib-dist/assets/ のランタイムファイルを自分のアプリの公開ディレクトリへコピーするか、sourceUrl／assetBaseUrl で参照先を上書きする必要があります。

なぜ注目されているか

Webサイトのデザインにおいて3D要素の需要が高まる中、調整可能なコントロールやバリアントのプレビューを備えた再利用可能なコンポーネント群を、オープンソースのReactパッケージとして直接インストールでき、コンポーネント単位のサブパスインポートにも対応しているため注目を集めています。

主なユースケース

• 3D演出を取り入れたランディングページの構築: Reactプロジェクトに@designcodeio/threeuiをインストールし、インポートして3Dコンポーネントをページ内に描画できます。

import { BrandOrbs } from "@designcodeio/threeui";
import "@designcodeio/threeui/style.css";

export function Hero() {
  return <BrandOrbs />;
}

git clone https://github.com/MengTo/threeui
cd threeui
npm install
npm run dev

npm install @designcodeio/threeui

実際に使ってみて

2026年9月20日、@designcodeio/threeui 1.2.0 を Next.js（App Router）の新規プロジェクトに入れて試しました。npm でインストールし、使いたいコンポーネントの名前を指定して読み込む、という手順です。無作為に選んだ14個と公式サイトに載っていた2つは、最新の three 0.186 でもいずれもビルドが通りました（サーバー側の事前レンダリングまで確認。ブラウザ上での描画までは見ていません）。

つまずいたのは2点です。READMEの導入例が読み込んでいる AtTheHorizon は公開パッケージに入っておらず、例をそのままコピーするとビルドが止まります（実際に入っているのは BallStudy など103個）。もうひとつは TempleNightScene で、これだけは3D描画ライブラリ three.js の新しめのバージョンと噛み合わず、0.151 以前にする必要がありました。

ざっとライブラリを見た感じ、103個のうち調整できそうなのは24個ほどでした（propsがあるもの）。残りはそのまま置いて使う形です。文字を自分のものに差し替えられるのは TypographyVortexCanvas の phrase など6個で、ランディングページ系は中身がiframeのため差し替えられませんでした。

ただし、これは npm で部品として使う場合の話です。リポジトリのほうにはCommunity版の実装ソースが一式そのまま入っており（伏せてあるのはProの実装だけ）、MITライセンスなので改変して自分のサイトに置けます。

収録されているコンポーネントのうち3Dの本棚（BookshelfScene）は当サイトでも使えそうだと思ったのですが、このコンポーネントは載せられる件数が決め打ちで、本の文章も空白で区切って折り返す作りだったため和文が組めませんでした。そこでソースを取得して改変し、サンプルを作ってみました（和文用の折り返しの追加と、件数の上限の修正）。

活用例として、当サイトのカタログ（種別ごとの記事一覧）を流し込んだサンプルページを置いています。表紙やページを起動時に描き起こす作りのため、開くまでに数秒かかります。

こんな人におすすめ

• Reactプロジェクトに手軽に3Dのインタラクティブ要素を導入したいフロントエンドエンジニア
• 3D UIコンポーネントの実装コードを参考にしたいデザイナーや開発者
• ログイン不要で商用利用可能な3Dパーツを探しているプロダクト開発者