概要

Blueprint3D Modern は、古典的な blueprint3d をモダンな技術スタックで再実装した 3D フロアプランナーです。コアは TypeScript と Three.js による ES モジュールで提供され、デモアプリは Next.js 15 を用いて構築されています。ローカルの IndexedDB に設計データを保存するためサーバー不要で動作し、リアルタイムな操作性と見た目の洗練さを両立。ライブラリとして組み込んでカスタマイズや拡張が可能で、フロアプラン作成・編集機能をフロントエンド中心に提供します。

リポジトリの統計情報

• スター数: 19
• フォーク数: 4
• ウォッチャー数: 19
• コミット数: 7
• ファイル数: 9
• メインの言語: TypeScript

主な特徴

• TypeScript + Three.js によるモダンで型安全な実装。ES モジュール形式で再構築。
• Next.js 15 を用いたプロダクション向けデモアプリを同梱し、IndexedDB によるローカル保存でバックエンド不要。
• リアルタイムのコンテキストメニューや直感的な操作性、3D ビューと 2D 平面の切替などフロアプラン作成に最適化。
• 軽量かつ拡張しやすい設計で、既存プロジェクトへの組み込みやカスタム機能追加が容易。

技術的なポイント

Blueprint3D Modern は「ライブラリ」と「デモアプリ」を同一リポジトリで提供する構成を取っており、コアの機能は TypeScript でモジュール化されています。レンダリング基盤に Three.js を採用することで WebGL ベースのリアルタイム 3D 表示を実現し、オブジェクト（壁、窓、家具など）の描画・選択・変形・寸法表示を高パフォーマンスで処理します。Next.js 15 を利用したデモ側は最新のルーティングとサーバーコンポーネント／クライアントコンポーネントの恩恵を受けつつ、IndexedDB を用いたローカル永続化を組み込むことで「オフラインでも動くプロダクト」を目指しています。ESM 化によりバンドル時の最適化やツリーシェイキングが効きやすく、TypeScript の型定義は導入先アプリでの開発体験を向上させます。設計面では、シーン管理・カメラ制御・UI（コンテキストメニュー、ツールバー）・データ永続化を明確に分離しており、カスタムプラグインや独自 UI の追加がしやすい構成です。ドキュメントとデモが同梱されているため、動作確認や拡張の出発点が整っている点も実務で使いやすいポイントです。

プロジェクトの構成

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

• .gitignore: file
• LICENSE: file
• README.md: file
• app: dir
• docs: dir

…他 4 ファイル

まとめ

モダン技術で再構築された実用的な 3D フロアプランライブラリ。導入と拡張が容易。

リポジトリ情報：

• 名前: blueprint3d-modern
• 説明: A modern TypeScript-based rewrite of blueprint3d — faster, cleaner, and actively maintained.
• スター数: 19
• 言語: TypeScript
• URL: https://github.com/charmlinn/blueprint3d-modern
• オーナー: charmlinn
• アバター: https://avatars.githubusercontent.com/u/95892696?v=4

READMEの抜粋：

Blueprint3D Modern

A modern, open-source 3D floor planner built with Three.js and TypeScript. Blueprint3D Modern is a complete rewrite of the classic blueprint3d library as a clean ES module, paired with a production-ready Next.js 15 demo application featuring local IndexedDB storage — no backend required.

Live Demo →

Screenshots

3D Floor Planner

3D view with real-time context menu for item dimension…