Это HTML5 тег с видео, которое будет проигрываться в нашем объекте.
if(!Detector.webgl) Detector.addGetWebGLMessage();
var container;
var camera, scene, renderer;
var video, texture, material, mesh;
var composer;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
Здесь определили необходимые переменные для работы сцены.
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 500;
Здесь создается камера из которой мы будем наблюдать за 3D миром. Стоит обратить внимание, что угол обзора камеры 40 градусов, а её удаление от "центра 3D мира" 500 единиц по оси Z.
scene = new THREE.Scene();
В переменной scene сохраняем объект сцены - в нем будет происходить отрисовка мира.
Создание объекта для рендера и установка его свойств и размеров. Стоит обратить внимание на свойство antialias, которое должно сглаживать края объектов.
video = document.getElementById('video');
texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
На основе HTML5 тега <video> создается материал (текстура) для будущего объекта с необходимыми свойствами (их минимальный набор).
var geometry;
var parameters = {color: 0xffffff, map: texture};
geometry = new THREE.BoxGeometry(480, 204, 0.01);
material = new THREE.MeshBasicMaterial(parameters);
material.hue = 0;
material.saturation = 0;
Здесь создается объект геометрии с материалом видео-записью. Также к материалу необходимо задать свойства hue и saturation. На сколько я понял, ноль - это нейтральное положение для них. Что по умолчанию - не знаю, но если не установить эти свойства, объект мы не увидим. Еще одна важная вещь - тип установки материала MeshBasicMaterial - он не учитывает внешнее освещение, то есть, если задать источник света, то на этом материале мы не увидим эффектов типа specular и т.п. Но и если не задавать источников света объект не будет черным.
На основе созданных ранее объектов создается форма объекта, указывается размещение в пространстве xyz, а также масштаб 0.6. И добавление объекта на сцену.
Этой строкой задается функция, вращающая сцену, при перемещении курсора мыши.
// postprocessing
var renderModel = new THREE.RenderPass( scene, camera );
var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
effectCopy.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectCopy );
На мой взгляд, самая сложная часть кода в плане понимания. Как я мог догадаться, этот код забирает видео-поток из <video> и транслирует его в материал.
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».