โคมไฟตั้งโต๊ะกระจกสีทิฟฟานี

ใช้ three.js สร้างฉากอินเทอร์แอกทีฟแบบหน้าเดียวของ "โคมไฟตั้งโต๊ะกระจกสีทิฟฟานี" โดยสร้างเนื้อหาทั้งหมดด้วยโค้ดแบบโพรซีเดอรัล — ห้ามโหลดภาพ โมเดล หรือฟอนต์จากภายนอก

ฉากเป็นห้องมืดในยามดึก มีโต๊ะไม้ ผนัง และโคมไฟตั้งโต๊ะที่ส่องสว่าง โป๊ะโคมประกอบขึ้นจากชิ้นกระจกทรงไม่สม่ำเสมอหลายร้อยชิ้น ขอบด้วยร่องตะกั่ว และมีขอบลอนคลื่นตามแนวริมล่าง ลวดลายอ้างอิงนกฮัมมิงเบิร์ด ชบาสีแดง ลิลลีสีชมพู และเถาใบไม้เลื้อย กระจกต้องมีคุณสมบัติโปร่งแสงเมื่อมีแสงส่องจากด้านหลัง โดยด้านของแต่ละชิ้นที่อยู่ใกล้หลอดไฟจะสว่างกว่า และพื้นผิวมีระลอกละเอียดแบบกระจกทำมือ ฐานและก้านโคมทำจากบรอนซ์ มีคราบพาทินาสีเขียวจากการออกซิไดซ์และลวดลายนูนแบบเถาวัลย์ มองเห็นไส้หลอดทังสเตนภายในหลอดไฟ

แสงคือจุดสำคัญ เมื่อเปิดโคมไฟ จะมีจุดแสงสีตกกระทบบนหน้าโต๊ะและผนัง ร่องตะกั่วทอดเงาเป็นตารางเส้นมืดบนโต๊ะ มีหมอกอุ่นจางมากลอยอยู่ใต้ขอบโป๊ะ และฝุ่นละอองลอยในอากาศซึ่งมองเห็นได้เฉพาะในบริเวณที่มีแสง ภาพรวมต้องให้ความรู้สึกแบบภาพยนตร์: การเรนเดอร์ HDR + bloom นุ่มนวล + ระยะชัดลึก + เกรนขอบมืด — พอดี ไม่สว่างจ้าหรือแสบตาเกินไป เมื่อปิดโคมไฟ ให้มีแสงจันทร์เย็น ๆ จากหน้าต่างเล็กน้อย เพื่อให้ยังมองเห็นเงาร่างและโซ่ดึงได้ เปลี่ยนลวดลายโป๊ะจากนกฮัมมิงเบิร์ดและชบาเป็นแมลงปอและบัวสาย: ปรับพาเลตกระจกเป็นสีน้ำเงินและเขียวโทนเย็น แต้มสีม่วง เพิ่มลวดลายระลอกน้ำบนฐานบรอนซ์ และปรับโทนจุดแสงที่ฉายบนผนังให้เป็นสีน้ำเงินเขียวแบบน้ำเพื่อให้เข้ากัน การโต้ตอบ:
- การเลื่อนหน้าจะขับเคลื่อนเส้นทางกล้อง จากภาพมุมกว้างไปยังมุมมองจากด้านบน ภาพมาโครของโป๊ะ และภาพระยะใกล้ของฐาน เมื่อเลื่อนถึงท้ายหน้าจะเข้าสู่มุมมองหมุนอิสระ
- ดึงโซ่เพื่อเปิด/ปิดโคมไฟ ลากโซ่ขึ้นลงเพื่อปรับความสว่างได้อย่างต่อเนื่อง โคมไฟจะสว่างทีละชิ้น ไล่จากขอบโป๊ะขึ้นไปยังยอด
- คลิกโป๊ะเพื่อยกโป๊ะทั้งชิ้นออก เมื่อยกแล้วสามารถหยิบชิ้นกระจกชิ้นเดียวขึ้นมาส่องดูใกล้ตาได้
- ดับเบิลคลิกฐานเพื่อแยกชิ้นส่วนโคมไฟทั้งชุดให้ลอยอยู่กลางอากาศ
- มีชุดสี 3 แบบ (ดั้งเดิม / โทนเย็น / อำพัน) เมื่อสลับ สีจะไหลลงมาจากยอดโป๊ะ

เลย์เอาต์: ชื่อเรื่องฟอนต์เซอริฟขนาดใหญ่แนวตั้งอยู่ด้านซ้ายและค่อย ๆ จางหายเมื่อเลื่อนหน้า ด้านขวาเป็นคอลัมน์ปุ่มทรงแคปซูลแบบเรียบเบา (เปิดไฟ, ยกโป๊ะ, แยกชิ้นส่วน, มุมมองอิสระ) พร้อมจุดเลือกชุดสี โดยป้ายปุ่มจะแสดงสถานะปัจจุบัน คงดีไซน์โดยรวมให้มินิมอลและเข้ากับโทนมืดของฉาก บนมือถือให้ปรับเป็นแถวแนวนอนด้านล่างโดยอัตโนมัติ

ใช้ three.js สร้างฉากอินเทอร์แอกทีฟแบบหน้าเดียวของ "โคมไฟตั้งโต๊ะกระจกสีทิฟฟานี" โดยสร้างเนื้อหาทั้งหมดด้วยโค้ดแบบโพรซีเดอรัล — ห้ามโหลดภาพ โมเดล หรือฟอนต์จากภายนอก

ฉากเป็นห้องมืดในยามดึก มีโต๊ะไม้ ผนัง และโคมไฟตั้งโต๊ะที่ส่องสว่าง โป๊ะโคมประกอบขึ้นจากชิ้นกระจกทรงไม่สม่ำเสมอหลายร้อยชิ้น ขอบด้วยร่องตะกั่ว และมีขอบลอนคลื่นตามแนวริมล่าง ลวดลายอ้างอิงนกฮัมมิงเบิร์ด ชบาสีแดง ลิลลีสีชมพู และเถาใบไม้เลื้อย กระจกต้องมีคุณสมบัติโปร่งแสงเมื่อมีแสงส่องจากด้านหลัง โดยด้านของแต่ละชิ้นที่อยู่ใกล้หลอดไฟจะสว่างกว่า และพื้นผิวมีระลอกละเอียดแบบกระจกทำมือ ฐานและก้านโคมทำจากบรอนซ์ มีคราบพาทินาสีเขียวจากการออกซิไดซ์และลวดลายนูนแบบเถาวัลย์ มองเห็นไส้หลอดทังสเตนภายในหลอดไฟ

แสงคือจุดสำคัญ เมื่อเปิดโคมไฟ จะมีจุดแสงสีตกกระทบบนหน้าโต๊ะและผนัง ร่องตะกั่วทอดเงาเป็นตารางเส้นมืดบนโต๊ะ มีหมอกอุ่นจางมากลอยอยู่ใต้ขอบโป๊ะ และฝุ่นละอองลอยในอากาศซึ่งมองเห็นได้เฉพาะในบริเวณที่มีแสง ภาพรวมต้องให้ความรู้สึกแบบภาพยนตร์: การเรนเดอร์ HDR + bloom นุ่มนวล + ระยะชัดลึก + เกรนขอบมืด — พอดี ไม่สว่างจ้าหรือแสบตาเกินไป เมื่อปิดโคมไฟ ให้มีแสงจันทร์เย็น ๆ จากหน้าต่างเล็กน้อย เพื่อให้ยังมองเห็นเงาร่างและโซ่ดึงได้ เพิ่มสวิตช์เปิดใช้โหมดสอน: เมื่อเปิดใช้ การคลิกชิ้นกระจกใดก็ได้จะซูมเข้าและแสดงชื่อสี (ทั้งภาษาจีนและอังกฤษ) พร้อมค่า hex ขณะที่ชิ้นที่อยู่ติดกันและมีสีเดียวกันจะถูกเน้นอย่างนุ่มนวล เหมาะสำหรับสอนเด็กเรื่องสีและการจับคู่สี การโต้ตอบ:
- การเลื่อนหน้าจะขับเคลื่อนเส้นทางกล้อง จากภาพมุมกว้างไปยังมุมมองจากด้านบน ภาพมาโครของโป๊ะ และภาพระยะใกล้ของฐาน เมื่อเลื่อนถึงท้ายหน้าจะเข้าสู่มุมมองหมุนอิสระ
- ดึงโซ่เพื่อเปิด/ปิดโคมไฟ ลากโซ่ขึ้นลงเพื่อปรับความสว่างได้อย่างต่อเนื่อง โคมไฟจะสว่างทีละชิ้น ไล่จากขอบโป๊ะขึ้นไปยังยอด
- คลิกโป๊ะเพื่อยกโป๊ะทั้งชิ้นออก เมื่อยกแล้วสามารถหยิบชิ้นกระจกชิ้นเดียวขึ้นมาส่องดูใกล้ตาได้
- ดับเบิลคลิกฐานเพื่อแยกชิ้นส่วนโคมไฟทั้งชุดให้ลอยอยู่กลางอากาศ
- มีชุดสี 3 แบบ (ดั้งเดิม / โทนเย็น / อำพัน) เมื่อสลับ สีจะไหลลงมาจากยอดโป๊ะ

เลย์เอาต์: ชื่อเรื่องฟอนต์เซอริฟขนาดใหญ่แนวตั้งอยู่ด้านซ้ายและค่อย ๆ จางหายเมื่อเลื่อนหน้า ด้านขวาเป็นคอลัมน์ปุ่มทรงแคปซูลแบบเรียบเบา (เปิดไฟ, ยกโป๊ะ, แยกชิ้นส่วน, มุมมองอิสระ) พร้อมจุดเลือกชุดสี โดยป้ายปุ่มจะแสดงสถานะปัจจุบัน คงดีไซน์โดยรวมให้มินิมอลและเข้ากับโทนมืดของฉาก บนมือถือให้ปรับเป็นแถวแนวนอนด้านล่างโดยอัตโนมัติ