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.

Get all updates
We respect your privacy.

Follow me

Rison

Building Viewport to help developers to build VR apps easily.
Follow me

Latest posts by Rison (see all)

Leave a Reply