Show HN: SvelteとThree.jsベースのWeb向け3Dフレームワーク

 (threlte.xyz)
4 ポイント 投稿者 GN⁺ 2024-04-30 | 1件のコメント | WhatsAppで共有
  • Threlteは、Webでインタラクティブな3Dアプリをすばやく作るために、SvelteのリアクティブなコンポーネントモデルをThree.jsの上に載せたオープンソースフレームワーク
  • <T.Mesh> のような宣言的コンポーネントでThree.jsオブジェクトを構成し、Svelteのライフサイクルを通じてイベント購読と状態変更を処理する
  • 標準ツールとして、Rapier物理エンジン、Theatre.jsアニメーションツール、@threlte/gltf、@threlte/extrasをあわせて提供し、初期の3Dアプリ構成の手間を減らす
  • <T> コンポーネントだけでは足りない動作は、型安全なPluginsでカスタムprops・イベントを追加して拡張できる
  • Svelteエコシステムで宣言的なTHREEライブラリやWebGLアプリ制作ツールを探す開発者にとって、ドキュメントと使いやすさが強みとして評価されている

Svelte流でThree.jsシーンを構成

  • ThrelteはSvelteとThree.jsの上に作られたWeb向け3Dフレームワーク
  • 宣言的・リアクティブなコンポーネントでインタラクティブな3Dアプリをすばやく構築することに重点を置く
  • Svelteコンポーネントのライフサイクルを活用して、次の作業を処理できる
    • イベントの購読
    • 状態変更の処理
    • コンポーネントベースの動作の接続
  • サンプルコードでは、<T.Mesh> の中にジオメトリとマテリアルを配置し、scale、position.x、onclick のようなpropsやイベントを直接指定する
  • 最初のシーン構成は Make Your First Scene で確認できる

同梱ツールと拡張方法

  • Threlteは「batteries included」構成を掲げ、3Dアプリ制作に必要なツールをあわせて提供する
    • Rapier: 物理エンジン
    • Theatre.js: 本格的なモーションデザインツールセットを備えたアニメーションライブラリ
    • @threlte/gltf: GLTFファイルをThrelteコンポーネントへ変換するツール
    • @threlte/extras: 開始に必要なコンポーネントとユーティリティ集
  • Rapierの例では、RigidBody、AutoColliders、<T.Mesh> を組み合わせて球体形状のコライダーとメッシュを構成する
  • @threlte/extras の例では、Float と GLTF コンポーネントで /models/flower.glb モデルを読み込み、影・位置・スケールを指定する
  • @threlte/extras の使い方は Documentation で確認できる
  • Plugins は、<T> にカスタムpropsとカスタムイベントを型安全に追加する拡張方法
    • サンプルプラグインでは、injectPlugin で lookAt propを登録し、$effect 内で args.ref.lookAt(args.props.lookAt) を呼び出す
    • 高度な使い方は Pluginsドキュメント にまとめられている
  • スタートガイドとコミュニティリンクも用意されている

関連記事

1件のコメント

 
GN⁺ 2024-04-30
Hacker News の意見
  • Threlte の作者です。取り上げてくれてありがとう。今何をしているのか気になるなら、先ほど Svelte Summit Spring で発表した動画を見るとよいです: https://www.youtube.com/live/gkJ09joGBZ4?si=KX9ZwfWTixj6r55Y...
    基本的には 2 つのことをしています。1 つは Svelte 5 対応で、Threlte はイベント処理をより効率的にしたり、DOM 要素ではなくコンポーネントに Svelte のトランジションを適用したりするために、コンポーネント内部にかなり手を入れてきたので、一般的な Svelte ライブラリより少し作業が多いです。こうしたものの多くは Svelte 5 に組み込まれ、トランジションのような残りのものは当面手放す必要があります
    もう 1 つは Threlte Studio です。まだどう説明するのがよいか分かりませんが、コードを視覚的に編集できるようにするエディタと言えます。拡張可能なので自分のワークフローに合わせられますし、どこまで行けるのか楽しみです。興味があれば Discord http://chat.threlte.xyz や X https://twitter.com/threlte をフォローしてください
    • Threlte が React-Three-Fiber と比べて、機能の同等性や性能面でどうなのか気になります
    • ちょうど昨日 Svelte のチュートリアルを終えたところで、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/ にあります
    さらに印象的なのは、コードがそれほど多くないことを示すサンドボックスです: https://codesandbox.io/p/sandbox/ground-reflections-and-vide...
    three.js の上にレイヤーを載せるには多くの作業が必要で、かなり頭の痛いことも経験しましたが、それでもポテンシャルは大きいです。three.js を使うことで、Web サイト開発の見方が完全に変わりました。Svelte を使っている人ならぜひ見てみる価値があります
    • 「three.js を使うことで Web サイト開発の見方が完全に変わった」という部分が、具体的にどう変わったのか気になります
    • 本当に格好いいです。確かに Yugop っぽさがあり、こうしたツールがオンラインメディアのまったく新しいスタイルを作れるのだと分かります。ポテンシャルは明らかです
  • 見て回っていたら、Threlte v6 を示すデモアプリを見つけました: https://github.com/grischaerbe/threlter、https://threltemania.xyz/
    Technical Outline、特に簡略化した 車両物理 の説明がかなり有益です。本質的にはトラックエディタまで備えた Trackmania クローンで、Svelte/Threlte の強みを最大限に活用した例に見えます
    • 「Svelte/Threlte の強みを最大限に活用した」というなら、あなたの言葉でその強みは何だと思いますか？
  • 面白そうです。ただ、Svelte や React なしで 宣言的 3D とコンポーネントをやりたいなら A-Frame や X3D もあります
    人々が本当に宣言的 3D を望んでいるのかは気になります。X3D/VRML は 25 年以上前からあり、A-Frame も 8 年になりますが、どちらもそれほど大衆的にはなりませんでしたし、他の形式もいくつか現れては消えました。一方で three.js と命令型/手続き型 3D は全般的にうまくいっているようですが、それがなぜなのか気になります
    • Three.js に対するフレームワーク統合の形での 宣言的 3D は非常に人気があり、今の Three.js サイトで最もよく使われるプロ向け構成と言ってもよいと思います。その中で最も人気があるのは react-three-fiber です。こうしたフレームワークの宣言的な性質のおかげで再利用が容易になり、それがエコシステムの基盤になっています
    • react-three-fibre のようなフレームワークが人気なのは、初心者が JavaScript をほとんど知らなくても既存コンポーネントを組み合わせられるからです。この分野のインフルエンサーが「たった 6 行のコードでこんなコンフィギュレータを作る！」のように言うのをよく見ます。こうしたツールを人気にしているのはコードの宣言的な性質ではなく、素早い制作速度と簡単そうに見える使い勝手です
  • Threlte/SvelteKit/Tauri の組み合わせは素晴らしいです。最近 Threlte を使ってみて、こんなものを作りました: https://crusaders-ashy.vercel.app/
    最適化が非常によくできているわけではなく、すべてのモデルは Sketchfab の無料モデルです。3D ゲーム環境なので、最近の PC があると助かります
  • Svelte も Threlte もどちらも好きです。公園の環境に 3D チェス盤を作り、lichess まで連携しましたが、すべてが驚くほど簡単でした
    多くの UI は 3D の活用 で恩恵を受けられると思います
    • それがどんな見た目なのか、ぜひ見てみたいです。これらのライブラリを使った簡単な例でも構いません
  • 素晴らしいプロジェクトです。より基本に近いアプローチを好むなら A-Frame もよいです: https://aframe.io/
  • 構文が本当に良いです。react-three-fiber で Three.js を JSX として初めて見たときと同じくらい印象的です。いつか Svelte + Three を使うことになったら、こういう選択肢があると知っておくとよさそうです
  • スクロールがどれほど滑らかなのかが印象的です。スクロールベースのアニメーションがある Web ページはよく途切れたりカクついたりすると感じていましたが、実際にモニターのリフレッシュレートに合わせて動くと、効果がここまで良くなり得るとは知りませんでした
  • 2 年ほど使ってきました。ドキュメントを見るたびに新しい extra が追加されていて、legrisch も素晴らしいです。Discord もかなり活発です。驚くべきツール群で、これからどこまで行くのか楽しみです