VR Presentation Using d3js in WebVR

This is part of #DaysInVR series. View All VR Projects. Yesterday, we learnt how to create a world clock in VR using momentjs. Today, we’ll see how to create VR presentation in WebVR.

Demo | Source

In this tutorial, we’ll see how to create VR presentations using d3js and PlaneGeometry. We’ll can add charts using d3js and we’ll use PlaneGeometry to load slide images.

VR Presentation using d3js

We’ll first add a bar chart that we created using d3js. D3js reads the csv, and for each of the row, BoxGeometry is used to create the bar. The height of the column is based on the value from the csv file. yscale.ticks(5) creates the reference lines that you see on the back of the chart using LineBasicMaterial. The text is added to the chart using TextGeometry.

Adding images in WebVR

To add images, we’ll use PlaneGeometry and then load the images as texture.

You might have noticed that the mesh is added to sphere and not scene. We’ll be adding all the components to the sphere mesh.

Once we add everything to the sphere mesh, we’ll rotate the sphere every 3 seconds so that that viewer can see the slides without turning his head around all the time.

Refer to the full source to see how it all fits together.

Its your turn

Use a different geometry than the SphereGeometry. Load more slides into the scene and see what you can come up with. Don’t forget to share your experiences in the comments below.

Get all updates
We won't spam you

Follow me


TutorialsforVR is a platform for helping developers build applications in VR.
Follow me

Start the discussion at RealityPipe Community