Rapier WASM物理エンジンをReactにバインディングし、剛体、コライダー、ジョイントをreact-three-fiberのシーンに組み込めます。
jasonkneen/tiny-world-builder
小さな世界を構築・彫刻し、飛び回って共有できるブラウザベースの3Dボクセルワールドエディター。
- スター
- 1,606
- フォーク
- 214
- 未解決の Issue
- 5
- 最終コミット
- 2 時間前
これは何?
Tiny World Builderは、ブラウザ上だけで動作する、単体で完結した3Dボクセルエディターです。草、水、石、砂、溶岩などの地形を配置し、家、木、柵、橋、作物、動物といったオブジェクトを追加できます。また、地面を盛り上げたり削ったり、色を塗ったりして、崖や川を作れます。
エディターにはアイソメトリック、ソフト、パースペクティブなど複数のカメラモードがあり、世界をあらゆる角度から眺められます。ワールドは名前を付けてローカルのスロットに保存できるほか、エクスポート、リミックス、共有もできます。Mesh Terrain sculptorを使うと、オプションの細かなボクセルレイヤーを追加し、ボクセルごとにマテリアルを指定して、より滑らかな地形を彫刻できます。
プロジェクトには、配送車両が道路網に沿って走行し、配置されたオブジェクトを避けて経路を変更する、シード値付きの車両ランタイムが含まれています。vanilla JavaScriptとThree.jsで構築された静的サイトで、VercelまたはNetlifyにデプロイできます。
主な機能
- 01ボクセルグリッド上に地形、オブジェクト、作物、動物を配置できます。
- 02地形を盛り上げたり削ったり、色を塗ったりして、崖や川を作れます。
- 03アイソメトリック、ソフト、パースペクティブの各カメラを切り替えられます。
- 04名前を付けた複数のワールドをローカルに保存し、エクスポートや共有ができます。
- 05ボクセルごとにマテリアルを指定できる、オプションのMesh Terrain sculptorを利用できます。
- 06道路の経路探索と交通回避に対応した、シード値付きの車両デモを利用できます。
ユースケース
- ブラウザ上で、小規模なボクセル風ゲームのレベルやジオラマシーンを試作する。
- 道路、柵、家など、隣接関係を考慮するタイルが自動的にどう接続するかを確認する。
- 生成された道路網で、経路計画や交通の挙動をテストする。
- 単体で完結した静的な3Dワールドビルダーを自分のサイトでホスティングする。
クイックスタート
- 1
ローカルの開発サーバーを起動します
npm run dev - 2
localhost:3000/tiny-world-builder でビルダーを開きます
- 3
または、開発サーバーを使わずに静的ファイルを直接開きます
open index.html
使う前に知っておきたいこと
- AGPL-3.0 のもとでライセンスされています。コピーレフトライセンスのため、変更を加えてデプロイした場合、ネットワーク経由のユーザーにソースコードを提供する必要があります。
- 実際の環境でウォレットログインを使うには、まず Netlify で TINYWORLD_WALLET_SESSION_SECRET を設定する必要があります。
トピック
よくある質問
- tiny-world-builder とは?
- 小さな世界を構築・彫刻し、飛び回って共有できるブラウザベースの3Dボクセルワールドエディター。 Tiny World Builderは、ブラウザ上だけで動作する、単体で完結した3Dボクセルエディターです。草、水、石、砂、溶岩などの地形を配置し、家、木、柵、橋、作物、動物といったオブジェクトを追加できます。また、地面を盛り上げたり削ったり、色を塗ったりして、崖や川を作れます。
- tiny-world-builder は無料で使えますか?ライセンスは?
- tiny-world-builder は AGPL-3.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- tiny-world-builder は今もメンテナンスされていますか?
- 活発にメンテナンス中。tiny-world-builder の最終コミットは 2026年10月19日 です。
- tiny-world-builder は何に使えますか?
- ブラウザ上で、小規模なボクセル風ゲームのレベルやジオラマシーンを試作する。 道路、柵、家など、隣接関係を考慮するタイルが自動的にどう接続するかを確認する。 生成された道路網で、経路計画や交通の挙動をテストする。 単体で完結した静的な3Dワールドビルダーを自分のサイトでホスティングする。
- tiny-world-builder のインストール方法は?
- ローカルの開発サーバーを起動します: npm run dev localhost:3000/tiny-world-builder でビルダーを開きます または、開発サーバーを使わずに静的ファイルを直接開きます: open index.html
- tiny-world-builder はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/jasonkneen/tiny-world-builder
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
GPU.jsはシンプルなJavaScript関数をGPUシェーダーコードに変換し、ブラウザやNode.jsでGPU上で実行します。GPUが使えない場合は通常のJavaScriptにフォールバックします。
ゲーム制作の作業を振り分けるディレクタースキルを含む、Three.js製ブラウザーゲーム向けのCodex・Claude Code用エージェントスキル9種。
Web Audio APIを使い、Milkdropのプリセットをブラウザで描画するWebGL製ビジュアライザー。
ステアリング、ナビゲーションメッシュ、知覚、ファジィ論理、状態駆動型エージェントを備えた、ゲームAI向けのスタンドアロンJavaScriptライブラリ。
24、36、48、72ピースのルービックスネークの形を設計・共有できる、ブラウザベースの3Dエディター兼プレイヤー。