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

ToolThree.jsReactTypeScript

vibe-stack/three-maps

★ 95

GitHub →

概要

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

GitHub

リポジトリの統計情報

  • スター数: 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ブロックアウトツールとして、迅速なプロトタイピングに適した実装と拡張性を持つリポジトリです。

リポジトリ情報：

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…

関連記事

Tool

lovcode（デスクトップAIコーディング支援コンパニオン）

Lovcodeは、Claude CodeなどのAIコーディングツールと連携するデスクトップ向けコンパニオンアプリです。チャット履歴の閲覧や設定管理、コマンドやスキルの整理などを行え、Tauriを用いた軽量なネイティブパッケージとReact + TypeScriptによるリッチなUIで構成されています。ローカル保存と設定のカスタマイズを重視した開発者向けユーティリティです。（約300字）

TauriReactTypeScript
Library

Blueprint3D Modern — モダンな3Dフロアプランナー

TypeScript と Three.js で一から書き直されたオープンソースの 3D フロアプランナー。従来の blueprint3d を ES モジュール化してクリーンに再構築し、Next.js 15 ベースのデモアプリを備え、IndexedDB によるローカル保存でバックエンド不要のローカルファースト動作を実現します。リアルタイムのコンテキストメニューや高速なレンダリングを重視した設計で、カスタマイズや組み込みが容易です。（約300字）

TypeScriptThree.jsNext.js
Library

reclassify — React の className を強化するランタイム

React の組み込み要素に対して、配列やオブジェクトをそのまま className として渡せるようにするカスタム JSX ランタイムです。clsx や classNames といったユーティリティ関数を使わずに、ネストした配列や条件付きオブジェクトをそのまま記述でき、最終的に有効な class 属性文字列を構築します。シンプルで扱いやすく、TypeScript で実装された軽量な改善ツールです（約300字）。

ReactTypeScriptJSXランタイム
Web

Resume.polish — 简历润色ツール

Resume.polishは、エンジニアや求職者が書いた大白话（普段の言い回し）を、AIを使ってプロフェッショナルな履歴書用の文章に自動変換するフロントエンド中心のツールです。無料の内蔵サービス（1端末あたり50回）やOpenAI／カスタムAPI連携に対応し、標準・データ重視・エキスパートの3種類の出力スタイルをワンクリックで生成します。React + TypeScriptで実装され、Viteやshadcn/uiなどのモダンスタックを採用しています（300字程度）

TypeScriptReactAI
Web

RSC Explorer — React Server Components プロトコル探索ツール

React Server Components（RSC）のプロトコルを学んだり試したりするためのブラウザ内で動作するツールです。サーバー側・クライアント側の両パートをブラウザで再現し、RSCストリームをステップごとに可視化して、送受信されるデータや部分的にレンダリングされるReactツリーの状態を確認できます。教育目的やプロトコル解析、実装検証に向いた趣味プロジェクトで、TypeScriptで書かれています（簡潔に300字程度）。

ReactRSCTypeScript