myClover
โปรเจกต์ส่วนตัว

บ้าน myClover 3D

บ้านสองชั้นที่เดินชมได้บนเบราว์เซอร์ เลื่อนจอเพื่อเดินจากสวนหน้าบ้านเข้าห้องต่าง ๆ แล้วหยิบของในห้องเพื่อไปยังส่วนต่าง ๆ ของเว็บ

  • เว็บ 3D · ประสบการณ์
  • three.js
  • WebGL
  • เลื่อนจอเพื่อเดิน
  • HTML ที่ใช้ได้แม้ไม่มี 3D
บ้าน myClover แบบ 3D ผ่าผนังให้เห็นห้องนั่งเล่นและห้องทำงานชั้นบน

โจทย์

myClover มีหลายส่วน ทั้งห้องเรียน เกม ครัว และผลงาน การวางทุกอย่างเป็นเมนูยาวทำให้คนไม่รู้จะเริ่มตรงไหน โจทย์คือทำให้การสำรวจเว็บรู้สึกเหมือนเดินเข้าบ้านจริง และยังเปิดได้ลื่นบนมือถือ

การตัดสินใจสำคัญ

  1. ใช้บ้านจริงเป็นต้นแบบภายนอกจำลองจากบ้านสองชั้นจริง หลังคาส้ม หน้าต่างกรอบเข้ม ระเบียงกระจก และโรงจอดรถ บ้านจึงมีเรื่องจริงรองรับ ไม่ใช่ฉากสมมติ
  2. เลื่อนจอแทนปุ่มควบคุมกล้องทุกคนเลื่อนจอเป็นอยู่แล้ว กล้องวิ่งตามเส้นโค้งเดียวผ่านทุกห้อง และหยุดนุ่มโดยไม่เด้งเกิน
  3. ของทุกชิ้นที่หยิบได้คือลิงก์ HTML จริงข้อความและปลายทางอยู่ในหน้า HTML ฉาก 3D อ่านจากตรงนั้น ถ้าเครื่องไม่รองรับ 3D คนก็ยังกดลิงก์ได้ครบ
  4. หน้าโหลดบอกความคืบหน้าจริงใบโคลเวอร์ติดทีละใบตามขั้นที่โหลดเสร็จจริง แล้วกลายเป็นบ้าน ไม่ใช่วงกลมหมุนเปล่า
  5. เครื่องช้าก็ยังลื่นถ้าภาพเริ่มกระตุก บ้านลดความละเอียดลงเองระหว่างเดิน และกลับมาคมเมื่อเครื่องว่าง

สิ่งที่ Teem สร้าง

บทบาทใน myClover ตามที่ระบุในประวัติวางแนวคิด โครงสร้างเว็บไซต์ และประสบการณ์ที่เชื่อมถึงกัน
  • บ้าน 2 ชั้น 4 ห้อง และโถงบันได
  • ระบบเลื่อนกล้องและหยิบของในห้อง
  • หน้าโหลดที่สร้างบ้านตามความคืบหน้าจริง
  • ระบบปรับความละเอียดภาพตามความเร็วเครื่อง
  • เกมหาโคลเวอร์สี่ใบที่ซ่อนในบ้าน

ลองอะไรได้บ้าง

  • เลื่อนจอเพื่อเดินเข้าบ้าน
  • แตะของที่มีป้ายทองเพื่อดูว่าพาไปไหน
  • หาโคลเวอร์สี่ใบที่ซ่อนอยู่ในบ้าน

หลักฐานว่าใช้ได้จริง

  • เปิดใช้งานจริงที่ /tour/
  • ชุดทดสอบอัตโนมัติของบ้าน 26 รายการผ่านทั้งหมด (นับวันที่ 2026-10-24)
  • โค้ดเปิดดูได้ใน GitHub

ข้อจำกัดและสถานะ

  • ครั้งแรกต้องโหลดไฟล์ 3D จึงเปิดช้ากว่าหน้าเว็บปกติ บ้านจึงแยกไว้ที่ /tour/ ให้คนเลือกเข้าเอง
  • บนเครื่องรุ่นเก่า ภาพจะละเอียดน้อยลงเพื่อให้ยังเดินได้ลื่น

อยากได้แบบนี้

งานของคุณเริ่มจากคุยโจทย์ แล้วจัดซอสจากข้อมูลธุรกิจของคุณ