💡 Inspiration
We wanted to learn how to create 3D interactive experiences on the web, and learn more about 3D modeling. Since it is winter, we looked at the animals that are closely associated with winter and decided on penguins and seals. We love Pingu and hence, we named our project Noot Noot.
🔍 What it does
Explore a magical winter wonderland where you help our little Penguin friend prepare for the winter holiday with their family.
🔧 How we built it
We first read through the three.js documentation and played around with the sample scenes to better understand three.js. We then tested loading some of our own models to learn more about loaders, 3D model formats, and textures.
After we figured out how to load in basic models, we got to work with blender to create models of our own to populate our scenes. There was a lot of trial and error involved in creating the models, and figuring out how to sculpt and color the models, as well as how to export our custom textures.
We imported our models into three.js and created controls and game mechanics to interact with the scene, along with the camera orbit controls from three.js.
We then hosted our game to github and added the 404 page with the htaccess file, which reroutes from mistyped paths from the root to the 404 page
🏃♂️ Challenges we ran into
We had no idea how to use three.js initially. It was challenging to figure out how to display the models in three.js as there was some configuration we needed to set to import the models. We also struggled to use the world coordinate system of three.js, where we had to guess the correct amounts to move and rotate each model between each save.
We also had some export issues with blender where the gltf file would not export with the textures loaded. We had to learn about shaders in blender to find a workaround for that issue.
🏅 Accomplishments that we're proud of
- We made a game with three.js and hosted it
- Made our own models with Blender/ Paint 3d
- We custom-made our 404 page!
🧠 What we learned
- Three.js
- We learned more about the different kinds of loaders and how to import models with attached textures into a 3D scene
- Blender (Francene)
- Before this, I never used Blender before. There’s lots to explore with Blender, and hopefully I will have time to use Blender more!
- We also learned how to use some of the modifiers to speed up the modeling process
- We learnt how to make a 404 page, and link it on a github hosted site
⏭️ What's next for Noot Noot
- We would like to make our game more immersive by adding music and sound effects.
- We want to make more characters and story elements
- We want to create more mini games
*Note if the home page doesn't load, hit f12 or resize the window
Log in or sign up for Devpost to join the conversation.