ブラウザで動作するThree.js製のシムズライク住宅建築ツール。3D・2D両対応で、家具68点、複数階対応、リアルな光と影をサポートしています。
中辛 の解説
Next.js 15・React 18・Three.js・Tailwind CSSで実装された、フル機能の住宅プランナーです。68個のカテゴリ別家具、最大4階建て対応、階ごとの統計表示、キーボード操作対応（Ctrl+Z で戻る、マルチセレクト対応）、第一人称ウォークスルー、ドラッグ&ドロップ配置などが使えます。localStorage自動保存、JSON・GLB エクスポート、URLで設計を共有する機能も備えています。学習プロジェクトというより実用的なアプリで、難易度は中程度です。デモは即座に動作確認できます。
こんなリポジトリです
こんなときに便利です
- インテリアデザイナーが顧客向けに家具配置案をビジュアライズしてプレゼンする際に活用できます。
- 建築学科の学生が建物設計・空間配置を学びながら、3D モデルで即座に結果を確認できます。
- ゲーム開発者が建築・家具システムのリファレンス実装として、メッシュ生成やスナップ・衝突判定アルゴリズムを参考にできます。
主な機能
ほかとの違い
単なるオンラインツールではなくMITライセンスのオープンソースで、ローカル実行・コード編集が自由であり、Roomstylerなどのクローズドプラットフォームと異なり内部アーキテクチャも学習できます。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
準備するもの
- Node.js と npm（またはその互換ツール）
すぐに始める
- リポジトリをクローンします。
git clone https://github.com/ch-bas/threejs-sims-house-builder.git
cd threejs-sims-house-builder
- 依存パッケージをインストールします。
npm install
- 開発サーバーを起動します。
npm run dev
-
ブラウザで http://localhost:3000 を開きます。
-
本番ビルドの場合は以下を実行します。
npm run build && npm start
- 型チェックとテスト（Vitest）を実行できます。
npm run typecheck
npm run test
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try ch-bas/threejs-sims-house-builder
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
スター推移 · 7日
確認日時
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2026 年に作成
「デザイン・UI コンポーネント」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/ch-bas/threejs-sims-house-builder)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る