Как создать виртуальную реальность в Интернете сегодня

Виртуальная реальность будет стоить до 7 миллиардов долларов к 2020 году . В это время сеть определенно не будет оставаться исключительно 2D средой. На самом деле уже есть несколько простых способов перенести виртуальную реальность в браузер. С ней также невероятно весело работать!

Чтобы начать свое приключение в виртуальной сети, есть три возможных способа сделать это:

• JavaScript, Three.js и Ориентация на устройство просмотра
• JavaScript, Three.js и WebVR (Мой новый предпочтительный метод!)
• CSS и WebVR (все еще очень рано)

Я перейду к каждому и покажу краткое описание того, как каждый из них работает.

JavaScript, Three.js и Ориентация на устройство просмотра

Один из способов работы большинства проектов виртуальной реальности на основе браузера — через событие браузера deviceorientation . Это сообщает браузеру, как устройство ориентировано, и позволяет браузеру подобрать устройство, если оно было повернуто или наклонено. Эта функция в перспективе VR позволяет вам определять, когда кто-то смотрит вокруг, и настраивать камеру, чтобы она следила за ним.

Чтобы создать замечательную 3D-сцену в браузере, мы используем JavaScript-инфраструктуру three.js , которая позволяет легко создавать 3D-фигуры и сцены. Это берет большую часть сложности из создания трехмерного опыта и позволяет вам сосредоточиться на том, что вы пытаетесь собрать в вашей сцене.

Я написал две демонстрации здесь в SitePoint, которые используют метод Device Orientation:

• Внедрение виртуальной реальности в Интернет с помощью Google Cardboard и Three.js
• Визуализация потока Twitter в VR с Three.js и Node

Если вы новичок в three.js и знаете, как собрать сцену, я бы посоветовал взглянуть на две вышеупомянутые статьи для более глубокого знакомства с этим методом. Я расскажу о ключевых понятиях здесь, однако это будет на более высоком уровне.

Ключевые компоненты каждого из них включают в себя следующие файлы JavaScript (вы можете получить эти файлы из демонстрационных примеров выше, а также найти их в загруженных примерах three.js ):

• three.min.js — наш фреймворк three.js
• DeviceOrientationControls.js — это плагин three.js, который обеспечивает ориентацию устройства, которую мы обсуждали выше. Он двигает нашу камеру, чтобы встретить движения нашего устройства.
• OrbitControls.js — это резервный контроллер, который позволяет пользователю перемещать камеру с помощью мыши, если у нас нет устройства, которое имеет доступ к событию Ориентация устройства.
• StereoEffect.js — эффект Three.js, который разделяет экран на стереоскопическое изображение, слегка наклоненное для каждого глаза, как в VR. Это создает реальный разделенный экран виртуальной реальности без необходимости делать что-то сложное.

Ориентация устройства

Код для включения элементов управления Ориентация устройства выглядит так:

 function setOrientationControls(e) { if (!e.alpha) { return; } controls = new THREE.DeviceOrientationControls(camera, true); controls.connect(); controls.update(); element.addEventListener('click', fullscreen, false); window.removeEventListener('deviceorientation', setOrientationControls, true); } window.addEventListener('deviceorientation', setOrientationControls, true); function fullscreen() { if (container.requestFullscreen) { container.requestFullscreen(); } else if (container.msRequestFullscreen) { container.msRequestFullscreen(); } else if (container.mozRequestFullScreen) { container.mozRequestFullScreen(); } else if (container.webkitRequestFullscreen) { container.webkitRequestFullscreen(); } } 

Прослушиватель событий DeviceOrientation предоставляет значение альфа, бета и гамма при наличии совместимого устройства. Если у нас нет никакого альфа-значения, оно не меняет наши элементы управления, чтобы использовать Ориентацию устройства, поэтому мы можем вместо этого использовать элементы управления орбитой.

Если он имеет это альфа-значение, то мы создаем элемент управления Ориентация устройства и предоставляем его нашей переменной camera для управления. Мы также установили его, чтобы установить нашу сцену в полноэкранный режим, если пользователь нажимает на экран (мы не хотим смотреть в адресную строку браузера, когда в VR).

Управление орбитой

Если это альфа-значение отсутствует, и у нас нет доступа к событию Device Orientation, этот метод вместо этого предоставляет элемент управления для перемещения камеры, перетаскивая ее мышью. Это выглядит так:

 controls = new THREE.OrbitControls(camera, element); controls.target.set( camera.position.x, camera.position.y, camera.position.z ); controls.noPan = true; controls.noZoom = true; 

Основными вещами, которые могут сбить с толку из приведенного выше кода, являются noPan и noZoom . По сути, мы не хотим физически перемещаться по сцене с помощью мыши, и мы не хотим иметь возможность увеличивать или уменьшать масштаб — мы только хотим смотреть вокруг.

Стерео эффект

Чтобы использовать стереоэффект, мы определяем его так:

 effect = new THREE.StereoEffect(renderer); 

 effect.setSize(width, height); 

 effect.render(scene, camera); 

 navigator.getVRDevices 

 controls = new THREE.VRControls(camera); 

 effect = new THREE.VREffect(renderer); effect.setSize(window.innerWidth, window.innerHeight); 

 manager = new WebVRManager(renderer, effect, {hideButton: false}); 

 function update(timestamp) { controls.update(); manager.render(scene, camera, timestamp); } 

 #css-square { position: absolute; top: 0; left: 0; transform-style: preserve-3d; transform: translate(100px, 100px, 100px); width: 250px; height: 250px; background: blue; }