React Three Fiber Metaverse

Barely Coding Hashlips Metaverse

We’ve been hacking on a couple of React Three Fiber tutorials where the website is fully interactive 3D environment. Really digging what we’ve seen so far. An amazing tutorial series that Hashlips has released, and a couple of great videos from BarelyCoding and also Learn With Jason on Youtube helped make this happen! We’re excited at the potential these kind of builds could bring.

React Three Fiber – MuttFlip
React Three Fiber Project – Muttflip https://muttflip.netlify.app/

This is a combo of BarelyCoding boilerplate repo with the added styling and some background overlaying the heading and clickable links into the page. I’ve imported a R.Mutt 3D object, one of ART101 NFTs after downloading from IPFS linked to in the meta. So cool interacting with the objects, so you can play with the fountain and catch the ball in it as it falls or click objects or mouseover effects and so on….great potential to build games or novel interactive experience for the visitor on a mutlitude of devices.

Blender 3D Animations Mixamo

Still a massive learning curve to get to grips with the 3D software Blender and adding animations using tools like Mixamo, then being able to export and import that into the project, in a optimised way, is going to be the key. Only so far one of the projects is deployed while the metaverse build is still only on local. The embedded video to go with this post is showing the Hashlips metaverse build.

Where from here?

Blender, animations, optimising, creating games or entertaining 3D websites, profiles, galleries, integrate with web3 NFTs or art gallery and so on.

I Coded Along With Hashlips React Three Fiber Metaverse Project

I Coded Along w Hashlips React Three Fiber Metaverse Project And pushed to github repos w branches and notes (course2.md)

https://github.com/jdhorth/three-fibe… The course2 markdown file has a few notes and links to some videos. Huge thanks to Hashlips for all the great educational and useful stuff. (updated the wrong URL link to github)