กลับหน้า Lab
three.js · r184 · WebGL + WebGPU

หกลายกราฟิกเว็บ
ที่หยิบไปต่อยอดได้

คัดจาก three.js เป็น 7 กลุ่ม pattern ที่ reusable กับงานเว็บทั่วไป — ไม่ผูกกับโปรเจคไหน. แต่ละการ์ดเปิดเดโมรันได้จริง อ่านโค้ดที่คอมเมนต์ไทย แล้วก๊อปไปใช้ได้เลย

three.js r184 · WebGL + WebGPU โค้ดคอมเมนต์ภาษาไทย หมุน/ปรับค่าสดได้
วิธีดูให้ติด: เปิดเล่นได้ทั้ง 7 แต่ถ้าจะให้จำได้จริง เลือก 1 กลุ่ม แล้วลองดัดแปลงค่าเอง — เริ่มที่ B (3D Viewer) + E (Fundamentals) ก่อนคุ้มสุด เพราะใช้ได้แทบทุกงานเว็บ
A

Data Visualization

แปลงตัวเลขเป็นภาพ 3D

map ค่า → สี ด้วย Lut, เรนเดอร์จุดเป็นหมื่นด้วย InstancedMesh, จับ hover ด้วย raycasting

เปิดเดโม
B

3D Model Viewer

โชว์โมเดล/สินค้าให้หมุนดู

โหลด GLTF (มาตรฐานอุตสาหกรรม), จัดแสง PBR แบบ environment, OrbitControls + จัดกล้องอัตโนมัติ

เปิดเดโม
C

Creative / Hero

เอฟเฟกต์ "wow" หน้า landing

particle system + custom shader (GLSL), เรืองแสงด้วย bloom postprocessing

เปิดเดโม
D

DOM + 3D UI

ป้าย HTML จริงเกาะจุดใน 3D

CSS2DRenderer วางป้าย HTML/CSS ในพื้นที่ 3D หมุนแล้วป้ายตามจุด + แผง lil-gui

เปิดเดโม
E

Fundamentals

โครงเริ่มต้นที่ทำถูกวิธี

importmap, canvas responsive + devicePixelRatio, loop, dispose() จัดการ memory — ก๊อปเป็น template

เปิดเดโม
F

WebGPU + TSL

มาตรฐานใหม่ — พร้อมใช้แล้ว (2026)

เรนเดอร์ด้วย WebGPU (auto-fallback WebGL2), เขียน material เป็น node graph ด้วย TSL

เปิดเดโม
G

GPU Compute

อนุภาคล้านจุดบน GPU

compute shader จำลองตำแหน่ง particle 1,000,000 จุดพร้อมกันทุกเฟรม (instancedArray + TSL) — WebGPU only

เปิดเดโม