Movie Theatre VR Tutorial – Using objects and PlaneGeometry
Movie Theatre Experience in WebVR
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.
This is part of #DaysInVR series. View All VR Projects
Yesterday, we learnt how to view 360 videos in VR.
Join 6000+ Students
Upgrade your programming skills to include Virtual Reality. A premium step-by-step training course to get you building real world Virtual Reality apps and website components. You’ll have access to 40+ WebVR & Unity lessons along with their source code.
Start Learning Now
Get your Free Lesson now.
Like all other projects, we’ll be using Three.js and WebVR to create our project.
This project has two main components.
- The movie theatre object
- 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var mtlLoader = new THREE.MTLLoader(); mtlLoader.setPath('/projects/day3/'); mtlLoader.setTexturePath('/projects/day3/'); mtlLoader.load('theatre.mtl', function(materials) { materials.preload(); var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); objLoader.setPath('/projects/day3/'); objLoader.load('theatre.obj', function(object) { // object.position.y = -95; scene.add(object); }); videoElement.src = '/common/patagonia.mp4'; videoElement.crossOrigin = 'anonymous'; videoElement.setAttribute('webkit-playsinline', 'true'); videoElement.setAttribute('playsinline', 'true'); videoElement.load(); var videoMaterial = new THREE.MeshBasicMaterial({ map: videoTexture, side: THREE.DoubleSide }); var videoGeometry = new THREE.PlaneGeometry(13.738, 7.728); var videoScreen = new THREE.Mesh(videoGeometry, videoMaterial); videoScreen.position.set(0, 1, -15.8); camera.position.set(0, 0, 0); camera.lookAt(videoScreen.position); scene.add(videoScreen); }); |
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.
|
1 2 3 4 5 6 7 8 9 |
var videoElement = document.createElement('video'); var videoTexture = new THREE.Texture(videoElement); var videoImage = document.createElement('canvas'); var videoImageContext = videoImage.getContext('2d'); videoImageContext.fillStyle = '#000000'; videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height ); |
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.
Download Source Code
Kickstart VR development by downloading source code for this project. You’ll have instant access to source code and asset files. You can use them in your personal or commercial projects.
Download Source Code
Get your Free Lesson now.
Leave a Reply