net - UK (2020-03)

PROJECTS
three.js

Here are a handful resources to get you up and running

quickly, as you start to add WebGL and video textures to

your projects.

Three.js examples

https://threejs.org/examples

Three.js has plenty of great starter examples, including some

specifically for video textures. Well worth a look to learn even

more techniques.

Three.js Online Docs – Video Textures

https://threejs.org/docs/#api/en/textures/VideoTexture

The online docs are an invaluable resource for understanding

the code we used in this tutorial in greater depth. I’ve specifically

shared the link to the section on video textures here, so you can

dive into extra features if you need them.

Mobfish – How to Create 360-Degree Videos

https://mobfish.net/blog/create-360-degree-videos

If you’re looking to create some of your own 360-degree video

content to use in your WbGL projects, Mobfish has a guide with

some tips and tricks that’s worth checking out.

Pond 5 – video assets

https://www.pond5.com/

Whenever you need free or paid video resources for a project,

Pond 5 has a wide range of quality videos to check out. It has loads

of both standard and 360-degree videos.

LEARN ABOUT TEXTURES

RESOURCES

playing it when a user clicks on a button or interacts

with your site in some way.

video = document.getElementById( ‘video’ );

video.play();

STEP 15: CREATE A VIDEO TEXTURE

The next stage is for you to create a VideoTexture. This

class provides a special texture that will update

every render frame, which enables video frames to

be copied to the material each frame. This results

in seamless video playback. Use the following code

to create a video texture. Notice we apply the video

texture using the map property of the material. Try

out your scene now and you’ll see the video playing

on a plane! You can even click and drag it around to

see it from any angle.

texture = new THREE.VideoTexture( video );

mat = new THREE.MeshBasicMaterial({map:texture});

STEP 16: LOAD A GROUND TEXTURE

To add a little more interest to the scene, you can

create a ground texture or add other 3D elements.

Use the following code to load and create a texture

for the ground:

var texture = new THREE.TextureLoader().load(“assets/

stone.jpg”);

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

texture.repeat.set (12,12);

material = new THREE.MeshPhysicalMaterial({map:texture

,bumpMap:texture});

STEP 17: CREATE A GROUND PLANE

Next up is for you to create a mesh for the ground

using a plane and the material that you’ve just

created. Then you can add it to the scene. We rotate

the plane so it lies flat and is oriented low, so it’s

below our video.

var geometry = new THREE.PlaneBufferGeometry(

6000,6000 );

var ground = new THREE.Mesh( geometry, material );

ground.rotation.x = Math.PI/180 * -90;

ground.position.y=-200.0;

scene.add(ground);

STEP 18: ADJUST VIDEO MATERIAL

The video material works just like an image source,

once you’ve loaded the video texture. You can set

opacity, colour, material types like physical or

phong and all the other adjustments you might

normally make. Try out the following code to make

the video translucent: