Scroll-Driven 3D: Storytelling with React Three Fiber
LTトラックAEnglish
スマートフォンは高速化しました。ミドルレンジのAndroid端末でも、3Dシーンを難なくレンダリングできるようになり、3DストーリーテリングはもはやデスクトップPCだけの贅沢品ではなくなりました。ほぼすべての読者が利用できるようになったのです。
過去1年間、私はボストン・グローブ紙で3D解説記事を制作してきましたが、毎回同じ構成を使っています。シーンにはReact Three Fiber、スクロールにはIntersection Observerを使用しています。
この記事では、トリガーとなるdiv要素とIntersection Observerを使って、Reactのレンダリングサイクルに干渉することなくシーンの状態を制御する方法、そしてスマートフォン上でスムーズに動作させるために必要なことを解説します。その後、実際に動作するサンプルコードを紹介します。コンポーネントと、フォークして使えるViteスターターも共有します。
Daigo Fujiwara-Smith
Daigo Fujiwara-Smith is a Senior Newsroom Developer at The Boston Globe, builds interactive javascript graphics, charts, maps, and data visualizations for the newsroom. He has been making things for the web since tables were for layout. Currently obsessed with React Three Fiber, WebGPU, and getting scroll to behave. Originally from Japan, now in Portland, Maine.