[01] Formula
Real model, real time.
โมเดล 83 ชิ้น 280,000 สามเหลี่ยม พร้อมเท็กซ์เจอร์ PBR ครบชุด บีบจาก 190 MB เหลือ 3–14 MB ด้วย Draco + WebP แล้วเรนเดอร์สดในเบราว์เซอร์ ไม่ใช่วิดีโอ — เว็บเลือกความละเอียดให้เองตามอุปกรณ์
glTF · Draco · WebP · adaptive[02] Front wing
Camera on rails.
ทุกครั้งที่เลื่อนหน้าจอ ScrollTrigger จะ scrub ไทม์ไลน์ที่ผูกกับตำแหน่งกล้องและจุดมอง กล้องจึงวิ่งตามสคริปต์เป๊ะทุกรอบ ไม่ใช่สุ่มไปตาม scroll
ScrollTrigger scrub[03] Plan view
One timeline, many targets.
ไทม์ไลน์เดียวสั่งได้ทั้งกล้อง วัสดุ ความเข้มแสง และตำแหน่งชิ้นส่วน เพราะ GSAP tween ค่าอะไรก็ได้ที่เป็นตัวเลข ไม่จำกัดแค่ CSS
Tween any numeric property[04] Materials
Fade to prototype.
เลื่อนถึงช่วงนี้ วัสดุทั้ง 56 ตัวจะไล่สีและความมันไปพร้อมกันเป็นลุคโมเดลต้นแบบ ต่อยอดเป็น configurator ให้ลูกค้าเลือกสี ล้อ หรือวัสดุแบบเรียลไทม์ได้จากจุดเดียวกัน
Material tween × 56[05] Exploded
Assemble and explode.
ทิศกระจายของแต่ละชิ้นคำนวณอัตโนมัติจากจุดศูนย์กลางของมันเทียบกับศูนย์กลางรถ ไม่ต้องมานั่งวางทีละชิ้นทั้ง 83 ชิ้น
บนเดสก์ท็อป ลากเมาส์หมุนดูรอบคันได้โปรเจกต์ทดลองของ Touchnewmedia · ยังพัฒนาอยู่ ยังไม่เสร็จสมบูรณ์
three.js + GSAP ScrollTrigger · โมเดลเรนเดอร์สดในเบราว์เซอร์