Inspiration

The inspiration came from my desire to combine a classic trivia game with the magic of Christmas. I wanted to create something simple yet visually appealing that could entertain players and bring a bit of festive spirit.

What it does

Snoo Christmas Trivia is an interactive 3D trivia game where players answer general knowledge questions in a festive environment. The experience takes place in a Christmas-themed scene featuring colorful lights and a decorated Christmas tree at the center.

How I built it

I developed the project in one day using:

  • Svelte and Threlte: to handle the game's logic and structure.
  • Three.js: to create and render the 3D scene.
  • Blender: to model and texture the 3D assets, such as the Christmas tree and decorations.
  • I focused on integrating dynamic lights and festive colors to capture the holiday atmosphere.

Challenges I ran into

One of the biggest challenges was optimizing the assets created in Blender to ensure smooth performance with Three.js on the web. Additionally, fine-tuning the lighting and shadows to look natural and festive required time and constant testing.

Accomplishments that I'm proud of

  • Developing a complete and visually appealing game in such a short amount of time.
  • Creating an immersive 3D Christmas-themed scene with details like lights and a decorated tree.
  • Efficiently integrating tools like Svelte, Threlte, and Three.js for optimal performance.

What I learned

  • I improved my skills in integrating Three.js with Svelte and Threlte.
  • I learned how to optimize 3D models from Blender for web applications without sacrificing visual quality.
  • The importance of visual details, such as lighting and scene composition, to create an immersive experience.

What's next for Snoo Christmas Trivia

In the future, I would like to:

  • Add a scoring system and timer to make it more competitive.
  • Create more questions and difficulty levels to diversify the experience.
  • Implement a multiplayer mode so players can compete against each other.
  • Enhance the scene with interactive animations and additional visual effects.

Built With

Share this project:

Updates