Работа с видео

Ниже будет расписан пайплайн добавления видеофайла в продвинутый редакатор.

Создание сценария

Первым делом, нужно добавить новый скрипт.

Далее, нужно перейти в режим редактирования кода, нажав на Edit.

Работа с кодом

Сначала нужно создать новый HTML-элемент video (строка 1).

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

Далее, нужно создать текстуру из элемента videoElem, это делается с помощью THREE.VideoTexture (строка 2).

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

Теперь нужно добавить на сцену плоскость, на которую и будет добавляться видео (строки 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 })
);

В данном случае создается плоскость videoPlane, с высотой 2 и шириной 1, а в качестве материала используется созданная ранее видеотекстура videoTexture.

После создания плоскости с видеотекстурой, можно добавлять ее на сцену (строка 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 );

В случае, если данный скрипт привязан к сцене, то добавление объекта на сцену будет записываться не как scene.add(), а как this.add(). Это нужно для правильной работы импорта сцены в простой редактор.

Теперь нужно настроить добавленную плоскость videoPlane.

Первым делом нужно добавить источник. Лучше всего, если это будет CDN, либо облако, поддерживающее Access-Control-Allow-Origin (строка 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";

Далее, очень важный пункт. Нужно добавить следующую строчку videoElem.src = "https://365508.selcdn.ru/examples/small.mp4"; (строка 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";

Если этого не сделать, при запуске сцены видео не появится,а в консоли будет следующая ошибка:

Это связано с работой HTML-аттрибутом crossorigin. Подробнее об этом читайте здесь.

Последние шаги заключаются в включении/отключении зацикленности видео и присутствия звука (строки 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;

И, что самое важное, нужно запустить воспроизведение видеофайла (строка 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();

Таким образом можно добавлять любое видео на сцену.

Так же, ниже приложен JSON-файл с данным проектом, чтобы вы могли попробовать запустить и посмотреть на то, как он работает.

1KB

createVideoElem.json

Open