/r3f-canvas-displacement

Primary LanguageTypeScript

About

React Three Fiberを使用して、Canvasに描いた絵を、3DのパネルにDisplacement Map Textureとして適用します。

https://nemutas.github.io/r3f-canvas-displacement/ スクリーンショット 2021-12-05 170920

Detail

Displacement Mapは、黒を0、白を1としてメッシュに凸をつけます。Textureを元にメッシュ形状を変更するため、メッシュは細かく細分化されている必要があります。

  • Panelの細分化の調整

  • ワイヤーフレームと影のオンオフ

  • 色と凸の大きさの調整

  • Canvasのコントロール

Framework・Libraries