D · DOM + 3D UI — three.js Lab

Pattern D

ป้าย HTML จริง ลอยในพื้นที่ 3D

วาง HTML/CSS ปกติ ให้เกาะจุดบนวัตถุ 3D — หมุนกล้องแล้วป้ายตามจุดนั้นไปด้วย. ป้ายเป็น DOM จริง จัด style ด้วย design system เดิมได้เลย (ฟอนต์/สี/เงา) และผูกค่าสด ๆ ได้

เทคนิคที่ได้

CSS2DRenderer + CSS2DObject — ฉาย element HTML ตามตำแหน่ง 3D (เรนเดอร์ทับ canvas อีกชั้น)
ผูกข้อมูลสดเข้า DOM (ในนี้จำลองค่าเซนเซอร์ที่อัปเดตตลอด)
lil-gui — แผงคุมพารามิเตอร์ สร้างเร็วมาก

เอาไปใช้ตรงไหน

annotate ชิ้นส่วนสินค้า, hotspot โต้ตอบ, แผนภาพ interactive, ป้ายค่าบนโมเดล (เช่นจุดเซนเซอร์บนอุปกรณ์)

CSS2D · 4 labels