【Threejs×Nextjs】DOM座標同期したWebGLをページ遷移でシームレスに動かす

概要 大まかな実装の仕組みを紹介します。 framer-motionを用いてDOMの透明度を変更したページ遷移を実装する recoilを用いて遷移時と遷移先のURLを記録する recoilを用いて遷移先のDOMがマウントされた時のURLを記録する 記録したURLによってPlaneの遷移前の頂点と遷移後の頂点を補間して動かす 解説 実装の仕組みを4段階に分けて解説します。 1. DOMの透明度を変更したページ遷移 まず、WebGLを使用する前にDOMの透明度変更によるフェードイン/アウトのページ遷移を実装します。実装には framer-motion を用います。framer-motionを使うと任意の値（今回はURL）の変動によってマウント時とアンマウント前にアニメーションをさせることができます。フェードイン/アウトするコンテンツをラップするコンポーネントを作成すると便利ですので、下記に例を