Interactive Report – a three.js experiment

Over the summer of 2018, I’ve completed my dissertation – Public Transportation and Well-Being in London, an investigation about how our commute on public transport could affect our well-being on a daily basis.

After reading a great deal about urban loneliness, subjective psychological well-being and history of urban planning, I examined the information with data collected from my 3-weeks visual travel diary and street interview.

I wondered, “can I transform and crunch the thousands of words of information into an easy interactive report for people to understand”? To answer this, I started to play with three.js – a coding language I’ve been wanted to explore for long time.

Fascinated by the idea that I can code web-based interactive visuals (and the likes of https://dddance.party/ andhttps://www.travisscott.com/) , I guess I could rig a 3D character and use it to visualize how we interact with different elements in our commute.

For start, I think it could just be a simple website with 4 buttons – time (morning and night commute), intensity of light (sunlight or dark), temperature (warm and cold) and a home button.

In the following weeks, I’ve been watching all sorts of Youtube tutorials and three.js documentation to see how can I achieve something as similar as possible.

First, I reckon I’ll need a 3D model. From there, I learnt how to draw and rig a new bloke with Blender. I have to say that my knowledge from Cinema 4D does not help. :s

After another week of trying, the model is still corrupted when I try embed it to the website. I moved on to rig models that are readily available and it turns out to be pretty fun and saves more time.

Then, with few more weeks of adjusting the lights and positioning of the model with three.js, the basic structure is here!