概要

Three Mapsは、Webブラウザ上で手早く3Dのブロックアウト（グレーボクシング）を行うためのマップエディタです。Three.jsをレンダリング基盤に、ReactでUIを構築し、Zustandによるストアでジオメトリやシーン状態をリアクティブに管理するアーキテクチャを採用しています。編集モードと通常のオブジェクトモードを切り替え、頂点・エッジ・面の単位で選択・編集が可能。ネスト可能なシーン階層と親子関係でオブジェクトの構成を扱え、編集結果は即時にビューへ反映されます。ゲームのレベル設計やプロトタイプ制作の初期段階に適したツールです。

リポジトリの統計情報

スター数: 12
フォーク数: 3
ウォッチャー数: 12
コミット数: 30
ファイル数: 15
メインの言語: TypeScript

主な特徴

リアクティブなジオメトリシステム（Zustandベース）で編集が即時反映
オブジェクトモードと編集モードの二重操作系、頂点・エッジ・面の選択サポート
ネスト可能なシーン階層と親子関係によるオブジェクト構成管理
Three.js + React + TypeScriptによるモダンな実装で拡張や統合が容易

技術的なポイント

Three Mapsの技術的中核は「Zustandを使ったリアクティブなデータモデル」と「Three.jsによるレンダリングの組み合わせ」にあります。ジオメトリ（頂点、エッジ、面）をアプリケーション状態としてストアに保持することで、UIやレンダラー側はこの状態を監視し、変更があると即座に描画やインタラクションを更新します。これにより、ユーザー操作とビューの整合性が高く、編集フィードバックが速いのが特徴です。

編集系は大きくObject Mode（オブジェクト単位の移動や配置）とEdit Mode（ジオメトリ単位の編集）に分かれており、Edit ModeではVertex/Edge/Face選択が可能となっています。選択処理はThree.jsのレイキャストやバッファジオメトリの情報を活用していると推測され、ローカル座標系とワールド座標系の変換、選択ハンドラによる状態更新のルートが整備されています。面・辺・頂点の選択は、エディタツール（移動、スケール、押し出し等）と組み合わせて使える設計が期待できます。

TypeScript採用により、ジオメトリやシーンノードの型安全性が確保され、拡張時の負担が軽減されます。リアルタイム更新を維持するために、レンダリング側ではThree.BufferGeometryやマテリアルの差分更新（必要最小限のバッファ更新）を行うことでパフォーマンスを担保している可能性が高いです。加えて、ネストされたシーン階層は親子のトランスフォーム乗算やインスタンス化などをサポートし、複雑なオブジェクト構成でも管理しやすくなっています。

コード構成はReactコンポーネント（UIパネル、ツールバー、プロパティエディタ）とレンダリングレイヤ（Three.jsラッパー）、およびZustandストア群に分離されており、ツールの追加やカスタム操作の組み込みが行いやすい作りです。例えば、新しい編集ツールを追加する際はストアの状態操作とレンダラーへの反映処理を実装すれば、既存のモード切替や選択ロジックと連携できるはずです。

さらに、Webベースの利点を活かして、シリアライズ/デシリアライズ（シーンの保存・読み込み）、軽量なエクスポート機能、共有ワークフローへの統合などが拡張ポイントとして考えられます。全体として、Three Mapsはモダンなフロントエンド技術を用いた高速なプロトタイピング向けエディタとして実用性と拡張性の両立を目指した設計になっています。

プロジェクトの構成

主要なファイルとディレクトリ：

.github: dir
.gitignore: file
.vscode: dir
LICENSE.md: file
README.md: file

…他 10 ファイル

まとめ

Web上で手軽に使える3Dブロックアウトツールとして、迅速なプロトタイピングに適した実装と拡張性を持つリポジトリです。

リポジトリ情報：

名前: three-maps
説明: A rapid 3d blockout / greyboxing tool for the web
スター数: 12
言語: TypeScript
URL: https://github.com/vibe-stack/three-maps
オーナー: vibe-stack
アバター: https://avatars.githubusercontent.com/u/207065277?v=4

READMEの抜粋：

Three Maps

A map editor for rapid game blockout, built with Three.js and React.

Features

Core Functionality

Reactive Geometry System: Built on Zustand stores with reactive data structures
Dual View Modes: Object Mode and Edit Mode for different interaction paradigms
Component Selection: Vertex, Edge, and Face selection in Edit Mode
Scene Hierarchy: Nested objects with parent-child relationships
Real-time Updates: All changes are immediately reflected acr…

Three Maps — Web向け高速3Dブロックアウトツール