antigravity使って家具配置ツールみたいなの作ったよ

背景を描く時にアタリがあったら描きやすいかなあ...とかイメージあったほうがいいよなあ...て思って作った。antigravityに作らせた。

ここから見れるよ：https://furniture-arrangement.vercel.app/

githubをpublicにするのだるいので以下READMEにある内容そのまま下に貼ります。

あとUIがご覧の通りの有様なのでもうちょい左margin取るだとか操作性良くするだとかしていきたい。

こんなの欲しいな〜からこういう機能でっていろいろ書くだけで作れちゃうんだからすごい世の中になっちゃったね。

3D室内デザインアプリ

React Three Fiberを使用した3D室内家具配置ツール

目的・背景

イラスト制作時に室内の構図を事前に確認できるツールが欲しかった

既存WEBサイトが自分では使いづらかったため、「Web上で最低限、家具を配置して確認できるシンプルなツール」として必要な機能に絞って自作

設計方針

実用性と操作のシンプルさを重視。設計方針は以下

• 家具の配置・移動・回転など、構図確認に必要な機能のみに限定
• グリッド表示とカメラ操作により、直感的にレイアウトを把握できるUI
• ローポリモデルを採用し、描画負荷を抑えた軽量な構成 複雑な設定や不要な機能を排除し、「配置して確認する」ことに特化したツールを目指す

今後の改善点

現状の課題として、以下の改善を検討

• 複数オブジェクトの同時選択・移動
• 数値入力による位置・サイズの精密指定
• 配置データの保存・読み込み機能

機能

• 🪑 10種類の家具配置（椅子、テーブル、ベッド、ソファ、机、本棚、観葉植物、カーペット、壁、窓）
• 🎯 ドラッグ&ドロップで家具を移動
• 🔄 家具の回転（Y軸）
• 📏 家具のサイズ調整（X, Y, Z軸）
• 🗑️ 家具の追加・削除
• 📐 グリッド表示の切り替え
• 🎨 Add/Deleteモードの切り替え
• 🖱️ OrbitControlsによる自由な視点操作

技術スタック

• React
• TypeScript
• Vite
• React Three Fiber
• @react-three/drei
• Zustand（状態管理）
• Tailwind CSS
• Lucide React

セットアップ

# 依存関係のインストール
npm install

# 開発サーバーの起動
npm run dev

# プロダクションビルド
npm run build

使い方

基本操作

1. 視点操作
2. • 左クリック + ドラッグ: 回転
   • 右クリック + ドラッグ: パン
   • スクロール: ズーム
2. 家具の追加
3. • 右上パネルで「Add」モードを選択
   • 家具タイプを選択
   • 床をクリックして配置
3. 家具の移動
4. • 家具を長押ししてドラッグ
4. 家具の編集
5. • 家具をクリックして選択
   • 右上パネルでサイズや回転を調整
5. 家具の削除
6. • 方法1: 「Delete」モードに切り替えて家具をクリック
   • 方法2: 家具を選択して「Delete Item」ボタンをクリック

パネル操作

• Mode: Add（追加）/ Delete（削除）モードの切り替え
• Add Furniture: 配置する家具の選択
• Selected Item: 選択中の家具のサイズ・回転調整、削除
• View Settings: グリッド表示の切り替え

ディレクトリ構成

src/
├── components/
│   ├── Furniture/          # 家具コンポーネント
│   │   ├── Chair.tsx
│   │   ├── Table.tsx
│   │   ├── Bed.tsx
│   │   ├── Sofa.tsx
│   │   ├── Desk.tsx
│   │   ├── Bookshelf.tsx
│   │   ├── Plant.tsx
│   │   ├── Carpet.tsx
│   │   ├── Wall.tsx
│   │   └── Window.tsx
│   ├── UI/
│   │   └── Overlay.tsx     # UIパネル
│   ├── DraggableFurniture.tsx  # ドラッグ可能な家具ラッパー
│   ├── Room.tsx            # 部屋コンポーネント
│   └── Scene.tsx           # 3Dシーンコンポーネント
├── store.ts                # Zustand状態管理
├── App.tsx
└── main.tsxsrc/
├── components/
│   ├── Furniture/          # 家具コンポーネント
│   │   ├── Chair.tsx
│   │   ├── Table.tsx
│   │   ├── Bed.tsx
│   │   ├── Sofa.tsx
│   │   ├── Desk.tsx
│   │   ├── Bookshelf.tsx
│   │   ├── Plant.tsx
│   │   ├── Carpet.tsx
│   │   ├── Wall.tsx
│   │   └── Window.tsx
│   ├── UI/
│   │   └── Overlay.tsx     # UIパネル
│   ├── DraggableFurniture.tsx  # ドラッグ可能な家具ラッパー
│   ├── Room.tsx            # 部屋コンポーネント
│   └── Scene.tsx           # 3Dシーンコンポーネント
├── store.ts                # Zustand状態管理
├── App.tsx
└── main.tsx