概要
簡単にレイアウトを作成し、3Dモデルでイメージを確認できるWebサービス
🔷 目的
新生活や引っ越しの時に役立つような、家具の配置を簡単にシミュレーションできるサービスを開発すること
🔷 利用したもの
- TypeScript
- React
- Chakra UI (UIライブラリ)
- Three.js (3Dモデルの描画)
- React Icons (アイコン)
- Interact.js (画像のドラッグ・ドロップ)
- Vercel (デプロイ)
- Blender (3Dモデル、家具の画像の作成)
🔷 工夫した点
🔸 UIに関して
- 画面をシンプルに分かりやすく作成した
- 家具が部屋からはみ出ない、操作にラグが無い等の操作性の向上
- レスポンシブに対応
🔸 プログラムに関して
- ESLintを導入し、可読性の高いコードを書いた
- データ通信量を抑えるためにファイルを圧縮して使用
🔷 今後の展望
- 間取りの種類を増やす・自由に作成できるようにする
- 家具の回転角や大きさ、テクスチャなどを自由に変更できるようにする
- 家具一括削除