Show HN: Framework 3D untuk Web Berbasis Svelte dan Three.js

 (threlte.xyz)
4 poin oleh GN⁺ 2024-04-30 | 1 komentar | Bagikan ke WhatsApp
  • Threlte adalah framework open-source yang menempatkan model komponen reaktif Svelte di atas Three.js untuk membuat aplikasi 3D interaktif di web dengan cepat
  • Objek Three.js disusun dengan komponen deklaratif seperti <T.Mesh>, sementara langganan event dan perubahan state ditangani melalui lifecycle Svelte
  • Menyediakan Rapier physics engine, tool animasi Theatre.js, @threlte/gltf, dan @threlte/extras sebagai tool bawaan, sehingga mengurangi pekerjaan awal saat menyusun aplikasi 3D
  • Perilaku yang belum cukup hanya dengan komponen <T> dapat diperluas lewat Plugins yang type-safe untuk menambahkan props dan event kustom
  • Bagi developer di ekosistem Svelte yang mencari library THREE deklaratif dan tool pembuatan aplikasi WebGL, dokumentasi dan kemudahan penggunaannya dinilai sebagai keunggulan

Menyusun scene Three.js dengan cara Svelte

  • Threlte adalah framework 3D untuk web yang dibuat di atas Svelte dan Three.js
  • Berfokus pada pembangunan aplikasi 3D interaktif dengan cepat menggunakan komponen deklaratif dan reaktif
  • Dengan memanfaatkan lifecycle komponen Svelte, pekerjaan berikut dapat ditangani
    • Berlangganan event
    • Menangani perubahan state
    • Menghubungkan perilaku berbasis komponen
  • Kode contoh menempatkan geometry dan material di dalam <T.Mesh>, lalu menetapkan props dan event seperti scale, position.x, dan onclick secara langsung
  • Penyusunan scene pertama dapat dilihat di Make Your First Scene

Tool yang disertakan dan cara ekstensi

  • Threlte mengusung konfigurasi “batteries included” dan menyertakan tool yang dibutuhkan untuk membuat aplikasi 3D
    • Rapier: physics engine
    • Theatre.js: library animasi dengan toolset desain motion profesional
    • @threlte/gltf: tool untuk mengonversi file GLTF menjadi komponen Threlte
    • @threlte/extras: kumpulan komponen dan utilitas yang dibutuhkan untuk memulai
  • Contoh Rapier menggabungkan RigidBody, AutoColliders, dan <T.Mesh> untuk menyusun collider berbentuk bola dan mesh
  • Contoh @threlte/extras memuat model /models/flower.glb dengan komponen Float dan GLTF, lalu menetapkan shadow, posisi, dan skala
  • Cara menggunakan @threlte/extras dapat dilihat di Documentation
  • Plugins adalah cara ekstensi untuk menambahkan props kustom dan event kustom ke <T> secara type-safe
    • Plugin contoh mendaftarkan prop lookAt dengan injectPlugin, lalu memanggil args.ref.lookAt(args.props.lookAt) di dalam $effect
    • Penggunaan lanjutan dirangkum di dokumentasi Plugins
  • Dokumentasi awal dan tautan komunitas juga tersedia

Bacaan terkait

1 komentar

 
GN⁺ 2024-04-30
Opini Hacker News
  • Saya pembuat Threlte. Terima kasih sudah mengunggahnya, dan kalau penasaran apa yang sedang kami kerjakan sekarang, tonton video presentasi yang baru saja saya bawakan di Svelte Summit Spring: https://www.youtube.com/live/gkJ09joGBZ4?si=KX9ZwfWTixj6r55Y...
    Pada intinya ada dua hal yang sedang kami lakukan. Salah satunya adalah dukungan Svelte 5. Threlte banyak mengutak-atik internal komponen, misalnya untuk membuat penanganan event lebih efisien atau menerapkan transisi Svelte pada komponen, bukan elemen DOM, jadi pekerjaannya sedikit lebih banyak dibanding library Svelte biasa. Banyak dari hal-hal ini sudah dibangun langsung ke Svelte 5, dan sisanya, seperti transisi, harus kami kesampingkan untuk sementara
    Yang satu lagi adalah Threlte Studio. Saya belum yakin cara terbaik menjelaskannya, tapi bisa dibilang ini editor yang memungkinkan Anda memodifikasi kode secara visual. Ia bisa diperluas sehingga dapat disesuaikan dengan alur kerja sendiri, dan saya penasaran sejauh mana ini bisa berkembang. Kalau tertarik, ikuti Discord http://chat.threlte.xyz atau X https://twitter.com/threlte
    • Saya penasaran bagaimana Threlte dibandingkan dengan React-Three-Fiber dari sisi kesetaraan fitur atau performa
    • Kebetulan kemarin saya baru menyelesaikan tutorial Svelte, lalu mencari tahu apakah Three.js bisa dibawa ke Svelte
      Svelte terasa sangat intuitif, jadi saya secara alami berpikir bahwa lingkungan 3D juga bisa dikelola secara efisien dengannya, dan itulah yang membuat saya mencari “Svelte + three.js”
      Sebagai orang yang pernah memakai PlayCanvas dan Babylon.js, saya sangat menantikan pengembangan Threlte Studio. Saya suka DREI karena bisa membuka semuanya seperti direktori, tetapi saya langsung teringat pada “alat studio” yang sudah familier. Saya penasaran dengan perkiraan jadwal Threlte Studio
  • Saya pernah memakai react-three-fiber dan react-three-drei; bisa dibilang ini versi React dari proyek ini. Contoh-contohnya luar biasa banyak dan bagus: https://docs.pmnd.rs/react-three-fiber/getting-started/examp...
    Yang paling saya suka adalah contoh galeri gambar. Saya pernah memodifikasinya supaya saat gambar diklik, pengguna masuk ke ruangan lain, yaitu galeri lain
    https://github.com/pmndrs/drei adalah kumpulan contoh dan helper
    Yang paling berkesan bagi saya adalah contoh yang memakai model GLTF, tekstur video di atas teks, refleksi, dan sebagainya; versi standalone-nya ada di https://bfplr.csb.app/
    Yang lebih mengesankan lagi adalah sandbox yang menunjukkan bahwa kodenya tidak terlalu banyak: https://codesandbox.io/p/sandbox/ground-reflections-and-vide...
    Membangun lapisan di atas three.js membutuhkan banyak pekerjaan dan saya juga mengalami beberapa hal yang cukup bikin pusing, tetapi potensinya tetap besar. Menggunakan three.js benar-benar mengubah cara saya memandang pengembangan situs web, dan bagi pengguna Svelte ini jelas layak dilihat
    • Saya penasaran secara spesifik bagaimana bagian “menggunakan three.js benar-benar mengubah cara saya memandang pengembangan situs web” itu berubah
    • Benar-benar keren. Jelas terasa nuansa Yugop, dan terlihat bahwa alat-alat seperti ini bisa menciptakan gaya media online yang benar-benar baru. Potensinya jelas ada
  • Saat melihat-lihat, saya menemukan aplikasi demo yang menampilkan Threlte v6: https://github.com/grischaerbe/threlter, https://threltemania.xyz/
    Technical Outline-nya, terutama penjelasan fisika mobil yang disederhanakan, cukup informatif. Pada dasarnya ini adalah klon Trackmania yang bahkan memiliki editor track, dan terlihat sebagai contoh yang memanfaatkan keunggulan Svelte/Threlte semaksimal mungkin
    • Kalau disebut “memanfaatkan keunggulan Svelte/Threlte semaksimal mungkin”, menurut Anda sendiri keunggulan itu apa?
  • Terlihat menarik. Namun kalau ingin 3D deklaratif dan komponen tanpa Svelte atau React, ada juga A-Frame atau X3D
    Saya penasaran apakah orang-orang benar-benar menginginkan 3D deklaratif. X3D/VRML sudah ada lebih dari 25 tahun dan A-Frame juga sudah 8 tahun, tetapi keduanya tidak pernah benar-benar populer; beberapa format lain juga sempat muncul lalu menghilang. Sebaliknya, three.js dan 3D imperatif/prosedural secara umum berjalan baik, dan saya penasaran mengapa demikian
    • Menurut saya 3D deklaratif dalam bentuk integrasi framework untuk Three.js sangat populer, dan bisa dibilang sekarang merupakan susunan profesional yang paling banyak digunakan di situs Three.js. Yang paling populer di antaranya adalah react-three-fiber. Sifat deklaratif framework seperti ini mempermudah reuse, dan itu menjadi fondasi ekosistemnya
    • Framework seperti react-three-fibre populer karena pemula bisa menyusun komponen yang sudah ada meskipun hampir tidak tahu JavaScript. Sering terlihat influencer di bidang ini mengatakan hal seperti “membuat configurator seperti ini hanya dengan 6 baris kode!” Yang membuat alat seperti ini populer bukan sifat deklaratif kodenya, melainkan kecepatan membuat sesuatu dan kesan mudah digunakan
  • Kombinasi Threlte/SvelteKit/Tauri keren. Baru-baru ini saya mencoba Threlte dan membuat ini: https://crusaders-ashy.vercel.app/
    Optimalisasinya belum terlalu bagus dan semua modelnya adalah model gratis dari Sketchfab. Karena ini lingkungan game 3D, punya PC modern akan membantu
  • Saya suka Svelte dan Threlte. Saya membuat papan catur 3D di lingkungan taman dan bahkan mengintegrasikannya dengan lichess; semuanya ternyata sangat mudah
    Menurut saya banyak UI bisa mendapat manfaat dari pemanfaatan 3D
    • Saya benar-benar ingin melihat seperti apa tampilannya. Contoh sederhana yang memakai library-library ini pun boleh
  • Proyek yang keren. Kalau lebih menyukai pendekatan yang lebih mendasar, A-Frame juga bagus: https://aframe.io/
  • Sintaksnya benar-benar bagus. Sama mengesankannya seperti saat pertama kali melihat Three.js dalam JSX lewat react-three-fiber. Kalau suatu hari memakai Svelte + Three, bagus untuk tahu bahwa opsi seperti ini ada
  • Saya terkesan betapa mulusnya scrolling-nya. Saya sering merasa halaman web dengan animasi berbasis scroll tersendat dan patah-patah, dan saya tidak tahu bahwa efeknya bisa sebagus ini jika benar-benar berjalan mengikuti refresh rate monitor
  • Saya sudah memakainya sekitar 2 tahun. Setiap kali melihat dokumentasinya selalu ada extra baru yang ditambahkan, dan legrisch juga hebat. Discord-nya juga cukup aktif. Ini kumpulan alat yang luar biasa, dan saya menantikan sejauh mana ia akan berkembang