About

このアプリケーションは、React Three Fiberを使用したPost-processingの学習結果として作成したものです。
Post-processingは、Ripple Effect(波紋効果)Distortion Effect(ねじれ効果) を実装しました。

https://nemutas.github.io/r3f-homunculus/

homunculus

Reference

このアプリケーションは、株式会社ホムンクルスのホームページに使用されているグラフィクスのクローンモデルです。

https://homunculus.jp/

実装を解説してくださっている方(Yuri Artiukh 氏)がいて、その方の動画で学習した内容を R3F + TypeScript でまとめたものが本アプリになります。

Deconstructing homunculus.jp distortion with three.js #11
Ripples effect with three.js #13

Detail

実装の詳細は、Qiitaにまとめいています。

【React Three Fiber】Post-processing:Ripple Effect(波紋効果)・Distortion Effect(ねじれ効果)の実装