ReactJS + WebVR = 3D Portfolio

A principle part of my ITP residency is to create the ITP 2020 Thesis Archive.

Each year, we make a unique website to show all the students’ beautiful thesis projects.

What would we make this year? I had an idea. Why not make a VR one? If that’s not feasible, a 3D one?

The first thing I need to know is that if the performance of web VR is acceptable. Then I see that I need to prototype one quickly so that I can provide more information to my teammate at our next meeting.

I had almost 0 web VR experience. So I started by looking for examples. I found a webVR framework called A-Frame. After I took a look at their Github, I saw a showcase called curved-mockups.

This is what I need to start. By reading their documentation, I found that they are an Entity-Component-System, just like unity. And each entity is wrapped into an HTML tag, which means I can construct them using JSX. What a game-changer! At that moment, I know that my prototype will be finished in 2 days.

Then I finished it


Source Code


Mockup data

I want to use real data so my team can have good judgment about whether it’s suitable for our Thesis Archive. With some effort, I got a JSON from last year’s Thesis data, but I still need to clean it. I had to write some script to do the job.

Custom A-Frame Components

When the user clicks a project, I need to know which one is clicked. In HTML, we just say onclick = {}, however, that’s not the case in A-Frame. I had to make this custom component from scratch. It was frustrating, and I have to read lots of references. When it works, I was so rewarded.

Another problem was that when the project runs on a phone, the screen moves like a real VR head tracker. Though this is a 3D project, I realize a good user experience requires a slower movement, which could only be done by modifying the library’s core component. Luckily, with the knowledge I for from writing my custom component, I did it!.

That’s it.

It’s so easy to prototyping nowadays. Back eight years ago, I would need to working on Photoshop and Axure for a week to get an OK-level prototype.

Today I just write a story of how I spent my last weekend: no tech part and tutorial. If you happen to seek help with making a project like this, feel free to email me.

Leave a Reply

Your email address will not be published. Required fields are marked *