Timelines, Time and 3D (Three.js)

Exploring the creation of timelines through any medium — screen, book, poster etc. Eventually leading to my exploration of VR, WebGL and the Three.js javascript library.

Powers of Ten was created by Charles and Ray Eames in 1977. They used a 4:3 screen which during then was the normal size of a screen as a framing device for their “Timeline”. For their video, they used a Logarithmic scale going up by powers of 10.

Inspiration & Research

I initially wanted to explore VR technology so I looked at the origins of it and reports and the predicted implications it may have for the future. Looking at the different VR technologies that came about and learning about the early attempts at VR in the 90s. After presenting my project to my peers I changed my approach instead of doing it based on the history of VR. Instead, it would explore VR’s impact on modern-day and the concepts of virtual reality based on my prior research.

Chernobyl VR Project — A immersive tour of the Chernobyl site developed by Farm51

Ideation

I then went on to explore methods of presenting this timeline — initially I wanted to create the project using VR technology but at the time as I was getting familiar with code, it was suggested why don’t I use 3D space for my timeline. I looked at exploring 3D-based platforms for the web in particular looking at WebGL and three.js and repurposing the content to click through 3D space.

Original Concept of a simple web layout timeline

Sketches and Wireframes

Iteration

After researching three.js and exploring examples I set about working out how to use three.js for my project. I was pointed towards using the three.js editor for setting up the content. I set up a server hosting application to create a server so I can test and develop it locally.

three.js editor

When exporting content from the editor I found that all the content was contained within itself the file and was difficult to find the exact content we wanted in the big json file. I created a separate app.js to have its own section to pull code from the main javascript file. My main goal was to work out how to create a simple mouse-over effect when if I hovered over a specific sphere the content next to it would appear. The example above is if I hovered over the sphere closest to the doughnut — the doughnut that was hidden would appear.

Code workings out — how to use the mouse as a curser to reveal an object.

Takeaway and Reflection

Unfortunately, I ran out of time to finalise the project and add the text content as the testing on working how to use three.js and learn javascript and code, in general, took up the last remaining time.

However, although I hadn’t finished I felt like I had learnt a lot from this project and developed a better understanding of javascript which I could use to improve and develop later on. Furthermore, now that I understand a little bit more about code and javascript I feel like I could better allocate my time better and start the implementation sooner of my ideas.

Three.js Mouse Over Detection Prototype.