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

โจทย์
myClover มีหลายส่วน ทั้งห้องเรียน เกม ครัว และผลงาน การวางทุกอย่างเป็นเมนูยาวทำให้คนไม่รู้จะเริ่มตรงไหน โจทย์คือทำให้การสำรวจเว็บรู้สึกเหมือนเดินเข้าบ้านจริง และยังเปิดได้ลื่นบนมือถือ
การตัดสินใจสำคัญ
- ใช้บ้านจริงเป็นต้นแบบภายนอกจำลองจากบ้านสองชั้นจริง หลังคาส้ม หน้าต่างกรอบเข้ม ระเบียงกระจก และโรงจอดรถ บ้านจึงมีเรื่องจริงรองรับ ไม่ใช่ฉากสมมติ
- เลื่อนจอแทนปุ่มควบคุมกล้องทุกคนเลื่อนจอเป็นอยู่แล้ว กล้องวิ่งตามเส้นโค้งเดียวผ่านทุกห้อง และหยุดนุ่มโดยไม่เด้งเกิน
- ของทุกชิ้นที่หยิบได้คือลิงก์ HTML จริงข้อความและปลายทางอยู่ในหน้า HTML ฉาก 3D อ่านจากตรงนั้น ถ้าเครื่องไม่รองรับ 3D คนก็ยังกดลิงก์ได้ครบ
- หน้าโหลดบอกความคืบหน้าจริงใบโคลเวอร์ติดทีละใบตามขั้นที่โหลดเสร็จจริง แล้วกลายเป็นบ้าน ไม่ใช่วงกลมหมุนเปล่า
- เครื่องช้าก็ยังลื่นถ้าภาพเริ่มกระตุก บ้านลดความละเอียดลงเองระหว่างเดิน และกลับมาคมเมื่อเครื่องว่าง
สิ่งที่ Teem สร้าง
บทบาทใน myClover ตามที่ระบุในประวัติวางแนวคิด โครงสร้างเว็บไซต์ และประสบการณ์ที่เชื่อมถึงกัน
- บ้าน 2 ชั้น 4 ห้อง และโถงบันได
- ระบบเลื่อนกล้องและหยิบของในห้อง
- หน้าโหลดที่สร้างบ้านตามความคืบหน้าจริง
- ระบบปรับความละเอียดภาพตามความเร็วเครื่อง
- เกมหาโคลเวอร์สี่ใบที่ซ่อนในบ้าน
ลองอะไรได้บ้าง
- เลื่อนจอเพื่อเดินเข้าบ้าน
- แตะของที่มีป้ายทองเพื่อดูว่าพาไปไหน
- หาโคลเวอร์สี่ใบที่ซ่อนอยู่ในบ้าน
หลักฐานว่าใช้ได้จริง
ข้อจำกัดและสถานะ
- ครั้งแรกต้องโหลดไฟล์ 3D จึงเปิดช้ากว่าหน้าเว็บปกติ บ้านจึงแยกไว้ที่ /tour/ ให้คนเลือกเข้าเอง
- บนเครื่องรุ่นเก่า ภาพจะละเอียดน้อยลงเพื่อให้ยังเดินได้ลื่น
อยากได้แบบนี้
งานของคุณเริ่มจากคุยโจทย์ แล้วจัดซอสจากข้อมูลธุรกิจของคุณ