Public Speaking VR Tutorial With Teleprompter

Public Speaking VR

To create simple public speaking experience is easy. It just requires a 360 video. We’re going to make it better by adding a teleprompter to our scene. That way we can practice our speech properly.

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

Yesterday, we learnt how to create VR image gallery with lighting effects.

Join 6000+ Students

Upgrade your programming skills to include Virtual Reality. A premium step-by-step training course to get you building real world Virtual Reality apps and website components. You’ll have access to 40+ WebVR & Unity lessons along with their source code.

Start Learning Now

150$ for all 3 courses (SAVE 70%)

Adding 360 Video

You can refer the 360 video tutorial to learn how to create 360 videos viewer.

The basic idea is to create SphereGeometry with MeshBasicMaterial, with video as the texture.


var videoElement = document.createElement('video');
videoElement.src = '/common/public.mp4';
videoElement.load();
videoElement.crossOrigin = 'anonymous';
videoElement.setAttribute('webkit-playsinline', 'true');
videoElement.setAttribute('playsinline', 'true');

var videoTexture = new THREE.Texture(videoElement);

var videoElement = document.createElement('video');

videoElement.src = '/common/public.mp4';

videoElement.load();

videoElement.crossOrigin = 'anonymous';

videoElement.setAttribute('webkit-playsinline', 'true');

videoElement.setAttribute('playsinline', 'true');

var videoTexture = new THREE.Texture(videoElement);

Adding teleprompter in VR

We’re going to use PlaneGeometry with a Canvas as texture. We’ll animate our text on the canvas so that it acts like a teleprompter.


var planeGeometry = new THREE.PlaneGeometry(1, 1);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var planeGeometry = new THREE.PlaneGeometry(1, 1);

var canvas = document.createElement('canvas');

var context = canvas.getContext('2d');

To fit the text into our canvas, we use canvas.measureText.


function wrapText(x, y) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.translate(x, y);
  var words = text.split(' ');
  var line = '';

  for(var n = 0; n < words.length; n++) {
    var testLine = line + words[n] + ' ';
    var metrics = context.measureText(testLine);
    var testWidth = metrics.width;
    if (testWidth > maxWidth && n > 0) {
      context.fillText(line, x, y);
      line = words[n] + ' ';
      y += lineHeight;
    }
    else {
      line = testLine;
    }
  }
  context.fillText(line, x, y);
  context.setTransform(1, 0, 0, 1, 0, 0);
}

function wrapText(x, y) {

context.clearRect(0, 0, canvas.width, canvas.height);

context.translate(x, y);

var words = text.split(' ');

var line = '';

for(var n = 0; n < words.length; n++) {

var testLine = line + words[n] + ' ';

var metrics = context.measureText(testLine);

var testWidth = metrics.width;

if (testWidth > maxWidth && n > 0) {

context.fillText(line, x, y);

line = words[n] + ' ';

y += lineHeight;

}

else {

line = testLine;

}

context.fillText(line, x, y);

context.setTransform(1, 0, 0, 1, 0, 0);

}

To move the text like a teleprompter, we’re going to use context.translate. You have to use the following inside the animate function.


textTexture.needsUpdate = true;
wrapText(0, pos);
pos -= 0.1;

textTexture.needsUpdate = true;

wrapText(0, pos);

pos -= 0.1;

Note that you shouldn’t forget to include texture.needsUpdate = true inside your animate function. Without that, the text won’t move.

Once the whole thing is done, you’ll be able to see your text with the 360 video. You can change your text to anything and practice public speaking in virtual reality.

Download Source Code

Kickstart VR development by downloading source code for this project. You’ll have instant access to source code and asset files. You can use them in your personal or commercial projects.

Download Source Code

Get instant access for $39

Public Speaking VR Tutorial With Teleprompter