nemutas / r3f-canvas-displacement

About

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

https://nemutas.github.io/r3f-canvas-displacement/

Detail

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

• Panelの細分化の調整

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

• 色と凸の大きさの調整

• Canvasのコントロール

Framework・Libraries

• CRA（Create React App）
• TypeScript
• React Three Fiber
• leva
• Material UI
• emotion/css