3D Portal worlds with React Three Fiber
In this post we are going to create a nice 3D portal worlds using React Three Fiber. This post have been inspired by the awesome YouTube video by this Wawa Sensei.
First clone this repository containing basic React Fiber setup. After cloning, we have changed the directory and install all the packages using yarn command. Also, started the project using yarn dev command.
We will see the basic 3D cube on http://127.0.0.1:5173/
We will create the background scene using the awesome site of Blockade Labs. Here, click on Conjure your world to get started.
Next, we will give water world in the test box and click on Generate button. After creating the world you can download the same.
We have created three worlds and put them inside the textures folder inside public folder. You can get these from the github repo at the end of this post.
Now, open the Experience.jsx file which controls camera and other things in our React Fiber project.
Next, we will make slight change in Experience.jsx file, so that we can see the backside also. Here, we are also using the water world background file.
Now, in http://127.0.0.1:5173/ we can see the background.
Now, we will also change the camera position a bit in the App.jsx file.
Now, the camera position is better in http://127.0.0.1:5173/
Now, we will get our monster from the awesome quaternius site.
They share a google drive link and inside it goto the glTF folder and download any monster of your choice.
Now, we have downloaded three monster and put them in the models folder. Next, from the terminal give the command to take the gltf file and create an jsx file. Here, we have created and Yeti.jsx file.
In the Yeti.jsx file change the function name to Yeti.
Now, in the Experience.jsx file we will include the Yeti file and also change the background.
Now, we will see a nice Yeti image on a background in http://127.0.0.1:5173/
Back in Yeti.jsx file, we will console log the actions.
Now, in the console log we will see the various actions of Yeti.
In the Yeti.jsx file, we will use the useEffect hook from React. Here, we are making the Idle action to play when the Yeti is shown.
Now, in http://127.0.0.1:5173/ we can see the Idle action of the Yeti.
Next, we will update the Experience.jsx file to show the Yeti in a Rounded box which can be moved.
Back in http://127.0.0.1:5173/ we will see the Yeti in small rounded box.
We want to show three different monster in three different rectangular boxes. So, we will create a MonsterStage component in our Experience.jsx file and pass a background and the Yeti component.
We are going to call this MonsterStage component, two more times with the position and rotation been different.
Now, we will see the perfect background with three cards in http://127.0.0.1:5173/
We will run the same gltfjsx command to generate the remaining monsters from the terminal.
In the Tribal.jsx file, we will change the function name to Tribal.
In the MushroomKing.jsx file, we will change the function name to MushroomKing.
Back in the Experience.jsx file, we will add the Tribal and MushroomKing components.
Now, we will see all the three monsters at the right place in http://127.0.0.1:5173/
Now, in the Tribal.jsx file we will add the Idle animations.
In the MushroomKing.jsx file, we will add the Idle animations.
Now, we will get the perfect Idle animation for all three monsters.
Now, in the Experience.jsx file we will add a hovered state. We will pass this hovered state to the MosterStage of different monster.
Inside the MonsterStage, we are using a pointer event to set the hover to true when we enter and set it to false when we leave.
Now, in the Tribal.jsx file, we will use this hovered props to set the animation to Weapon.
Next, in the MushroomKing.jsx file, we will use this hovered props to set the animation to Punch.
Finally, in the Yeti.jsx file, we will use this hovered props to set the animation to Duck.
Our final animation at http://127.0.0.1:5173/ looks like below.
You can find the code for the same in this github repo.
