Working With Video

The pipeline for adding a video file to the advanced editor will be described below.

Creating a script

First of all, you need to add a new script.

Next, you need to enter the code editing mode by clicking Edit.

Working with code

First you need to create a new HTML-element video (string 1).

let videoElem = document.createElement('video');

Next, we need to create a texture from the videoElem element, this is done using THREE.VideoTexture (string 2).

let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);

Now you need to add a plane to the scene, on which the video will be added (strings 3-6).

let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);
let videoPlane = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 1),
    new THREE.MeshBasicMaterial({ map: videoTexture })
);

In this case, videoPlane is created, with a height of 2 and a width of 1, and the videoTexture, created earlier, is used as the material.

After creating a plane with video texture, you can add it to the scene (string 7).

let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);
let videoPlane = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 1),
    new THREE.MeshBasicMaterial({ map: videoTexture })
);
scene.add( videoPlane );

If this script is linked to the scene, then adding an object to the scene will be recorded not as scene.add(), but as this.add().This is necessary for the correct importing of a scene into a simple editor.

Now we need to configure the added videoPlane.

The first step is to add a source. Best of all, if it is a CDN or a cloud that supports Access-Control-Allow-Origin (string 8).

let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);
let videoPlane = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 1),
    new THREE.MeshBasicMaterial({ map: videoTexture })
);
this.add( videoPlane );
videoElem.src = "https://365508.selcdn.ru/examples/small.mp4";

Next, a very important moment. You need to add the following string videoElem.src = "https://365508.selcdn.ru/examples/small.mp4"; (string 9):

let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);
let videoPlane = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 1),
    new THREE.MeshBasicMaterial({ map: videoTexture })
);
scene.add( videoPlane );
videoElem.src = "https://365508.selcdn.ru/examples/small.mp4";
videoElem.crossOrigin = "anonymous";

If this is not done, the video will not appear when starting the scene, and the following error will return in the console:

This is related with the work of an HTML-attribute crossorigin. Read more about this here.

The final steps are to enable/disable video looping and audio presence (strings 10-11).

let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);
let videoPlane = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 1),
    new THREE.MeshBasicMaterial({ map: videoTexture })
);
scene.add( videoPlane );
videoElem.src = "https://365508.selcdn.ru/examples/small.mp4";
videoElem.crossOrigin = "anonymous";
videoElem.loop = false;
videoElem.muted = false;

And, most importantly, you need to start playing the video file (string 12).

let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);
let videoPlane = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 1),
    new THREE.MeshBasicMaterial({ map: videoTexture })
);
scene.add( videoPlane );
videoElem.src = "https://365508.selcdn.ru/examples/small.mp4";
videoElem.crossOrigin = "anonymous";
videoElem.loop = false;
videoElem.muted = false;
videoElem.play();

This way, any video can be added to the scene.