Show HN: Framework 3D cho web dựa trên Svelte và Three.js

 (threlte.xyz)
4 điểm bởi GN⁺ 2024-04-30 | 1 bình luận | Chia sẻ qua WhatsApp
  • Threlte là một framework mã nguồn mở đặt mô hình component phản ứng của Svelte lên trên Three.js để nhanh chóng tạo ra ứng dụng 3D tương tác trên web
  • Với các component khai báo như <T.Mesh>, có thể cấu thành các đối tượng Three.js và xử lý đăng ký sự kiện cùng thay đổi trạng thái thông qua vòng đời của Svelte
  • Bộ công cụ mặc định đi kèm engine vật lý Rapier, công cụ animation Theatre.js, @threlte/gltf, @threlte/extras, giúp giảm bớt khâu thiết lập ban đầu cho ứng dụng 3D
  • Những hành vi mà chỉ <T> component chưa đáp ứng đủ có thể được mở rộng bằng Plugins an toàn kiểu để thêm props·event tùy chỉnh
  • Trong hệ sinh thái Svelte, đây được đánh giá cao về tài liệu và tính dễ dùng đối với các nhà phát triển đang tìm thư viện THREE khai báo và công cụ tạo ứng dụng WebGL

Cấu hình scene Three.js theo cách của Svelte

  • Threlte là framework 3D cho web được xây dựng trên Svelte và Three.js
  • Tập trung vào việc xây dựng nhanh ứng dụng 3D tương tác bằng các component khai báo và phản ứng
  • Có thể tận dụng vòng đời của component Svelte để xử lý các tác vụ sau
    • đăng ký sự kiện
    • xử lý thay đổi trạng thái
    • liên kết hành vi dựa trên component
  • Mã ví dụ đặt geometry và material bên trong <T.Mesh>, đồng thời chỉ định trực tiếp props và event như scale, position.x, onclick
  • Có thể xem cách dựng scene đầu tiên tại Make Your First Scene

Các công cụ đi kèm và cách mở rộng

  • Threlte nhấn mạnh cấu hình “batteries included” và cung cấp sẵn các công cụ cần thiết để tạo ứng dụng 3D
    • Rapier: engine vật lý
    • Theatre.js: thư viện animation với bộ công cụ motion design chuyên nghiệp
    • @threlte/gltf: công cụ chuyển tệp GLTF thành component Threlte
    • @threlte/extras: tập hợp component và tiện ích cần thiết để bắt đầu
  • Ví dụ Rapier kết hợp RigidBody, AutoColliders, <T.Mesh> để cấu thành collider hình cầu và mesh
  • Ví dụ @threlte/extras dùng component Float và GLTF để tải model /models/flower.glb, đồng thời chỉ định bóng đổ, vị trí và tỷ lệ
  • Có thể xem cách dùng @threlte/extras trong Documentation
  • Plugins là cơ chế mở rộng cho phép thêm props và event tùy chỉnh vào <T> một cách an toàn kiểu
    • Plugin ví dụ dùng injectPlugin để đăng ký prop lookAt, rồi gọi args.ref.lookAt(args.props.lookAt) bên trong $effect
    • Cách dùng nâng cao được tổng hợp trong tài liệu Plugins
  • Tài liệu bắt đầu và liên kết cộng đồng cũng được cung cấp

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-04-30
Ý kiến trên Hacker News
  • Tôi là tác giả Threlte. Cảm ơn vì đã đăng; nếu muốn biết hiện chúng tôi đang làm gì, bạn có thể xem video tôi vừa trình bày tại Svelte Summit Spring: https://www.youtube.com/live/gkJ09joGBZ4?si=KX9ZwfWTixj6r55Y...
    Về cơ bản chúng tôi đang làm hai việc. Một là hỗ trợ Svelte 5; Threlte đã can thiệp khá nhiều vào bên trong component để làm cho xử lý sự kiện hiệu quả hơn, hoặc để áp dụng Svelte transition cho component thay vì phần tử DOM, nên công việc nhiều hơn một chút so với thư viện Svelte thông thường. Khá nhiều trong số này đã được tích hợp sẵn vào Svelte 5, còn những thứ còn lại như transition thì tạm thời sẽ phải gác lại
    Việc còn lại là Threlte Studio. Tôi vẫn chưa chắc nên mô tả thế nào cho đúng, nhưng có thể gọi nó là một editor cho phép chỉnh sửa code theo cách trực quan. Nó có thể mở rộng nên có thể tùy biến theo quy trình làm việc của bạn, và tôi rất tò mò xem nó có thể đi xa đến đâu. Nếu quan tâm, bạn có thể theo dõi trên Discord http://chat.threlte.xyz hoặc X https://twitter.com/threlte
    • Tôi tò mò Threlte so với React-Three-Fiber thì thế nào về mức tương đương tính năng hoặc hiệu năng
    • Thật trùng hợp là hôm qua tôi vừa hoàn thành tutorial Svelte, rồi tự hỏi có thể đưa Three.js vào Svelte không nên đã tìm thử
      Svelte thực sự trực quan, nên tôi tự nhiên nghĩ rằng có thể quản lý môi trường 3D một cách hiệu quả với nó, và vì thế đã tìm “Svelte + three.js”
      Từng dùng PlayCanvas và Babylon.js, tôi rất mong chờ việc phát triển Threlte Studio. Tôi thích DREI ở chỗ nó bung mọi thứ ra như một thư mục, nhưng nó cũng làm tôi nghĩ đến các “công cụ studio” quen thuộc. Tôi tò mò về lịch trình dự kiến của Threlte Studio
  • Tôi đã dùng react-three-fiber và react-three-drei; có thể xem đây là phiên bản React của dự án này. Các ví dụ thì cực kỳ nhiều và rất tốt: https://docs.pmnd.rs/react-three-fiber/getting-started/examp...
    Ví dụ tôi đặc biệt thích là gallery ảnh. Tôi từng sửa nó để khi bấm vào một ảnh thì đi vào một phòng khác, tức một gallery khác
    https://github.com/pmndrs/drei là một tập hợp các ví dụ và helper
    Ấn tượng nhất với tôi là ví dụ dùng model GLTF, video texture trên chữ, phản chiếu, v.v.; bản chạy độc lập ở https://bfplr.csb.app/
    Còn ấn tượng hơn là sandbox cho thấy lượng code không nhiều lắm: https://codesandbox.io/p/sandbox/ground-reflections-and-vide...
    Việc đặt một lớp bên trên three.js cần rất nhiều công sức và tôi cũng đã gặp vài chuyện khá đau đầu, nhưng tiềm năng vẫn rất lớn. Dùng three.js đã thay đổi hoàn toàn cách tôi nhìn việc phát triển website, và nếu bạn dùng Svelte thì rất đáng để xem qua
    • Tôi tò mò phần “dùng three.js đã thay đổi hoàn toàn cách tôi nhìn việc phát triển website” cụ thể là thay đổi như thế nào
    • Thực sự rất tuyệt. Rõ ràng có cảm giác Yugop, và có thể thấy những công cụ như thế này có thể tạo ra một phong cách hoàn toàn mới cho media trực tuyến. Tiềm năng là rất rõ
  • Khi xem qua, tôi tìm thấy một demo app thể hiện Threlte v6: https://github.com/grischaerbe/threlter, https://threltemania.xyz/
    Technical Outline, đặc biệt là phần giải thích vật lý ô tô đã đơn giản hóa, khá hữu ích. Về bản chất đây là một bản clone Trackmania có cả trình biên tập đường đua, và có vẻ là ví dụ tận dụng tối đa điểm mạnh của Svelte/Threlte
    • Nếu nói “tận dụng tối đa điểm mạnh của Svelte/Threlte”, theo bạn thì những điểm mạnh đó là gì?
  • Trông thú vị. Tuy nhiên nếu muốn làm 3D khai báo và component mà không cần Svelte hay React thì cũng có A-Frame hoặc X3D
    Tôi tò mò liệu mọi người có thực sự muốn 3D khai báo không. X3D/VRML đã tồn tại hơn 25 năm, A-Frame cũng đã 8 năm, nhưng cả hai đều không quá phổ biến; nhiều định dạng khác cũng từng xuất hiện rồi biến mất. Trong khi đó three.js và 3D kiểu mệnh lệnh/thủ tục nhìn chung lại đang phát triển tốt, tôi tự hỏi vì sao
    • Tôi nghĩ 3D khai báo dưới dạng tích hợp framework cho Three.js rất phổ biến, và có thể xem là cấu hình chuyên nghiệp được dùng nhiều nhất trên các site Three.js hiện nay. Phổ biến nhất trong số đó là react-three-fiber. Tính khai báo của các framework như vậy giúp dễ tái sử dụng, và điều đó trở thành nền tảng của hệ sinh thái
    • Lý do các framework như react-three-fibre phổ biến là vì người mới bắt đầu có thể lắp ghép các component có sẵn dù gần như không biết JavaScript. Thường thấy các influencer trong lĩnh vực này nói kiểu “tạo configurator như thế này chỉ với 6 dòng code!”. Thứ làm các công cụ này trở nên phổ biến không phải là tính khai báo của code, mà là tốc độ tạo nhanh và cảm giác dễ dùng
  • Combo Threlte/SvelteKit/Tauri rất hay. Gần đây tôi đã thử Threlte và làm ra thứ này: https://crusaders-ashy.vercel.app/
    Nó chưa được tối ưu quá tốt, và tất cả model đều là model miễn phí từ Sketchfab. Vì là môi trường game 3D nên có PC đời mới sẽ hữu ích
  • Tôi thích cả Svelte lẫn Threlte. Tôi đã làm một bàn cờ vua 3D trong môi trường công viên và tích hợp cả lichess, mọi thứ dễ đến đáng ngạc nhiên
    Tôi nghĩ nhiều UI có thể hưởng lợi từ việc tận dụng 3D
    • Tôi rất muốn xem nó trông như thế nào. Ngay cả một ví dụ đơn giản dùng các thư viện này cũng được
  • Dự án tuyệt vời. Nếu thích cách tiếp cận gần với nền tảng hơn, A-Frame cũng ổn: https://aframe.io/
  • Cú pháp thật sự tốt. Ấn tượng như lần đầu tôi thấy Three.js dưới dạng JSX với react-three-fiber. Nếu một ngày nào đó dùng Svelte + Three, thật tốt khi biết rằng có lựa chọn như thế này
  • Tôi ấn tượng với độ mượt của thao tác cuộn. Tôi thường cảm thấy các trang web có animation dựa trên cuộn hay bị khựng và giật, nhưng không ngờ khi thực sự chạy khớp với tần số quét màn hình thì hiệu ứng lại có thể tốt đến vậy
  • Tôi đã dùng khoảng 2 năm. Mỗi lần xem tài liệu lại thấy có extra mới được thêm vào, và legrisch cũng rất tuyệt. Discord cũng khá sôi động. Đây là một bộ công cụ đáng kinh ngạc và tôi rất mong xem nó sẽ tiến xa đến đâu