Project Journal #1: An Exciting New Project

This is my first entry in this project journal, and I'm thrilled to share my progress and learnings with you. In this project, I'm planning to create a 3D online game using ThreeJS and React.

This will be my first time developing a complete 3D game from scratch. While I'm not entirely sure what to expect, I'm ready to learn and create something exciting.

The Idea

The concept is to create an online game where players can interact with each other in a 3D environment. Players will be able to move around, interact with the environment, and perform actions like personalizing their characters and their own "houses".

This idea was inspired by the "Open Hotel" project from @pagoruDev. This project serves as a playground for learning and testing new technologies and ideas. My goal is to build everything from scratch using existing technologies like WebSockets, ThreeJS, React, and more.

What Will the Game Be Like?

At this stage, the game is still in its early conceptual phase. I'm exploring various mechanics to incorporate into the game. However, I can tell you that it will be a multiplayer experience inspired by "Open Hotel" and social games like "The Sims" and "Animal Crossing."

Roadmap

The current roadmap is straightforward. I need to create a basic character model and environment to start testing different mechanics and ideas. Here's how it looks:

Create a basic character model
Create a basic environment
Implement a basic character controller with essential actions like walking and jumping
Develop an authentication system and basic database to save player data
Create a room personalization system
Implement basic furniture logic
Develop a chat system
More features coming soon...

Day 1: Character Modeling

Today, I began by modeling the character. I'm using Blender to create a simple character model. As I'm not a professional modeler, I discovered this YouTube channel that explains Blender perfectly. Here's what I learned and how you can test it:

Modeling the Layout and Solid

I started by creating the character's layout. For inspiration, I used poly.pizza to find model references. Ultimately, I decided to create a basic cubic character, as I want to focus on the game's mechanics and logic while keeping the character design simple.

One of the most useful tips I learned from these videos is to use the "Subdivide Surface" modifier to create a more detailed layout and the "Mirror" modifier to create a symmetrical character. These tips significantly accelerated my modeling process.

Texturing the Character with Color Materials

After completing the layout and solid, I moved on to texturing the character with color materials. I separated the materials to enable the personalization of each character part through code. For example, I created separate materials for the character's skin and the "color" used for the character's eyes.

Rigging the Character and Adding Main Animations

Following the texturing phase, I began rigging the character. I used the "Armature" tool to create the character's bones and then added the main animations.

This was definitely the most challenging part of the modeling process. I had to learn how to use the "Armature" tool and create animations. Additionally, I needed to learn how to make the animations look natural rather than stiff. Moving each character's bone in the right way to create realistic animations was a challenging task.

Testing the Character in ThreeJS

Finally, I tested the character in ThreeJS. I used the ThreeJS free editor to test the character and its animations.

This was the moment when I truly understood how the character's animations work. It was incredibly satisfying to see the character moving exactly as I intended.

Conclusion

This was the first day of the project, and I learned a tremendous amount. I'm excited to continue with the project and see how it evolves. For the next day, I plan to create a basic environment generation system and deploy the project to test the basic mechanics, such as the character controller.

See you in the next entry!