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/InfinityTo...
The final tutorial code
https://github.com/wass08/infinity-to...
React Three Fiber
https://docs.pmnd.rs/react-three-fibe...
Three.js Journey (best way to dive into Three.js)
-20% with the promo code wawasensei1
https://threejs-journey.xyz/join/wawa...
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!
#threejs #dapps #web3
Intro: (00:00)
Setup Three.js: (01:00)
Render a simple cube: (05:03)
Import a GLTF into the scene: (12:05)
Listen to scroll events: (23:54)
Add postprocessing effect: (35:39)
Conclusion: (37:06)
====
💻 The Discord Community
/ discord
📸 Instagram :
/ wawa.sensei
🎎 Facebook :
/ wawasenseiyt
🐦Twitter :
/ wawasensei
💻 My website :
https://www.wawasensei.dev
🎨 The end screen artist (aka My friend) :
/ noemie_pulido