Raycasting in WebVR – Using Threejs to select objects using raycasting

This is part of #DaysInVR series. View All VR Projects. Yesterday, we learnt how to create glitch effect in WebVR. Today, we’ll see how to use raycasting in WebVR to select objects.

Demo | Source

Raycasting in WebVR

In this tutorial, we’ll be using raycasting in WebVR to select objects. We’ll make use of THREE.Raycaster for this.

Adding objects in WebVR

We’ll be using the same objects from our shopping in VR tutorial for our scene. We’ll use OBJLoader and MTLLoader to load the objects to the scene. We’ll then use TextGeometry and FontLoader to add text to our scene.

Adding Raycasting in WebVR

For the raycaster, we’ll provide it with list of objects that it can intersect with. We’ll use ArrowHelper  to visualize the ray from the camera.

Inside the animate function, we’ll add the following.

If the user points the ray over the text, the object will start rotating. Once the ray moves away from the text, we remove the effect.

Its your turn

Try adding more objects to the scene and interact with them using raytracing in WebVR. Don’t forget to share your experiences in the comments below.

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
Add Me To VIP