B · 3D Model Viewer — three.js Lab

Pattern B

โหลดโมเดล มาโชว์ให้หมุน

กลุ่มที่ใช้ได้กว้างสุด: เอาไฟล์ 3D จริงมาแสดงในเว็บ จัดแสงให้ดูดี แล้วให้คนหมุน/ซูมดูเอง — portfolio, e-commerce, โชว์ของที่ออกแบบ

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

GLTFLoader — โหลด .glb/.gltf ฟอร์แมตมาตรฐานอุตสาหกรรม (รองรับ PBR/แอนิเมชัน)
PMREMGenerator + RoomEnvironment — สร้างแสงสะท้อนรอบทิศ (IBL) โดยไม่ต้องมีไฟล์ HDR
OrbitControls — หมุน/ซูม/แพน + auto-rotate
fit-camera — คำนวณ bounding box จัดกล้องให้พอดีของอัตโนมัติ (ใช้ได้กับโมเดลทุกขนาด)

หมายเหตุ

อยากโหลด .stl (เช่นไฟล์จาก 3D printer) ก็เปลี่ยนเป็น STLLoader ได้ วิธีจัดแสง/กล้องเหมือนกันเป๊ะ

งานจริงต้องบีบไฟล์

texture = ~80% ของขนาดโมเดล. ก่อนขึ้น production บีบด้วย gltf-transform: Draco ลด geometry ~90–95%, KTX2 ลด texture ~10× (และอยู่ใน GPU แบบบีบ). โหลดด้วย DRACOLoader + KTX2Loader ต่อเข้า GLTFLoader. เดโมนี้โหลด .glb ดิบ = พอสำหรับเรียน

กำลังโหลด…

renderer.info (สด)

draw calls–

triangles–

geometries–

textures–