Movie Theatre VR Tutorial – Using objects and PlaneGeometry


This is part of #DaysInVR series. View All VR Projects

Yesterday, we learnt how to view 360 videos in VR.

Movie Theatre Experience in WebVR

Demo | Source

Today, we’re going to learn how to show any video in theatre, all inside VR. Once complete, you’ll be able to play any video in a movie theatre using virtual reality.

Like all other projects, we’ll be using Three.js and WebVR to create our project.

This project has two main components.

  1. The movie theatre object
  2. Video screen

Creating movie theatre object

The way this works is by keeping a video object inside a room object. I used Blender to create the object. There are plenty of tutorials online that teaches you to use Blender. One of the tutorial that helped is this one.

You can create your model in Blender however you like. I created a basic theatre model. You can even try to add some chairs for a more realistic feel. Make sure the material that you made has diffuse property more than 0, otherwise, the material will not reflect light when we import it in Three.js.

Once the model is ready, export it in obj format. You should have .obj.mtl and an image file for the textures in your export folder. We’ll load this in Three.js to setup the movie theatre.

Loading object in Three.js and watching video

Now that we have our object ready, we have to view them in Three.js. We’ll use OBJLoader and MTLLoader to load our object and material.

I’ve not included the video in the source due to the size, but you can pretty much download any video. Be sure to update the videoElement.src to the video file and it should be good to go.

We’re using PlaneGeometry as our video screen. We load the video on a canvas and then use the canvas the texture for the PlaneGeometry.

We have to position the movie screen at the wall of the room object. This is done by setting the position of the PlaneGeometry.

We also have to make sure that the camera is placed infront of the screen.

You can read the full source to understand more about how this is done.

Make your own VR theatre

Download blender and make your own version of VR movie theatre. Follow the tutorial and build your custom VR theatre. Don’t forget to share your creation with us.

If you like this tutorial, don’t forget to subscribe to get all updates.

Leave a Reply

Send Lesson #1
Join over 100s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
close-link
Add Me To VIP