3D animation in the browser can be super intimidating. In this episode, Paul Henschel (https://twitter.com/0xca0a) joins to teach us how to use react-three-fiber to create high-performance 3D animations and shapes in the browser.
The original code is here:
- demo: https://gatsby-react-three-fiber-demo.netlify.com/
- repo: https://github.com/jlengstorf/gatsby-react-three-fiber-demo
Paul made a cleaned-up version that looks much nicer here:
- demo: https://learnwithjason.surge.sh/
- repo: https://github.com/drcmda/learnwithjason
The 3D model of a rocket we used is by overlaps — link: https://skfb.ly/6HWIB
Links:
- https://github.com/react-spring/react-three-fiber
- https://www.react-spring.io/
- https://threejs.org
- https://sketchfab.com
- https://www.blender.org/
- Blender tutorial: https://www.youtube.com/watch?v=jBqYTgaFDxU
- https://www.awwwards.com/
Watch future streams live at https://www.twitch.tv/jlengstorf
Credits:
Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/)
Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1300012
Artist: http://incompetech.com/