three.js練習 R3F text3D

R3Fでtext3D

R3F

概要

最近、React Three Fiberを学習しハマっている。日本語テキストをSDFに変換して3Dテキストとして表示してみた。

技術

1. 3Dテキスト
   Googleフォント(ttf)をダウンロードしてtypeface.jsでjsonファイルに変換する。
   その後、r3f/dreiにて3Dテキストとしてロードする。

2. 水面
   r3f/dreiのMeshReflectorMaterialを使用した。

3. createPortalによるプリレンダー
   R3FでsetRenderTargetを利用するやり方がわからなかったので調べた。
   ここら辺がやりにくい(素のthree.jsの方が楽な)のでもう少し精錬された方法を考えていきたい。

最後に

数時間の作業でここまでの見栄えを創れるのはthree.jsでは不可能だとは思う。dreiの扱い方をどんどん調べて色々挑戦はしていきたい