Show HN: Svelte और Three.js आधारित वेब के लिए 3D फ्रेमवर्क

• Threlte वेब पर interactive 3D apps तेज़ी से बनाने के लिए Svelte के reactive component model को Three.js के ऊपर रखने वाला एक open source framework है
• <T.Mesh> जैसे declarative components से Three.js objects बनाए जाते हैं, और Svelte lifecycle के ज़रिए event subscription और state changes को संभाला जाता है
• डिफ़ॉल्ट टूलसेट में Rapier physics engine, Theatre.js animation tool, @threlte/gltf, @threlte/extras शामिल हैं, जिससे शुरुआती 3D app setup का काम कम हो जाता है
• <T> component से पूरी न होने वाली behavior को type-safe Plugins के ज़रिए custom props और events जोड़कर extend किया जा सकता है
• Svelte ecosystem में declarative THREE library और WebGL app development tools खोजने वाले developers के लिए इसकी documentation और usability को बड़ी ताकत माना जाता है

---

Svelte तरीके से Three.js scene बनाना

• Threlte, Svelte और Three.js पर बना वेब के लिए 3D framework है
• इसका फोकस declarative और reactive components के साथ interactive 3D apps जल्दी बनाना है
• Svelte components के lifecycle का उपयोग करके ये काम किए जा सकते हैं
  • event subscription
  • state changes को संभालना
  • component-based behavior को जोड़ना
• उदाहरण कोड में <T.Mesh> के अंदर geometry और material रखे जाते हैं, और scale, position.x, onclick जैसे props और events सीधे दिए जाते हैं
• पहला scene कैसे बनता है, यह Make Your First Scene में देखा जा सकता है

साथ मिलने वाले tools और extension का तरीका

• Threlte “batteries included” approach के साथ 3D app development के लिए ज़रूरी tools भी साथ देता है
  • Rapier: physics engine
  • Theatre.js: professional motion design toolset वाली animation library
  • @threlte/gltf: GLTF files को Threlte components में बदलने वाला tool
  • @threlte/extras: शुरुआत के लिए ज़रूरी components और utilities का collection
• Rapier के उदाहरण में RigidBody, AutoColliders, <T.Mesh> को मिलाकर sphere-shaped collider और mesh बनाया जाता है
• @threlte/extras के उदाहरण में Float और GLTF components से /models/flower.glb model लोड किया जाता है, और shadow, position, scale सेट किए जाते हैं
• @threlte/extras का उपयोग Documentation में देखा जा सकता है
• Plugins <T> में custom props और custom events को type-safe तरीके से जोड़ने का extension mechanism हैं
  • उदाहरण plugin, injectPlugin से lookAt prop register करता है और $effect के अंदर args.ref.lookAt(args.props.lookAt) कॉल करता है
  • advanced usage Plugins दस्तावेज़ में व्यवस्थित है
• शुरुआत के दस्तावेज़ और community links भी दिए गए हैं
  • Getting Started
  • Discord

[GN⁺]

Hacker News की राय

• मैं Threlte का लेखक हूँ। पोस्ट करने के लिए धन्यवाद, और अगर आप जानना चाहते हैं कि अभी क्या कर रहा हूँ, तो अभी-अभी Svelte Summit Spring में दी गई मेरी प्रस्तुति का वीडियो देख सकते हैं: https://www.youtube.com/live/gkJ09joGBZ4?si=KX9ZwfWTixj6r55Y...
  मूल रूप से दो चीज़ों पर काम चल रहा है। एक है Svelte 5 सपोर्ट। Threlte ने event handling को ज़्यादा efficient बनाने या DOM elements के बजाय components पर Svelte transitions लागू करने के लिए component internals में काफी बदलाव किए हैं, इसलिए सामान्य Svelte library की तुलना में इसमें थोड़ा ज़्यादा काम है। इनमें से काफी चीज़ें Svelte 5 में built-in हो गई हैं, और transitions जैसी बाकी चीज़ों को फिलहाल छोड़ना पड़ेगा
  दूसरी चीज़ है Threlte Studio। अभी समझ नहीं आ रहा कि इसे सबसे अच्छे तरीके से कैसे समझाऊँ, लेकिन इसे ऐसा editor कह सकते हैं जो code को visually edit करने देता है। यह extensible है, इसलिए इसे अपने workflow के हिसाब से ढाला जा सकता है, और मैं देखना चाहता हूँ कि यह कहाँ तक जा सकता है। अगर रुचि हो तो Discord http://chat.threlte.xyz या X https://twitter.com/threlte पर follow कर सकते हैं
  • जानना चाहता हूँ कि feature parity या performance के मामले में Threlte की तुलना React-Three-Fiber से कैसी है
  • संयोग से कल ही Svelte tutorial पूरा किया था, और सोच रहा था कि क्या Three.js को Svelte में लाया जा सकता है, इसलिए खोजा
    Svelte सच में बहुत intuitive लगा, इसलिए स्वाभाविक रूप से लगा कि 3D environment को भी efficiently manage किया जा सकता होगा, और इसी वजह से “Svelte + three.js” search किया
    PlayCanvas और Babylon.js इस्तेमाल कर चुका हूँ, इसलिए Threlte Studio development को लेकर बहुत उत्साहित हूँ। DREI में यह बात अच्छी लगती है कि वह सब कुछ directory की तरह फैला देता है, लेकिन मुझे परिचित “studio tool” याद आ गया। Threlte Studio की expected timeline जानना चाहूँगा
• मैं react-three-fiber और react-three-drei इस्तेमाल करता रहा हूँ; इसे इस project का React version समझ सकते हैं। Examples बेहद ज़्यादा और शानदार हैं: https://docs.pmnd.rs/react-three-fiber/getting-started/examp...
  मुझे खास तौर पर image gallery example पसंद है। मैंने इसे बदलकर ऐसा बनाया कि image पर click करने से किसी दूसरे room, यानी दूसरी gallery में प्रवेश हो
  https://github.com/pmndrs/drei examples और helpers का collection है
  सबसे ज़्यादा impress करने वाला example वह था जिसमें GLTF models, text पर video texture, reflections आदि इस्तेमाल होते हैं, और standalone version https://bfplr.csb.app/ पर है
  उससे भी ज़्यादा impressive यह sandbox है, जो दिखाता है कि code बहुत ज़्यादा नहीं है: https://codesandbox.io/p/sandbox/ground-reflections-and-vide...
  three.js के ऊपर layer बनाना काफी काम मांगता है और कुछ काफी सिरदर्द वाली चीज़ें भी झेलनी पड़ीं, फिर भी potential बहुत बड़ा है। three.js इस्तेमाल करते हुए website development को देखने का मेरा नज़रिया पूरी तरह बदल गया, और Svelte इस्तेमाल करने वालों के लिए यह ज़रूर देखने लायक है
  • “three.js इस्तेमाल करते हुए website development को देखने का मेरा नज़रिया पूरी तरह बदल गया” — यह specifically कैसे बदला, यह जानना चाहूँगा
  • वाकई शानदार। इसमें साफ तौर पर Yugop जैसा feel है, और दिखता है कि ऐसे tools online media की बिल्कुल नई style बना सकते हैं। Potential साफ है
• देखते-देखते Threlte v6 दिखाने वाला demo app मिला: https://github.com/grischaerbe/threlter, https://threltemania.xyz/
  Technical Outline, खासकर simplified car physics की explanation, काफी उपयोगी है। असल में यह track editor के साथ Trackmania clone है, और Svelte/Threlte की खूबियों का पूरा इस्तेमाल करने वाला example लगता है
  • अगर “Svelte/Threlte की खूबियों का पूरा इस्तेमाल” है, तो आपके हिसाब से वे खूबियाँ क्या हैं?
• दिलचस्प लग रहा है। हालांकि अगर Svelte या React के बिना declarative 3D और components चाहिए, तो A-Frame या X3D भी हैं
  मुझे आश्चर्य है कि लोग सच में declarative 3D चाहते भी हैं या नहीं। X3D/VRML को 25 साल से ज़्यादा हो गए और A-Frame को भी 8 साल हो गए, लेकिन दोनों बहुत mainstream नहीं हुए, और कई दूसरे formats भी आए और चले गए। दूसरी ओर three.js और imperative/procedural 3D कुल मिलाकर अच्छा चल रहा है—क्यों, यह जानना दिलचस्प है
  • Three.js के साथ framework integration के रूप में declarative 3D बहुत popular है, और मुझे लगता है कि इसे अभी Three.js sites में सबसे ज़्यादा इस्तेमाल होने वाला professional setup कहा जा सकता है। इनमें सबसे popular react-three-fiber है। इन frameworks की declarative nature reuse को आसान बनाती है, और वही ecosystem की नींव बनती है
  • react-three-fibre जैसे frameworks popular इसलिए हैं क्योंकि beginners JavaScript बहुत कम जाने बिना भी existing components assemble कर सकते हैं। इस area के influencers को अक्सर “सिर्फ 6 lines of code में ऐसा configurator बनाइए!” जैसा कहते देखा जाता है। ऐसे tools को popular बनाने वाली चीज़ code की declarative nature नहीं, बल्कि तेज़ बनाने की speed और इस्तेमाल में आसान दिखना है
• Threlte/SvelteKit/Tauri combo बढ़िया है। हाल में Threlte इस्तेमाल किया और यह बनाया: https://crusaders-ashy.vercel.app/
  Optimization बहुत अच्छी नहीं है और सारे models Sketchfab के free models हैं। यह 3D game environment है, इसलिए modern PC हो तो मदद मिलेगी
• मुझे Svelte और Threlte दोनों पसंद हैं। मैंने park environment में 3D chessboard बनाया और lichess तक integrate किया; सब कुछ हैरान करने वाली आसानी से हो गया
  मुझे लगता है कि कई UIs को 3D के इस्तेमाल से फायदा हो सकता है
  • यह कैसा दिखता है, ज़रूर देखना चाहूँगा। इन libraries का कोई simple example भी चलेगा
• शानदार project है। अगर आप ज़्यादा मूलभूत approach पसंद करते हैं तो A-Frame भी ठीक है: https://aframe.io/
• Syntax वाकई अच्छी है। react-three-fiber में पहली बार Three.js को JSX के रूप में देखने जितनी impressive। कभी Svelte + Three इस्तेमाल करना पड़ा तो यह option है, यह जानकर अच्छा है
• Scroll कितना smooth है, यह देखकर impress हुआ। Scroll-based animations वाली webpages अक्सर अटकती और laggy लगती हैं, लेकिन मुझे नहीं पता था कि अगर वे सच में monitor refresh rate के साथ चलें तो effect इतना अच्छा हो सकता है
• करीब 2 साल से इस्तेमाल कर रहा हूँ। Docs देखते ही हर बार कोई नया extra जुड़ा होता है, और legrisch भी शानदार है। Discord भी काफी active है। यह tools का amazing collection है और आगे कहाँ तक जाएगा, इसे लेकर उत्साहित हूँ