Animate a camera fly-through on scroll using Theatre.js and React Three Fiber

Display a 3D scene, and fly a camera through it as the user scrolls, using Theatre.js and React Three Fiber, in 50 lines of code.

Camera.Flythrough.using.Theatre.js.Codrops.2023-02-13T23.44.03.mp4

Article on Codrops

Demo

Installation

Install dependencies:

yarn

Compile the code for development and start a local server:

yarn dev

Create the build:

yarn build

Credits

• 3D model: Low poly environment by BigPo

Misc

Follow Andrew Prifer: Twitter, GitHub

Follow Theatre.js: Twitter, GitHub

Follow Codrops: Twitter, Facebook, GitHub, Instagram

License

MIT

Made with 💙 by Codrops