top of page

Garden Planner

June 2021 - October 2021
A web-based garden planning tool designed with accessibility and ease of use as a key focus
Skills used: JavaScript (Three.js), HTML, 3D Modelling
Garden planner screenshot_edited.jpg

Project description

Garden Planner is a web-based 3D garden planning tool aimed at casual users who are not experienced in traditional complex planning tools. The 3D environment allows the user to truly visualise what the garden will look like, with features such as a first person camera and a dynamic lighting system.

For this project, I used Three.js, a JavaScript library for 3D graphics within a web browser. This was to make the tool more accessible, as users are less likely to download a standalone program for quick, simplistic planning. Three.js allows for lightweight simplicity where needed but also is capable of creating large-scale, complex projects, making it ideal for a rapid prototyping development environment.

After looking for a pack of 3D assets to use for the project, I found they were all either technically or stylistically incompatible or too expensive. For this reason, I decided to take my first step into 3D modelling since my undergraduate degree. I used Blockbench, a simplistic modelling tool, coincidentally made using Three.js, to create all the 3D assets in the game with a unified, blocky aesthetic.


This was my first project using either JavaScript or HTML and taught me a lot, mostly through rapid experimentation. I found the Three.js library extremely useful and interesting, opening up a whole skill and side of development I hadn't explored before. After mainly focusing on development in Unity and C-based languages, I enjoyed JS and web development and employed these skills in future projects.


Further development

  • Refine the plane system

  • Refine the lighting system

  • Add more models 

bottom of page