Show HN: เฟรมเวิร์ก 3D สำหรับเว็บที่ใช้ Svelte และ Three.js

• Threlte เป็นเฟรมเวิร์กโอเพนซอร์สที่นำโมเดลคอมโพเนนต์แบบ reactive ของ Svelte มาวางบน Three.js เพื่อให้สร้าง แอป 3D แบบอินเทอร์แอ็กทีฟ บนเว็บได้อย่างรวดเร็ว
• ใช้คอมโพเนนต์แบบ declarative เช่น <T.Mesh> เพื่อประกอบอ็อบเจ็กต์ของ Three.js และจัดการการ subscribe อีเวนต์กับการเปลี่ยนแปลงสถานะผ่าน ไลฟ์ไซเคิล ของ Svelte
• มีเครื่องมือพื้นฐานมาให้พร้อม เช่น เอนจินฟิสิกส์ Rapier, เครื่องมือแอนิเมชัน Theatre.js, @threlte/gltf, @threlte/extras ช่วยลดงานตั้งต้นในการสร้างแอป 3D
• พฤติกรรมที่ทำด้วยคอมโพเนนต์ <T> เพียงอย่างเดียวไม่พอ สามารถขยายได้ด้วย Plugins ที่ type-safe เพื่อเพิ่ม props และอีเวนต์แบบกำหนดเอง
• สำหรับนักพัฒนาที่มองหาไลบรารี THREE แบบ declarative และเครื่องมือสร้างแอป WebGL ในระบบนิเวศ Svelte จุดแข็งที่ได้รับการประเมินคือเอกสารและความใช้งานง่าย

---

จัดฉาก Three.js ในแบบของ Svelte

• Threlte เป็นเฟรมเวิร์ก 3D สำหรับเว็บที่สร้างบน Svelte และ Three.js
• มุ่งเน้นการสร้าง แอป 3D แบบอินเทอร์แอ็กทีฟ อย่างรวดเร็วด้วยคอมโพเนนต์แบบ declarative และ reactive
• ใช้ไลฟ์ไซเคิลของคอมโพเนนต์ Svelte เพื่อจัดการงานต่อไปนี้ได้
  • การ subscribe อีเวนต์
  • การจัดการการเปลี่ยนแปลงสถานะ
  • การเชื่อมโยงพฤติกรรมแบบอิงคอมโพเนนต์
• โค้ดตัวอย่างวาง geometry และ material ไว้ภายใน <T.Mesh> และกำหนด props กับอีเวนต์อย่าง scale, position.x, onclick ได้โดยตรง
• การจัดฉากแรกดูได้ที่ Make Your First Scene

เครื่องมือที่มาพร้อมกันและวิธีขยาย

• Threlte ชูแนวทาง “batteries included” โดยให้เครื่องมือที่จำเป็นต่อการสร้างแอป 3D มาพร้อมกัน
  • Rapier: เอนจินฟิสิกส์
  • Theatre.js: ไลบรารีแอนิเมชันที่มีชุดเครื่องมือออกแบบการเคลื่อนไหวระดับมืออาชีพ
  • @threlte/gltf: เครื่องมือแปลง ไฟล์ GLTF เป็นคอมโพเนนต์ Threlte
  • @threlte/extras: ชุดคอมโพเนนต์และยูทิลิตีที่จำเป็นสำหรับการเริ่มต้น
• ตัวอย่าง Rapier ใช้ RigidBody, AutoColliders, <T.Mesh> ร่วมกันเพื่อประกอบ collider รูปทรงกลมและ mesh
• ตัวอย่าง @threlte/extras ใช้คอมโพเนนต์ Float และ GLTF เพื่อโหลดโมเดล /models/flower.glb พร้อมกำหนดเงา ตำแหน่ง และสเกล
• วิธีใช้ @threlte/extras ดูได้ที่ Documentation
• Plugins เป็นวิธีขยายที่เพิ่ม props และอีเวนต์แบบกำหนดเองให้กับ <T> ได้อย่าง type-safe
  • ปลั๊กอินตัวอย่างลงทะเบียน prop lookAt ด้วย injectPlugin และเรียก args.ref.lookAt(args.props.lookAt) ภายใน $effect
  • วิธีใช้ขั้นสูงสรุปไว้ใน เอกสาร Plugins
• มีเอกสารเริ่มต้นและลิงก์ชุมชนให้ด้วย
  • Getting Started
  • Discord

[GN⁺]

ความเห็นจาก Hacker News

• ฉันคือผู้เขียน Threlte ขอบคุณที่นำมาแชร์ และถ้าอยากรู้ว่าตอนนี้กำลังทำอะไรอยู่ ลองดูวิดีโอที่เพิ่งพูดในงาน Svelte Summit Spring ได้ที่: https://www.youtube.com/live/gkJ09joGBZ4?si=KX9ZwfWTixj6r55Y...
  หลัก ๆ แล้วกำลังทำอยู่สองอย่าง อย่างแรกคือ รองรับ Svelte 5 โดย Threlte มีงานมากกว่าไลบรารี Svelte ทั่วไปเล็กน้อย เพราะเราไปแตะภายในของคอมโพเนนต์ค่อนข้างเยอะเพื่อให้จัดการอีเวนต์ได้มีประสิทธิภาพขึ้น หรือเพื่อให้ใช้ Svelte transitions กับคอมโพเนนต์แทน DOM element ได้ หลายอย่างในนั้นถูกใส่มาใน Svelte 5 แล้ว และส่วนที่เหลืออย่าง transitions ก็คงต้องพักไว้ก่อนในตอนนี้
  อีกอย่างคือ Threlte Studio ตอนนี้ยังไม่แน่ใจว่าจะอธิบายยังไงดี แต่พอมองได้ว่าเป็นเอดิเตอร์ที่ช่วยให้แก้โค้ดแบบมองเห็นภาพได้ มันขยายต่อได้ด้วย คุณจึงปรับให้เข้ากับ workflow ของตัวเองได้ และฉันก็อยากรู้เหมือนกันว่าจะไปได้ไกลแค่ไหน ถ้าสนใจ ก็ตามต่อได้ใน Discord http://chat.threlte.xyz หรือ X https://twitter.com/threlte
  • อยากรู้ว่า Threlte เทียบกับ React-Three-Fiber แล้วเป็นอย่างไร ทั้งในแง่ความเท่าเทียมของฟีเจอร์และประสิทธิภาพ
  • บังเอิญเมื่อวานเพิ่งเรียน Svelte tutorial จบ และก็สงสัยพอดีว่าจะเอา Three.js มาใช้กับ Svelte ได้ไหมเลยลองค้นดู
    Svelte ดูเป็นธรรมชาติมากจนเผลอคิดไปเองเลยว่าน่าจะจัดการสภาพแวดล้อม 3D ได้อย่างมีประสิทธิภาพด้วย เลยค้นคำว่า “Svelte + three.js”
    จากที่เคยใช้ PlayCanvas กับ Babylon.js มาก่อน ฉันตื่นเต้นมากกับการพัฒนา Threlte Studio DREI มีข้อดีตรงที่แสดงทุกอย่างออกมาเป็นเหมือนไดเรกทอรี แต่ก็ทำให้นึกถึง “เครื่องมือสตูดิโอ” ที่คุ้นเคย อยากรู้ไทม์ไลน์คร่าว ๆ ของ Threlte Studio
• ฉันเคยใช้ react-three-fiber และ react-three-drei มาก่อน มองได้ว่าอันนี้คือเวอร์ชัน React ของโปรเจ็กต์นี้ ตัวอย่างเยอะมากและยอดเยี่ยม: https://docs.pmnd.rs/react-three-fiber/getting-started/examp...
  อันที่ชอบเป็นพิเศษคือตัวอย่างแกลเลอรีภาพ ฉันลองแก้ให้เมื่อคลิกรูปแล้วเข้าไปอีกห้องหนึ่ง หรือก็คืออีกแกลเลอรีหนึ่ง
  https://github.com/pmndrs/drei คือชุดรวมตัวอย่างและตัวช่วย
  สิ่งที่น่าประทับใจที่สุดสำหรับฉันคือตัวอย่างที่ใช้โมเดล GLTF, วิดีโอเท็กซ์เจอร์บนตัวอักษร และเงาสะท้อน ส่วนเวอร์ชันรันแยกอยู่ที่ https://bfplr.csb.app/
  และที่น่าทึ่งยิ่งกว่าคือ sandbox ที่แสดงให้เห็นว่าโค้ดไม่ได้เยอะขนาดนั้น: https://codesandbox.io/p/sandbox/ground-reflections-and-vide...
  การสร้างเลเยอร์ครอบบน three.js ต้องใช้แรงเยอะและมีเรื่องปวดหัวพอสมควร แต่ศักยภาพก็สูงมาก การใช้ three.js เปลี่ยนวิธีที่ฉันมองการพัฒนาเว็บไซต์ไปเลย และถ้าใครใช้ Svelte ก็ควรลองดูมาก ๆ
  • สนใจว่าประโยคที่ว่า “การใช้ three.js เปลี่ยนวิธีที่ฉันมองการพัฒนาเว็บไซต์ไปเลย” นั้น เปลี่ยนไปอย่างไรบ้างแบบที่จับต้องได้
  • เจ๋งมาก ให้ความรู้สึกแบบ Yugop ชัดเจน และเห็นเลยว่าเครื่องมือพวกนี้สามารถสร้างสไตล์ใหม่ให้สื่อออนไลน์ได้อย่างสิ้นเชิง มันมีศักยภาพจริง ๆ
• ระหว่างดูไปดูมา ฉันเจอแอปเดโมที่แสดง Threlte v6: https://github.com/grischaerbe/threlter, https://threltemania.xyz/
  Technical Outline โดยเฉพาะคำอธิบายเรื่อง ฟิสิกส์รถยนต์ แบบย่อ เข้าใจง่ายและมีประโยชน์มาก โดยแก่นแล้วมันคือ Trackmania โคลนที่มีตัวแก้ไขแทร็กมาด้วย และดูเป็นตัวอย่างที่ใช้จุดเด่นของ Svelte/Threlte ได้เต็มที่
  • ถ้าบอกว่า “ใช้จุดเด่นของ Svelte/Threlte ได้เต็มที่” แล้วในมุมของคุณ จุดเด่นนั้นคืออะไร?
• ดูน่าสนใจดี แต่ถ้าอยากทำ 3D แบบ declarative และใช้คอมโพเนนต์โดยไม่ต้องพึ่ง Svelte หรือ React ก็ยังมี A-Frame หรือ X3D อยู่
  ฉันสงสัยว่าคนต้องการ 3D แบบ declarative กันจริงไหม X3D/VRML มีมานานเกิน 25 ปีแล้ว และ A-Frame ก็มีมา 8 ปี แต่ทั้งคู่ก็ไม่ได้กลายเป็นกระแสหลักมากนัก ยังมีฟอร์แมตอื่น ๆ อีกหลายตัวที่เกิดแล้วก็หายไป ตรงกันข้ามกับ three.js และ 3D แบบ imperative/procedural ที่โดยรวมไปได้ดี เลยสงสัยว่าทำไมถึงเป็นแบบนั้น
  • 3D แบบ declarative ในรูปแบบการผนวกกับเฟรมเวิร์กสำหรับ Three.js นั้นได้รับความนิยมมาก และฉันคิดว่าอาจเป็นรูปแบบเฉพาะทางที่ถูกใช้มากที่สุดบนเว็บไซต์ Three.js ตอนนี้ด้วยซ้ำ ตัวที่นิยมที่สุดในกลุ่มนี้คือ react-three-fiber ความเป็น declarative ของเฟรมเวิร์กพวกนี้ทำให้การนำกลับมาใช้ซ้ำง่ายขึ้น และนั่นก็เป็นรากฐานของระบบนิเวศ
  • เหตุผลที่เฟรมเวิร์กอย่าง react-three-fibre ได้รับความนิยม เป็นเพราะมือใหม่สามารถเอาคอมโพเนนต์ที่มีอยู่มาประกอบกันได้โดยแทบไม่ต้องรู้ JavaScript มากนัก มักจะเห็นอินฟลูเอนเซอร์ในวงการนี้พูดประมาณว่า “สร้างคอนฟิกูเรเตอร์แบบนี้ได้ด้วยโค้ดแค่ 6 บรรทัด!” สิ่งที่ทำให้เครื่องมือพวกนี้ดังไม่ใช่ความเป็น declarative ของโค้ด แต่เป็น ความเร็วในการสร้าง และความง่ายที่ดูเหมือนเข้าถึงได้
• ชุด Threlte/SvelteKit/Tauri นี่เยี่ยมมาก ฉันเพิ่งลองใช้ Threlte ไปไม่นาน และทำอันนี้ขึ้นมา: https://crusaders-ashy.vercel.app/
  มันยังไม่ได้ optimize ดีมาก และโมเดลทั้งหมดก็เป็นโมเดลฟรีจาก Sketchfab สภาพแวดล้อมเกม 3D แบบนี้เลยน่าจะได้ประโยชน์ถ้ามี PC รุ่นใหม่หน่อย
• ฉันชอบทั้ง Svelte และ Threlte ฉันทำกระดานหมากรุก 3D ในฉากสวนสาธารณะและเชื่อมกับ lichess ด้วย ทุกอย่างง่ายอย่างน่าประหลาดใจ
  ฉันคิดว่า UI หลายแบบน่าจะได้ประโยชน์จากการ ใช้ 3D
  • อยากเห็นเลยว่าหน้าตาเป็นอย่างไร ตัวอย่างง่าย ๆ ที่ใช้ไลบรารีพวกนี้ก็ยังดี
• เป็นโปรเจ็กต์ที่ยอดเยี่ยม ถ้าชอบแนวทางที่ใกล้แก่นมากกว่า A-Frame ก็ใช้ได้ดีเช่นกัน: https://aframe.io/
• syntax ดีมาก ประทับใจพอ ๆ กับตอนที่ได้เห็น Three.js ในรูปแบบ JSX ผ่าน react-three-fiber ครั้งแรก ถ้าวันหนึ่งได้ใช้ Svelte + Three ก็ดีที่จะรู้ว่ามีตัวเลือกแบบนี้อยู่
• ประทับใจว่าการสกโรลลื่นมาก หน้าเว็บที่มีแอนิเมชันตามการสกโรลมักจะรู้สึกสะดุดและหน่วงบ่อย ๆ แต่ไม่เคยรู้มาก่อนเลยว่าถ้ารันให้สอดคล้องกับรีเฟรชเรตของจอจริง ๆ แล้ว เอฟเฟกต์มันจะออกมาดีได้ขนาดนี้
• ฉันใช้มาประมาณ 2 ปีแล้ว ทุกครั้งที่เข้าไปดูเอกสารก็มักจะมี extra ใหม่เพิ่มมาเสมอ และ legrisch ก็ยอดเยี่ยมมาก Discord ก็ค่อนข้างคึกคัก เป็นชุดเครื่องมือที่น่าทึ่ง และตื่นเต้นมากว่าจะไปได้ไกลแค่ไหนต่อจากนี้