Fireplace in WebVR tutorial – Using Objects and Shaders in WebVR

Fireplace in VR – Using Shaders and Objects

To create our fireplace in virtual reality, we’ll divide our project into three sections.

1. Adding 360 photo
2. Adding fireplace object
3. Adding fire using ShaderMaterial

This is part of #DaysInVR series. View All VR Projects. Yesterday, we saw how to create solar system in VR. Today we’ll see how to create fireplace in VR. We’ll make use of shaders to create the fire and place it inside our fireplace object.

Adding 360 photo in WebVR

Adding 360 photo is pretty straight forward. We’ll use SphereGeometry and MeshBasicMaterial add 360 photo to our scene.

Adding object in WebVR

Now we have to add our fireplace object in the desired place. I used an object from tf3dm for this demo. I’m using JSONLoader to load the object in JSON format.

Using object.position we have to set the position of the fireplace object to where we need.

Adding ShaderMaterial in WebVR

We’ll add our fire to our fireplace now. The fire is created by using fire shader. We’ll use ShaderMaterial to create the material using the shader.

Then we position the fire in our desired position, by adjusting the x,y,z positions and add it to the scene.

Once the three components are added to the scene, you’ll be able to view a crackling fireplace in the scene you built.