Aquariums are beautiful and I wish I could get one in real life but I just don’t have the space for it. I’m going to try to build web aquariums instead.
I want it to be a react component I can take anywhere in the blog, just like other components I built for this blog like The Clapper and ARChef.
First I’m going to model an aquarium real quick in Blender.
![blender basic aquarium blender basic aquarium](/assets/aquarium/start.jpg)
low poly fish by Quaternius.
Next, we can throw it up here using React Three Fiber and some very handy tools like gltf to jsx and components from Drei, a library of helpers for react three fiber. I create an Aquarium model component, and it comes out like this:
![web basic aquarium web basic aquarium](/assets/aquarium/base.jpg)
Using the Stage component, we can easily place our model in the webpage with lighting and position more or less taken care of.
Next, I want to add some water and there are all kinds of fancy ways we can do this. Probably will look best with a custom shader but for now just using a transparent standard mesh. I still have so much to learn with 3d graphics but the react three post-processing library makes it easy to play and try out different things.
Since it’s a React component, I can reuse these everywhere with different fish, decor and other options. For now, I have something like this:
![basic aquarium component basic aquarium component](/assets/aquarium/component-example-1.jpg)
And then we get an Aquarium with grass, a duck statue and a Butterfly fish created by Quaternius. I added some very light rotation animation to the plant in Blender to give it a bit of movement.
I wanted to make visiting your aquarium relate to the world around you in some way so I decided to use env maps that change based on your local time (according to your browser).
![showing some different env maps dawn, mid-day, dusk and night](/assets/aquarium/timeofday.png)
Loading different env maps according to the time of day.
Adding some interactivity with Natuerlich
I listed some ideas for the next post: Look out for Part 2!