Hello Friends,
I would like to share my very first project with Three.js. What began as a simple 3D cottage grew into a small, stylized world that I’m really proud of. I went in the direction of using baked textures from the beginning, and towards the end, I realised the limitations it has brought to getting the right look and feel. Due to the various textures and models, it’s also a little heavy on the site. There are still plenty I want to improve, but I’d love to know how the experience feels for you. Thoughts and feedbacks are most welcome!
Visit the cottage https://mistwood-cottage.vercel.app
Code https://github.com/amiradeu/mistwood-cottage
Fog drapes over the hillside like a memory — soft, shifting, never fully still. In the heart of it all stands a solitary cottage, hiding a simple life of comfort.
Features
-
Cottage Life:
- Explore a lovingly detailed interior complete with a cozy bedroom, work desk, and kitchen nook.
-
Dynamic Day-Night Cycle:
- Smooth transitions between sunrise, daylight, sunset, and night scenes.
-
Natural Environment:
-
Scenic terrain with hills, mountains and ponds.
-
Environmental elements like trees, a mysterious well, cobblestone paths, and outdoor seatings.
-
Rich Visual Effects:
-
Custom shaders to bring the world to life: fog, glowing fireflies, realistic water and acoustics and tea steam.
-
Reflective mirror, dusty windows and refractive roof glass details add depth and realism.
-
Player Exploration:
-
Immersive Sound Design:
-
Dynamic ambient sounds that changes with your surroundings: summer insects outdoors, cozy jazz tunes indoors and underwater echoes.
-
Player sounds: footsteps on wood, soft grass crunching, splashing water, playful jump effect and joyful coin collection.
-
Lighthearted Gameplay:
- A simple coin collection mini-game encourages player to explore the world.
-
Cursor Interaction:
Built with:
With love 
Amira
20 Likes
Looks nice. So many things in such a little space. Liked the 4 lighting modes.
There are few minor glitches. You may add these things to your todo list:
- when the roof is hidden, part of the side beams appears after the transition of the opacity, it is better to have it shown before the transition starts
- when the distance slider is used, the camera also moves sideways, it is better to disable the navigation controls while the slider is being used
- during the night mode and increased distance the sky and the fog are still whitish, it is better to change the sky and the fog for different modes
this is so immersive it feels relaxing and alive, love it
Thank you very much for the detailed feedbacks!
- The way only part of the beams under the roof seems to behave unexpectedly honestly boggles me since the beam below it is actually part of the front side, and the opacity is not changed when toggling the left side. Perhaps it’s related to how Three.js does not render objects that are behind and overlapped by another object? I will have to look into it.
- I didn’t realise the way the camera moves sideway could be a distraction, but it makes sense. I think a mouse scroll wheel would be a more natural way to change the distance like the OrbitControl.
- You’re right, it’s weird to have a bright sky at night. I didn’t implement it initially because the way the built-in fog has to match the sky colour in order to look seamlessly. I’m considering implementing a dynamic fog which might help with a better look.
I truly appreciate your thoughts, I’ll get to them soon 
Thank you so much brother! I remember seeing your Threeverse project and I really love how the blue grids swimming pool look.
1 Like
Lovely. It was delightful to enter the house, jump to look in the mirror, and climb through the skylight!
Your project sounds fantastic, and it’s impressive that you created a small, stylized world starting with a simple 3D cottage! Using baked textures was a great choice for achieving a specific aesthetic, even if it brought some limitations later. It’s understandable that the site might feel a bit heavy due to the textures and models, but that’s something you can optimize over time.
As for feedback, I’d recommend focusing on performance improvements to ensure a smoother experience for users. You could consider reducing texture sizes, optimizing models, or implementing lazy loading for certain assets. Additionally, gathering user feedback on the look and feel of your project can help refine the design further.
Overall, it sounds like an amazing first project with Three.js, and you should be proud of what you’ve accomplished. Keep iterating and improving it’s all part of the creative process!
as I am a developer, I wanna be your friend.
Thank you very much! I’m glad you find them enjoyable 
1 Like
Wow perfect vibe for the rainy afternoon here. 
Nice work.
Thank you very much, my friend! Lazy loading & model optimisation is definitely a need to improve the overall experience. I’ve posted about the project here, X (twitter) and Three.js Journey discord, but do you have any suggestions of other ways to gather user feedbacks on the project?
Yes, you’re right! I need to remind myself to appreciate the things I’ve built, and always strive for improvements 
Thank you for your kind words!
Thank you. I’ll have to implement a raining shader to match that vibes!
1 Like
I’m very busy at work, but at work had an idea to donate. The player is pill-shaped, and so it is sensible to unify (1) weather maps with (2) gamification. 
Essentially a player capsule scales up (like a snake) as they find coins… making them faster. 
But they become small if the house throws shade on their gamma. 
I don’t mean to detract from your charming model. It seems logical that inside the detailed house takes 4x as long (visual interest), and the surrounding area takes 1/4 as long (objective growth)… redistributing the game balance. The gammification of this may tie-in to a grow/shrink season. From a high-level perspective fog could also occlude far objects?
~ Thraavers RattleyCurve
This scene looks really good! You’ve built a great environment with your own models awesome work.
First of all, thank you for sharing this as an open-source project. And secondly, huge respect for the detailed credits. You even listed the lessons you followed to build some of the assets, that’s incredibly thoughtful and the right thing to do.
First of all, you should license your project as soon as possible. Not everyone is as considerate as you are someone could steal your code or models at any time without giving credit. (github licensing guide, CC license for models)
Some advice:
- You can import the Draco decoder from Google’s CDN with the latest version, it might improve decode time or reduce your chunk size. (github.com/google/draco)
- Your water shader already looks nice, even though your roadmap says it needs a redesign. But imho, the character could use more attention. Maybe you could create an animal or human character yourself, or use a ready-made asset from Sketchfab or somewhere else. This improvement would make a huge difference, maybe worth adding to your roadmap as well.
- Shaders: In several shaders, you include “tonemapping_fragment” and “colorspace_fragment”. But in some cases, these might be unnecessary, for example, in the fireflies fragment shader, color and strength are already being manually controlled and it’s just a single color. Try removing those includes and see how it looks, I know where those lines come from (I followed the same courses ), but sometimes including Three.js fragments isn’t needed. Long story short: in GPU logic, less code and fewer calculations usually mean better performance.
- Performance looks solid too! Even though I couldn’t access the settings menu or stats panel, the custom low-poly models you’ve created look great and run smoothly.
- Maybe the terrain could use a bit more polish, either with more vertices or a slightly more detailed texture. Compared to the other models, the floor looks a bit lower in quality, that’s all.
The fact that my project found a place in your mind during a busy workday truly honoured me Thank you so much for sharing your ideas and insights 
I love the idea of tying environmental elements with how it can affect the player, it would definitely adds more depth to the gameplay. Also totally agree that the detailed house deserves and should draw more player time due to it’s dense design. It’s an aspect I totally overlooked.
Fog is also introduced, more prominent at night. But maybe due to the small world design, its occlusion effect is not really felt – might be worth revisiting.
Designing a world with intention in game balance is truly a great takeaway. Definitely some ideas here I’d love to experiment with in future updates. Appreciate the thoughtful feedback!
~ Amira
1 Like
Truly so many great insights and resources. çok teşekkür ederim!
I’ve taken care to include the appropriate license, thank you for pointing me to a clear licensing guide, it truly helped.
I agree that focusing on the character can make a bigger difference to the scene, so I’ve put a higher priority on this feature in the next update. Modelling a character in 3D with it’s own animation has been in my wishlist for quiet some time too
Regarding the shader includes, I remember at some point getting unexpected colour results without them, but I’ll definitely revisit and see if they can be removed for optimisation. Thank you for going the extra mile to check my code as well, truly appreciate them a lot 
The stats and debug can be enabled via: Mistwood Cottage
The terrain was intentionally decimated in Blender to around 1,000 vertices for performance reasons, but you’re right — it does feel a bit wonky. I’ll experiment with adding more data points to smooth it out without hurting performance.
1 Like
