Uploaded July 2022 | Updated September 2026, 1 week ago

---

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
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
threejs.org

Drei
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.gg/2wBhwchcWu

📸 Instagram :
instagram.com/wawa.sensei

🎎 Facebook :
facebook.com/wawasenseiyt

🐦Twitter :
twitter.com/wawasensei

💻 My website :
https://www.wawasensei.dev

🎨 The end screen artist (aka My friend) :
instagram.com/noemie_pulido