Practice
- 原网站：https://yoyogipark.trunk-hotel.com/en/about
- 相关网站：
- https://codesandbox.io/p/sandbox/threejs-ripple-text-distortion-effect-wlt94?file=%2Fsrc%2FTouchTexture.js%3A111%2C15-111%2C18
- https://tympanus.net/codrops/2019/10/08/creating-a-water-like-distortion-effect-with-three-js/
- https://github.com/pmndrs/postprocessing?tab=readme-ov-file
- https://docs.pmnd.rs/react-three-fiber/getting-started/examples
- https://threejs.org/docs/index.html#examples/en/geometries/TextGeometry
- https://drei.pmnd.rs/?path=/docs/abstractions-text--docs
笔记
- 采用 three 的后处理。
- 使用两个画布，一个画布捕捉手势，并以颜色存储偏移数据；一个画布为 three 渲染场景。
<Canvas>
<Screen />
<EffectComposer>
<WaterEffect texture={texture} />
<Noise />
</EffectComposer>
</Canvas>
<canvas ref={canvasRef} className='absolute left-0 top-0 opacity-0' width={500} height={300} />