Elements of Michelle

With my recent interest in 3d modeling, Three.js, Spline and other tools, I wanted to combine these interests with anime image generation.

Hence the start of creating new background images with mushrooms (my favorite) in a magical environment.

Inspired by the glowing mushroom biome from Terraria.

Below are some of the images I made in the process.

Perfectionism made me keep trying more and more for refinement.

This one is my personal favorite. * she looks so magical *

The last image is the one I chose because even though I liked other ones as well, it made the most sense for character placement.

I also have no idea why and how people figures started appearing in some images.

All of these images were generated with Stable Diffusion, Counterfeit, Blue Pencil XL and Real Cartoon XL.

One caveat of using these images in my website was that the image quality was not the best. On a bigger screen, it felt like you could even see the pixels.

So I used a free tool called Nero AI (it upscales and enhances photos).

This is the image after upscaling it. Can you see the difference?

Now that the background image is done, I created a Next.js web app with Tailwind CSS.

This is my progress so far. The background image is lighter because I set the opacity to 90. (image quality is sadly not the same due to limitations of Jumpshare to create this gif)

Creds to Elaina for the 3d witch character from Sketchfab.

For the simple up and down animation, I used the function below.

  useFrame((state, delta, xrFrame) => {
    modelRef.current.position.y =
      -2.7 + Math.sin(state.clock.elapsedTime) * 0.25;
  });

What I am now currently working on is creating navigation buttons and starlight effect with Three.js.

Final plans are to create different pages and add more animation with framer-motion.

What I want to learn more and additionally work on is to make the background image more 3d by adding depth using Blender. I will probably refer back to this resource for reference.