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

The final tutorial code

React Three Fiber

Three.js Journey (best way to dive into Three.js)
-20% with the promo code wawasensei1



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