บ้านของฉัน SH2401 🏠
แอปบ้าน 3D ของบ้านแบบ SH2401 โครงการเพฟ รังสิต–วิภาวดี (SC Asset) หมุนดูได้รอบทิศ แยกชั้นและงานระบบได้ และใช้บันทึกค่าใช้จ่ายของบ้านได้ในที่เดียว
เปิดใช้งาน: https://warayuthsema-alt.github.io/my-house-sh2401/
ทำอะไรได้บ้าง
- หน้าจอแบบแบบแปลน: ภาพ 3D ด้านซ้าย แผงข้อมูล 6 แท็บด้านขวา (ภาพรวม · บันทึก · แดชบอร์ด · ผ่อนบ้าน · จัดห้อง · ข้อมูลบ้าน) บนมือถือภาพ 3D อยู่ด้านบน
- คำนวณผ่อนบ้าน (ดอกเบี้ยช่วงโปร/MRR, เงินต้นคงเหลือ) และ ซิงก์ข้อมูลผ่าน Supabase ได้ (ไม่บังคับ) ใช้ไฟล์
supabase/house.sql แยกข้อมูลได้หลายบ้านด้วยรหัสบ้าน ลิงก์บ้านแต่ละหลังเก็บข้อมูลในเครื่องแยกกัน
- ดูบ้าน 3D แบบสมจริง มีแสงแดดและเงา ท้องฟ้า วัสดุผิว (ปูน กระเบื้อง ไม้ หญ้า กระจกสะท้อน) และต้นไม้
- มุมมองสำเร็จรูป: หน้าบ้าน, มุมโดรน, ด้านหลัง, ผ่าชั้นล่าง, ผ่าชั้นบน, งานระบบ
- จัดห้องเอง: แท็บ “จัดห้อง” มีเฟอร์นิเจอร์ตามแบบตกแต่งภายใน (ผนังทีวี ตู้ Pantry โซฟา ตู้เสื้อผ้า+โต๊ะแป้งห้องแต่งตัวแม่ ตู้เสื้อผ้า Master ฯลฯ) และเฟอร์นิเจอร์ทั่วไป กด “+ วาง” แล้วลากย้ายในภาพ 3D หมุน ทำสำเนา หรือลบได้ ตำแหน่งบันทึกไว้กับข้อมูลบ้าน (ซิงก์ Supabase ได้)
- เปิด-ปิดได้ 14 กลุ่ม: ชั้นล่าง ชั้นบน หลังคา ส่วนต่อเติม หลังคาต่อเติม เฟอร์นิเจอร์ ไฟฟ้า ประปา ระบายน้ำ แอร์ สื่อสาร ภูมิทัศน์ และดวงโคม-หลอดไฟ หรือเลือกเปิด-ปิดทีละชิ้นก็ได้
- ระบบไฟฟ้าแยก 13 วงจร (แสงสว่าง เต้ารับ แอร์ น้ำอุ่น ปั๊ม EV ส่วนต่อเติม ไฟภายนอก) พร้อมสวิตช์ เต้ารับ และโหมด “เปิดไฟ (กลางคืน)”
- เส้นบอกขนาดเป็นเมตร: กว้าง 11.35 ม. ลึก 6.20 ม. และระดับความสูงแต่ละชั้น
- บันทึกรายจ่ายบ้าน 8 หมวด: ค่าไฟ ค่าน้ำ ค่างวดบ้าน ค่าซ่อม แอร์ อินเทอร์เน็ต ส่วนกลาง/ภาษี/ประกัน และอื่นๆ
- ผูกรายจ่ายกับชิ้นส่วนบ้าน: แตะชิ้นส่วนในภาพ 3D (เช่น แอร์ห้องนอน 1 หรือท่อน้ำทิ้ง) เพื่อดูยอดค่าใช้จ่ายสะสม หรือบันทึกรายการใหม่ของชิ้นนั้น
- แดชบอร์ด: เทียบกับเดือนก่อน กราฟ 12 เดือนแยกหมวด ค่าไฟ/ค่าน้ำรายเดือน ส่วนของบ้านที่ใช้เงินมากที่สุด และนับงวดผ่อนบ้าน
- อัพเดท: เตือนงานบำรุงรักษาตามรอบ (ล้างแอร์ ล้างถังน้ำ สูบส้วม ฉีดปลวก ฯลฯ) และความเคลื่อนไหวล่าสุด
- ข้อมูลบ้าน: เลขผู้ใช้ไฟ/น้ำ ธนาคาร วงเงินกู้ วันหมดประกัน
- ส่งออก CSV (เปิดใน Excel) และ สำรอง/นำเข้าข้อมูล (JSON)
- ติดตั้งเป็นแอปบนมือถือได้ และเปิดได้แม้ไม่มีเน็ต หลังเปิดครั้งแรกแล้ว
ข้อมูลของฉันเก็บที่ไหน
ข้อมูลค่าใช้จ่ายเก็บใน เบราว์เซอร์ของเครื่องที่ใช้งาน (localStorage) ไม่ถูกส่งขึ้น GitHub หรือเซิร์ฟเวอร์ใด repo นี้มีแค่โค้ดกับโมเดลบ้าน
- ข้อมูลอยู่แยกกันในแต่ละเครื่องและแต่ละเบราว์เซอร์
- ถ้าล้างข้อมูลเบราว์เซอร์ ข้อมูลจะหาย ควรกด “สำรองข้อมูล” ในเมนูข้อมูลบ้านเป็นระยะ
- ย้ายไปเครื่องอื่นได้ด้วย “นำเข้าข้อมูลสำรอง”
ติดตั้งเป็นแอปบนมือถือ
- iPhone (Safari): เปิดลิงก์ → ปุ่มแชร์ → “เพิ่มไปยังหน้าจอโฮม”
- Android (Chrome): เปิดลิงก์ → เมนู ⋮ → “ติดตั้งแอป” หรือ “เพิ่มลงในหน้าจอหลัก”
โครงสร้าง repo
index.html แอปทั้งหมด (three.js + UI + บันทึกรายจ่าย)
manifest.webmanifest ข้อมูลสำหรับติดตั้งเป็นแอป
sw.js แคชสำหรับเปิดแบบออฟไลน์
icon.svg ไอคอนแอป
source/build.py เรขาคณิตบ้านจากแบบ A1-01…A2-04 (ผนัง หลังคา บันได ส่วนต่อเติม)
source/detail.py ผนังภายใน สุขภัณฑ์/built-in งานระบบ (E-01…E-07, SN-01…SN-04) และหน้าบ้าน
source/make_blend.py สร้างฉากใน Blender แล้ว export เป็น GLB
.github/workflows/ GitHub Actions: สร้างโมเดล → บีบอัด → deploy ขึ้น GitHub Pages
ไฟล์โมเดล assets/house.glb สร้างอัตโนมัติ ทุกครั้งที่ push ขึ้น branch main จึงไม่ได้เก็บไว้ใน repo
แก้ไขโมเดลบ้าน
- แก้ขนาดหรือตำแหน่งใน
source/build.py หรือ source/detail.py (หน่วยเป็นเมตร แกน X ตามแนวเสา 5→1, แกน Y จากแนวเสา C ไป A)
- commit แล้ว push ขึ้น
main จากนั้นรอ GitHub Actions ประมาณ 3–5 นาที เว็บจะอัปเดตเอง
รันบนเครื่องตัวเอง
pip install bpy==5.0.1 # Blender สำหรับ Python 3.11
HOUSE_DIR=source BLEND_OUT=house.blend GLB_OUT=assets/house.glb python source/make_blend.py NORENDER
python -m http.server 8000 # แล้วเปิด http://localhost:8000
ใส่ BLEND_OUT เพื่อให้ได้ไฟล์ .blend ไว้เปิดใน Blender ด้วย
หมายเหตุ
- ขนาดหลักอ้างอิงจากแบบมาตรฐาน SH2401-A-P(RV)-L ส่วนที่แบบไม่ได้ระบุ (หน้าต่าง ชายคา ส่วนต่อเติม) วัดจากรูปด้านและรูปถ่าย อาจคลาดเคลื่อนประมาณ 5–20 ซม.
- โค้ดใช้สัญญาอนุญาต MIT ส่วนแบบบ้านเป็นลิขสิทธิ์ของเจ้าของแบบ (SC Asset) โมเดลนี้ทำไว้ใช้อ้างอิงบ้านของตัวเอง
