How to build a Dapp - Model the Infinity tower with Three.js (React Three Fiber)

How to render web3 data from your smart contract into 3D in your website using Three.js and React Three Fiber ?

In the first tutorial we made a simple smart contract for our tower and deployed it to rinkeby testnet blockchain.
In the second video we created a frontend with React and interacted with the deployed smart contract using Ethers library and useDApp framework.
In this latest video we focus on the final result and build the tower in 3D using React Three Fiber (Three.js)

What you'll learn :

• Setup Three.js with React Three Fiber
• Render simple meshes (cube)
• Import model made with blender into your scene (.gltf)
• Listen to the page scroll and react accordingly

Useful links :
The final Dapp you will build
https://www.wawasensei.dev/InfinityTower/

The final tutorial code
https://github.com/wass08/infinity-tower-tutorial-threejs

React Three Fiber
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

Three.js Journey (best way to dive into Three.js)
-20% with the promo code wawasensei1
https://threejs-journey.xyz/join/wawasensei1

Three.js
https://threejs.org/

Drei
https://github.com/pmndrs/drei

If you want to dive into Web3 and Three.js don't forget to subscribe to the channel!