Category: Project: React 3D Submarine
-
3D model animation in react-three-fiber
I wanted to add an animated propeller to my submarine and thought it would be a good time to go through a basic model animation and also add some interactivity based on user input. Animating the propeller when a user presses the arrow up key is what I was going for. I started with updating…
-
Loading textures for 3D models in react-three-fiber
Last time I used a hdri file to render an underwater environment. The next thing I wanted to learn was how to give my submarine model different textures. Looking at the react-three-fiber docs on loading textures I see that I can use TextureLoader with useTexture. Loading a metal texture for the submarine I grabbed a…
-
3D scene environments using @react-three/drei
Moving on after Loading and manipulating a 3D model in react-three-fiber, I wanted to give my submarine an underwater environment. I used drei’s Environment component to start playing around with a few presets to get used to things. Make the submarine appear in an ocean environment For this, I bought an underwater HDRI scene, added…
-
Loading and manipulating a 3D model in react-three-fiber
Once I kicked the react-three-fiber tires it was time to start learning how to render 3D models in the project I started this week. I wanted to use a free submarine model I got from Turbo Squid. I just downloaded the .blend file and opened it in Blender, then File > Export > gITF 2.0.…
-
Three.js and React with react-three-fiber
This week I got back into learning three.js and wanted to integrate with my favorite frontend UI library. The goal was to build a simple react app that changes the color of a cube. The requirements were to use React and Three.js together. I found react-three-fiber, a react renderer for three.js. That was all I…