/VRRoom-CS4331

A Web-Based VR House with interactive elements using HTML and A-Frame.

Primary LanguageHTML

The Penthouse (CS 4331)

For this project I created a web-based VR Penthouse that you can walk through via a simple github URL on your computer or smartphone. This was created for a Texas Tech University class on Virtual Reality. You can play the live demo at https://dauntlessdash.github.io/VRRoom-CS4331/.

Click the image below to watch a short video demo.

ScreenShot

VR Penthouse Features

The following screenshots highlight some of the different elements in the VR Penthouse.

The main feature of the Penthouse that stands out is that you see central park outside of two of the windows. This is achieved by having a flat plane with the image of central park suspended a distance outside the window. Also in this area is two red leather sofas, a modern glass coffee table, and in the background you can see a shelf in the kitchen. In addition you can also see the 'Call Uber' button, whose functionality will be explained further down.

Alt text

This kitchen area features the second window, a table with four chairs, a refrigerator, counter tops, and an oven.

Alt text

This area has some of the barstools in it as well as the lighting controls. The lighting can be changed inside the penthouse by clicking on the different corresponding light-level buttons.

Alt text

The following photo gives a sample of the different light levels: Low, Medium, and High.

Alt text

Through a door is the main bed with a nightstand and lamp.

Alt text

Outside of the door is a framed New York photo and my dog, Beau. He is permanently spinning and might get dizzy.

Alt text

Here there is two more L-shaped couches, a glass coffee table, and the main TV of the house.

Alt text

Finally, there is a glass front door, a New York city themed canvas, and a dresser nearby.

Alt text

In addition to normal static decorations I also included a TV remote which can be clicked in order to turn on the TV. When the TV is turned on the title screen from 'House of Cards' will fade in.

Alt text

I also added a simple button on the wall labeled 'Call Uber'. When pressed, this button will cause a helicopter to fly across the windows in front of the red couches and then land in front of the window outside the kitchen. This is achieved by having two different helicopter models and using scaling and rotating of the model to make it appear that the helicopter is flying off in the distance.

Alt text

3D Models (21 Models Total)

Textures