# Building a Web Aquarium Part One

> I want an aquarium in real life but don't have the space so I'm building one for my blog instead.

URL: [Original article](https://mattcool.tech/posts/building-a-web-aquarium-part-one)

Published: 2023-07-05T15:22:00.000Z

Tags: ar, webar, spatial-web

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](https://mattcool.tech/posts/introducing-the-clapper-feature) and [ARChef](https://mattcool.tech/posts/ar-recipe-example).

First I'm going to model an aquarium real quick in Blender.

[Image: blender basic aquarium]

Caption:
low poly fish by Quaternius.

Next, we can throw it up here using [React Three Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) 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:

[Image: web basic aquarium]

Caption:
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:

[Image: basic aquarium component]

Caption: Loading components based on props for the Aquarium.

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).

[Image: dawn, mid-day, dusk and night]

Caption:
Loading different env maps according to the time of day.

Adding some [interactivity with Natuerlich](https://mattcool.tech/posts/exploring-natuerlich-a-revolutionary-interaction-library-for-the-spatial-web)

Caption:

Check out Part 2 here: https://mattcool.tech/posts/building-a-web-aquarium-part-two