About

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

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

スクリーンショット 2021-12-31 043000

Ripple Effect（波紋効果）
1

Distortion Effect（ねじれ効果）
スクリーンショット 2021-12-31 043159

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（ねじれ効果）の実装

GitHub

View Github