NBG Glassnevin is a Vue and Three.js web coding project.
Created as part of Trinity College Interactive Digital Media Masters Degree.
Collaborated with James Young, Yang Yang and Veda Duhan - 2024
Check out the website in the link below! (Simple Model Version)
The link of the Github to this project can be accessed below:
The NBG Web project was a project that my team did for our Trinity College Assignment. The assignment was to create a
website about a specific building or buildings for a specific audience.
Early on the project, the team has a shared liking towards plants. This led us to visit the Glassnevin Botanical Garden
and cement the building as our building of choice for the project.
For the assignment, there are many factors being considered, a few important ones include:
1. Target Audience.
2. Accessibility both for Disability and Hardwares.
Through our research, we concluded that botanical gardens are a great learning and entertainment source for millennials.
Providing a convenient all in one website to help their visit may urge more visitors to the garden and also increase the
horticulture business.
Using the personas, existing literature (including analysis of Kew Garden London’s application), we concluded that we
needed a few features, including but not limited to:
1. Interactive Map.
2. Social Media Integration – Due to time constraints, not implemented.
3. Plant Information
4. Smooth and Responsive
The following requirement led me, as the main programmer to use the following libraries:
1. Node.js
2. VueJS – VueRouter – For smooth and responsive web.
3. Three.js – For interactive map.
To make use of the limited time we have working on this project, we as a team did the following pipeline:
1. One member worked on the 3D Model
2. 2 members worked on the HTML CSS
3. I continue to work on the Vue and Three.js
4. At the end, I will combine the 3D model and all off the HTML CSS together
There are a few issues I encountered and found solutions to:
1. Vue-Router not linking properly – This is solved by using createWebHashHistory.
2. Three.js Script continues to go and hangs lower end hardware – Only render Three when IntersectionObserverAPI sees the model container.
3. Model is too large – Have two versions, large model version and extremely light version for Github.
Accessibility was also a big part of the project; the following are some considerations we did for accessibility:
1. The website and its features (except map) are “Tab-able”, you can navigate through the whole website without using the mouse. (Hamburger menus and Filters work with Tabs)
2. The website uses high contrast colors to ease users with color blindness.
3. The website is still relatively useable despite being zoomed in.
4. The website works with mobile phones and has responsive design.