Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AndrewPrifer/CodropsCameraFlyThroughTutorial
https://github.com/AndrewPrifer/CodropsCameraFlyThroughTutorial
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/AndrewPrifer/CodropsCameraFlyThroughTutorial
- Owner: AndrewPrifer
- License: mit
- Created: 2023-02-13T18:23:56.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-02-14T23:01:11.000Z (almost 2 years ago)
- Last Synced: 2024-10-27T22:29:41.948Z (about 2 months ago)
- Language: CSS
- Size: 1.82 MB
- Stars: 69
- Watchers: 5
- Forks: 23
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - AndrewPrifer/CodropsCameraFlyThroughTutorial - (CSS)
README
# 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.
https://user-images.githubusercontent.com/2991360/218591424-2bc3f476-6288-4999-941e-da5263064d31.mp4
[Article on Codrops](https://tympanus.net/codrops/?p=70449)
[Demo](http://tympanus.net/Development/CameraFlyThrough/)
## 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](https://sketchfab.com/3d-models/low-poly-environment-2e18c1baa9164093ad2e99e0a904363a) by [BigPo](https://sketchfab.com/BigPo)
## Misc
Follow Andrew Prifer: [Twitter](https://twitter.com/AndrewPrifer), [GitHub](https://github.com/AndrewPrifer)
Follow Theatre.js: [Twitter](https://twitter.com/theatre_js), [GitHub](https://github.com/theatre-js/theatre)
Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)
## License
[MIT](LICENSE)
Made with :blue_heart: by [Codrops](http://www.codrops.com)