- Threlte, web’de interaktif 3D uygulamaları hızla oluşturmak için Svelte’in reaktif bileşen modelini Three.js üzerine yerleştiren açık kaynaklı bir framework’tür
<T.Mesh>gibi deklaratif bileşenlerle Three.js nesneleri oluşturur; Svelte yaşam döngüsü üzerinden olay aboneliklerini ve durum değişikliklerini işler- Varsayılan araçlar olarak Rapier fizik motoru, Theatre.js animasyon aracı,
@threlte/gltfve@threlte/extrasbirlikte sunularak ilk 3D uygulama kurulumunu azaltır - Yalnızca
<T>bileşenlerinin yetmediği davranışlar, tip güvenli Plugins ile özel props ve olaylar eklenerek genişletilebilir - Svelte ekosisteminde deklaratif bir THREE kütüphanesi ve WebGL uygulaması geliştirme aracı arayan geliştiriciler için dokümantasyonu ve kullanılabilirliği güçlü yönler olarak değerlendiriliyor
Svelte tarzında Three.js sahneleri oluşturma
- Threlte, Svelte ve Three.js üzerine inşa edilmiş web için bir 3D framework’tür
- Deklaratif ve reaktif bileşenlerle interaktif 3D uygulamaları hızla geliştirmeye odaklanır
- Svelte bileşenlerinin yaşam döngüsünden yararlanarak aşağıdaki işleri yapabilir
- Olay aboneliği
- Durum değişikliklerini işleme
- Bileşen tabanlı davranışları bağlama
- Örnek kod,
<T.Mesh>içine geometri ve materyal yerleştirir;scale,position.x,onclickgibi props ve olayları doğrudan belirtir - İlk sahnenin nasıl kurulacağı Make Your First Scene bölümünde görülebilir
Birlikte sunulan araçlar ve genişletme yöntemi
- Threlte, “batteries included” bir yapı sunduğunu vurgular ve 3D uygulama geliştirmek için gereken araçları birlikte sağlar
- Rapier: fizik motoru
- Theatre.js: profesyonel hareket tasarımı araç setine sahip animasyon kütüphanesi
@threlte/gltf: GLTF dosyalarını Threlte bileşenlerine dönüştüren araç@threlte/extras: başlangıç için gerekli bileşenler ve yardımcı araçlar koleksiyonu
- Rapier örneği,
RigidBody,AutoCollidersve<T.Mesh>kombinasyonuyla küre biçimli çarpışma gövdesi ve mesh oluşturur @threlte/extrasörneği,FloatveGLTFbileşenleriyle/models/flower.glbmodelini yükler; gölge, konum ve ölçek ayarlarını belirtir@threlte/extraskullanımı Documentation bölümünde görülebilir- Plugins,
<T>öğesine tip güvenli biçimde özel props ve özel olaylar ekleyen bir genişletme yöntemidir- Örnek plugin,
injectPluginilelookAtprop’unu kaydeder ve$effectiçindeargs.ref.lookAt(args.props.lookAt)çağırır - Gelişmiş kullanım Plugins dokümanında derlenmiştir
- Örnek plugin,
- Başlangıç dokümanları ve topluluk bağlantıları da sunulur
1 yorum
Hacker News yorumları
Temelde iki şey üzerinde çalışıyoruz. İlki Svelte 5 desteği. Threlte, olay işlemeyi daha verimli hâle getirmek ya da Svelte geçişlerini DOM öğelerine değil bileşenlere uygulamak için bileşenlerin iç kısımlarına epey dokunduğundan, sıradan bir Svelte kütüphanesine göre biraz daha fazla iş var. Bunların önemli bir kısmı Svelte 5’e yerleşik olarak geldi; geçişler gibi geri kalanları ise bir süreliğine rafa kaldırmamız gerekiyor
Diğeri Threlte Studio. Bunu en iyi nasıl anlatacağımı hâlâ bilmiyorum ama kodu görsel olarak düzenlemenizi sağlayan bir editör denebilir. Genişletilebilir olduğu için kendi iş akışınıza uyarlayabiliyorsunuz; ne kadar ileri gidebileceğini merak ediyorum. İlgileniyorsanız Discord’da http://chat.threlte.xyz ya da X’te https://twitter.com/threlte bizi takip edebilirsiniz
Svelte gerçekten çok sezgisel olduğu için 3D ortamları da verimli biçimde yönetebileceğini doğal olarak düşündüm; bu yüzden “Svelte + three.js” diye arattım
PlayCanvas ve Babylon.js kullanmış biri olarak Threlte Studio geliştirmesini çok heyecanla bekliyorum. DREI’nin her şeyi bir dizin gibi açıp göstermesini seviyorum ama aklıma alışık olduğum “stüdyo aracı” geldi. Threlte Studio için öngörülen takvimi merak ediyorum
Özellikle sevdiğim örnek, görüntü galerisi örneği. Bir görsele tıklayınca başka bir odaya, yani başka bir galeriye girecek şekilde değiştirmeyi denedim
https://github.com/pmndrs/drei örnekler ve yardımcılar derlemesi
En etkileyici bulduğum şey GLTF modelleri, metin üzerinde video dokuları, yansımalar vb. kullanan örnekti; bağımsız çalışan sürümü https://bfplr.csb.app/ adresinde
Daha da etkileyici olan, kodun aslında o kadar fazla olmadığını gösteren sandbox: https://codesandbox.io/p/sandbox/ground-reflections-and-vide...
three.js’in üzerine bir katman koymak çok emek istiyor ve epey baş ağrıtan şeyler de yaşadım ama yine de potansiyeli büyük. three.js kullanmak, web sitesi geliştirmeye bakışımı tamamen değiştirdi; Svelte kullanan biriyseniz mutlaka göz atmaya değer
Technical Outline, özellikle de basitleştirilmiş araba fiziği açıklaması oldukça faydalı. Esasen pist editörü bile olan bir Trackmania klonu ve Svelte/Threlte’in avantajlarını sonuna kadar kullanan bir örnek gibi görünüyor
İnsanların gerçekten deklaratif 3D isteyip istemediğini merak ediyorum. X3D/VRML 25 yılı aşkın süredir var, A-Frame de 8 yıllık; ama ikisi de çok yaygınlaşmadı ve başka birçok format da ortaya çıkıp kayboldu. Buna karşılık three.js ve imperatif/prosedürel 3D genel olarak iyi gidiyor; bunun nedenini merak ediyorum
Optimizasyonu çok iyi değil ve tüm modeller Sketchfab’in ücretsiz modelleri. 3D oyun ortamı olduğu için yeni bir PC’niz varsa faydası olur
Birçok UI’ın 3D kullanımından fayda görebileceğini düşünüyorum