Where’s waldo in WebVR tutorial

Where’s Waldo in VR

Today, we’re going to create Where’s Waldo in VR. We’ll hide waldo somewhere in our scene. We’ll have to look around to find him.

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

Yesterday, we saw how to create night sky in VR. Today we’re on to day 9 of 30 VR projects in 30 days.

Adding the panorama in VR

We’ll add a basic panorama to our scene. We’ll hide waldo in the pano. Adding the pano is similar to what we learnt from 360 photos in VR tutorial.

We’re using MeshPhongMaterial instead of MeshBasicMaterial because of the way it reacts to light.

If you try viewing the scene now, you won’t be able to see anything since there is no light in the scene yet. MeshPhongMaterial only works with a light in the scene.

Adding spotlight to the scene

We’ll use a spotlight to create a flashlight like effect so that only a small portion of the scene is visible.

Now we have a SpotLight and you should be seeing a small circle that is visible.

You can add an AmbientLight if you want to illuminate the entire scene.

Moving spotlight with camera

Now we have to move the spotlight in the direction we’re looking. To do this, we’ll create an object and keep the object in front of the camera. Then we’ll use the object's position to keep the spotlight in the same direction as the camera.

We have to add the following code to animate function, so that the direction of spotlight changes with the camera.

Its your turn

Create your version of where’s waldo. Create a different scene with waldo in a different position. Play around with spotlight options and see how you can increase or decrease the difficulty of the game.

Share your creations or ask any questions, if any, in the comments below.