Repolode
投稿する
MengTo

MengTo/threeui

ライブプレビューと完全なソースコードを備えた、ログイン不要のThree.js/WebGL UIコンポーネントカタログ

GitHub で見る公式サイト
スター
6,692
フォーク
626
未解決の Issue
8
最終コミット
2 か月前

これは何？

ThreeUI Communityは、ThreeUIコンポーネントカタログのオープンソース版です。WebGLやThree.jsを使ったUIコンポーネントを一覧で閲覧でき、それぞれに操作可能なライブプレビュー、調整可能なコントロール、バリアント選択機能、ソースコードのタブが用意されています。アプリケーションのシェル、ナビゲーション、検索、テーマ、レスポンシブレイアウトは、メインのThreeUIプロジェクトと共通です。

Community版にはProおよびBetaコンポーネントとその実装は含まれず、アカウントや認証も必要ありません。カタログには50個の親コンポーネントがあり、111個のルートと141個の無料バリアントが含まれています。Reactパッケージの@designcodeio/threeuiはnpmで公開されているため、共通スタイルとともに個々のコンポーネントをReactアプリにインポートできます。また、一部のドキュメント全体を構成するコンポーネントは、ランタイムアセットをpublicディレクトリから読み込みます。

このリポジトリはnpm installとnpm run devでローカル実行でき、npm run buildで型チェックと本番ビルドを実行できます。Proのソースコードは、メンバーシップの有料契約が必要なCLIから別途提供されます。

主な機能

  • 01各WebGL/Three.jsコンポーネントを操作できるライブプレビュー。
  • 02無料コンポーネントごとに、調整可能なコントロールとバリアント選択機能を用意。
  • 03各コンポーネントの実装を確認できるソースコードタブ。
  • 04コンポーネントをインポートできる、npm公開済みのReactパッケージ@designcodeio/threeui。
  • 05ログイン、アカウント作成、購入手続きは不要。

ユースケース

  • プロジェクトの開発前に、インスピレーションを得るためThree.jsやWebGLのUIエフェクトを探す。
  • 既成の3D UIコンポーネントをReactアプリにコピーまたはインポートする。
  • ソースコードを読んで、シェーダーやThree.jsを使ったUIコンポーネントの構成を学ぶ。

トピック

#threejs#webgl#react#ui-components#shaders

よくある質問

threeui とは？
ライブプレビューと完全なソースコードを備えた、ログイン不要のThree.js/WebGL UIコンポーネントカタログ ThreeUI Communityは、ThreeUIコンポーネントカタログのオープンソース版です。WebGLやThree.jsを使ったUIコンポーネントを一覧で閲覧でき、それぞれに操作可能なライブプレビュー、調整可能なコントロール、バリアント選択機能、ソースコードのタブが用意されています。アプリケーションのシェル、ナビゲーション、検索、テーマ、レスポンシブレイアウトは、メインのThreeUIプロジェクトと共通です。
threeui は無料で使えますか？ライセンスは？
threeui は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
threeui は今もメンテナンスされていますか？
半年以内に更新あり。threeui の最終コミットは 2026年9月3日 です。
threeui は何に使えますか？
プロジェクトの開発前に、インスピレーションを得るためThree.jsやWebGLのUIエフェクトを探す。 既成の3D UIコンポーネントをReactアプリにコピーまたはインポートする。 ソースコードを読んで、シェーダーやThree.jsを使ったUIコンポーネントの構成を学ぶ。
threeui はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/MengTo/threeui

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト