Как построить модель виртуальной реальности с предварительным просмотром на разных устройствах в реальном времени

Опубликовано: 2022-03-10

Краткое резюме ↬ В этом уроке мы будем программировать трехмерные объекты и добавлять к этим объектам простые взаимодействия. Кроме того, вы можете научиться создавать простую систему передачи сообщений между клиентами и серверами.

Виртуальная реальность (VR) — это опыт, основанный на компьютерной среде; ряд различных VR-продуктов попадают в заголовки газет, а их применение широко распространено: на зимних Олимпийских играх команда США использовала виртуальную реальность для спортивных тренировок; хирурги экспериментируют с виртуальной реальностью для медицинского обучения; и чаще всего виртуальная реальность применяется в играх.

Мы сосредоточимся на последней категории приложений, особенно на приключенческих играх типа «укажи и щелкни» . Такие игры относятся к классу казуальных игр; цель состоит в том, чтобы указывать и нажимать на объекты на сцене, чтобы решить головоломку. В этом уроке мы создадим простую версию такой игры, но в виртуальной реальности. Это введение в трехмерное программирование и самостоятельное руководство по развертыванию модели виртуальной реальности в Интернете. Вы будете создавать с помощью webVR, фреймворка, который дает двойное преимущество — пользователи могут играть в вашу игру в виртуальной реальности, а пользователи без гарнитуры виртуальной реальности могут по-прежнему играть в вашу игру на телефоне или компьютере.

Разработка для виртуальной реальности

Сегодня любой разработчик может создавать контент для виртуальной реальности. Чтобы лучше понять разработку VR, может помочь демонстрационный проект. Читать статью по теме →

Во второй половине этого руководства вы создадите «зеркало» для своего рабочего стола. Это означает, что все движения, которые игрок делает на мобильном устройстве, будут отражены в предварительном просмотре на рабочем столе. Это позволяет вам видеть то, что видит игрок, давая указания, записывая игру или просто развлекая гостей.

Предпосылки

Для начала вам понадобится следующее. Для второй части этого руководства вам понадобится Mac OSX. Хотя код может применяться к любой платформе, приведенные ниже инструкции по установке зависимостей предназначены для Mac.

Доступ в Интернет, в частности, к сайту glitch.com;
Гарнитура виртуальной реальности (необязательно, рекомендуется). Я использую Google Cardboard, который предлагается по цене 15 долларов за штуку.

Еще после прыжка! Продолжить чтение ниже ↓

Шаг 1: Настройка модели виртуальной реальности (VR)

На этом этапе мы настроим веб-сайт с одной статической HTML-страницей. Это позволяет нам писать код с вашего рабочего стола и автоматически развертывать его в Интернете. Затем развернутый веб-сайт можно загрузить на мобильный телефон и поместить в гарнитуру виртуальной реальности. Кроме того, развернутый веб-сайт можно загрузить с помощью автономной гарнитуры виртуальной реальности. Начните с перехода на glitch.com. Потом,

Нажмите «Новый проект» в правом верхнем углу.
Нажмите «hello-express» в раскрывающемся списке.

Начните с перехода на glitch.com — (Большой превью)

Затем нажмите на views/index.html на левой боковой панели. Мы будем называть его вашим «редактором».

Следующим шагом будет щелчок на views/index.html на левой боковой панели, который будет называться вашим «редактором». — (Большой превью)

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

Вернувшись в редактор, замените текущий HTML следующим шаблоном для модели VR.

 <!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <!-- blue sky --> <a-sky color="#a3d0ed"></a-sky> <!-- camera with wasd and panning controls --> <a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0"></a-entity> <!-- brown ground --> <a-box shadow shadow="receive:true" color="#847452" width="10" height="0.1" depth="10"></a-box> <!-- start code here --> <!-- end code here --> </a-scene> </body> </html>

Навигация см. следующее.

Вернувшись к предварительному просмотру, вы увидите синий и коричневый фоновые цвета. — (Большой превью)

Чтобы просмотреть это на гарнитуре VR, используйте URL-адрес в омнибаре. На картинке выше URL-адрес https://point-and-click-vr-game.glitch.me/ . Теперь ваша рабочая среда настроена; не стесняйтесь поделиться этим URL с семьей и друзьями. На следующем шаге вы создадите модель виртуальной реальности.

Шаг 2: Постройте модель дерева

Теперь вы создадите дерево, используя примитивы из aframe.io. Это стандартные объекты, которые Aframe запрограммировала заранее для простоты использования. В частности, Aframe обращается к объектам как к сущностям . Есть три концепции, относящиеся ко всем сущностям, вокруг которых можно организовать наше обсуждение:

Геометрия и материал,
Оси Трансформации,
Относительные преобразования.

Во-первых, геометрия и материал — это два строительных блока всех трехмерных объектов в коде. Геометрия определяет «форму» — куб, сфера, пирамида и так далее. Материал определяет статические свойства формы, такие как цвет, отражательная способность, шероховатость.

Aframe упрощает для нас эту концепцию, определяя примитивы, такие как <a-box> , <a-sphere> , <a-cylinder> и многие другие, чтобы упростить спецификацию геометрии и ее материала. Начните с определения зеленой сферы. В строке 19 вашего кода, сразу после  добавьте следующее.

 <!-- start code here --> <a-sphere color="green" radius="0.5"></a-sphere> <!-- new line --> <!-- end code here -->

Во-вторых, есть три оси для преобразования нашего объекта. Ось x проходит горизонтально, где значения x увеличиваются при движении вправо. Ось y проходит вертикально, где значения y увеличиваются по мере продвижения вверх. Ось z выходит за пределы вашего экрана, где значения z увеличиваются по мере нашего движения к вам. Мы можем перемещать, вращать или масштабировать объекты по этим трем осям.

Например, чтобы перевести объект «правильно», мы увеличиваем его значение x. Чтобы вращать объект как волчок, мы вращаем его по оси Y. Измените строку 19, чтобы переместить сферу «вверх» — это означает, что вам нужно увеличить значение y сферы. Обратите внимание, что все преобразования указаны как <x> <y> <z> , что означает, что для увеличения значения y вам необходимо увеличить второе значение. По умолчанию все объекты располагаются в позиции 0, 0, 0. Добавьте указание position ниже.

 <!-- start code here --> <a-sphere color="green" radius="0.5" position="0 1 0"></a-sphere> <!-- edited line --> <!-- end code here -->

В-третьих, все преобразования относятся к его родителю. Чтобы добавить ствол к вашему дереву, добавьте цилиндр внутри сферы выше. Это гарантирует, что положение вашего ствола относительно положения сферы. По сути, это держит ваше дерево вместе как единое целое. Добавьте <a-cylinder> между тегами <a-sphere ...> и </a-sphere> .

 <a-sphere color="green" radius="0.5" position="0 1 0"> <a-cylinder color="#84651e" position="0 -0.9 0" radius="0.05"></a-cylinder> <!-- new line --> </a-sphere>

Чтобы сделать этот безлесный каркас, добавьте больше листвы в виде еще двух зеленых сфер.

 <a-sphere color="green" radius="0.5" position="0 0.75 0"> <a-cylinder color="#84651e" position="0 -0.9 0" radius="0.05"></a-cylinder> <a-sphere color="green" radius="0.35" position="0 0.5 0"></a-sphere> <!-- new line --> <a-sphere color="green" radius="0.2" position="0 0.8 0"></a-sphere> <!-- new line --> </a-sphere>

Вернитесь к предварительному просмотру, и вы увидите следующее дерево:

При переходе обратно к предварительному просмотру вы теперь сможете увидеть зеленое дерево, размещенное на вашем фоне. — (Большой превью)

Перезагрузите предварительный просмотр веб-сайта на гарнитуру виртуальной реальности и проверьте свое новое дерево. В следующем разделе мы сделаем это дерево интерактивным.

Шаг 3: Добавьте взаимодействие с кликом в модель

Чтобы сделать объект интерактивным, вам потребуется:

Добавьте анимацию,
Эта анимация срабатывает при нажатии.

Поскольку конечный пользователь использует гарнитуру виртуальной реальности, щелчок приравнивается к пристальному взгляду: другими словами, смотрите на объект, чтобы «щелкнуть» по нему. Чтобы осуществить эти изменения, вы начнете с курсора. Переопределите камеру, заменив строку 13 следующей.

 <a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0"> <a-entity cursor="fuse: true; fuseTimeout: 250" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat" scale="0.5 0.5 0.5" raycaster="far: 20; interval: 1000; objects: .clickable"> <!-- add animation here --> </a-entity> </a-entity>

Вышеупомянутый добавляет курсор, который может вызвать действие щелчка. Обратите внимание на objects: .clickable . Это означает, что все объекты с классом «кликабельные» будут запускать анимацию и получать команду «щелчок», где это необходимо. Вы также добавите анимацию к курсору щелчка, чтобы пользователи знали, когда курсор вызывает щелчок. Здесь курсор будет медленно сжиматься при наведении на интерактивный объект, привязываясь через секунду, чтобы обозначить, что объект был нажат. Замените комментарий  следующим кодом:

 <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="250"></a-animation>

Сдвиньте дерево вправо на 2 единицы и добавьте к дереву класс «кликабельный», изменив строку 29, чтобы она соответствовала следующей.

 <a-sphere color="green" radius="0.5" position="2 0.75 0" class="clickable">

Далее вы будете:

Укажите анимацию,
Запустите анимацию одним щелчком мыши.

Благодаря простому в использовании анимационному объекту Aframe оба шага могут быть выполнены в быстрой последовательности.

Добавьте <a-animation> в строку 33, сразу после <a-cylinder> , но до конца </a-sphere> .

 <a-animation begin="click" attribute="position" from="2 0.75 0" to="2.2 0.75 0" fill="both" direction="alternate" repeat="1"></a-animation>

Приведенные выше свойства определяют ряд конфигураций анимации. Анимация:

Запускается событием click
Изменяет position дерева
Стартует из исходного положения 2 0.75 0
Заканчивается на 2.2 0.75 0 (перемещение на 0,2 единицы вправо)
Анимация при путешествии к месту назначения и обратно
Чередует анимацию между путешествием к месту назначения и обратно
Повторяет эту анимацию один раз. Это означает, что объект анимируется в общей сложности дважды — один раз в место назначения и один раз обратно в исходное положение.

Наконец, перейдите к предварительному просмотру и перетащите курсор от курсора к дереву. Как только черный круг остановится на дереве, дерево будет двигаться вправо и назад.

Как только черный круг остановится на дереве, дерево будет двигаться вправо и назад. — Большой превью

На этом завершаются основы, необходимые для создания приключенческой игры типа «укажи и щелкни» в виртуальной реальности. Чтобы просмотреть и сыграть в более полную версию этой игры, посмотрите следующую короткую сцену. Миссия состоит в том, чтобы открыть ворота и спрятать дерево за воротами, нажимая на различные объекты на сцене.

Миссия состоит в том, чтобы открыть ворота и спрятать дерево за воротами, нажимая на различные объекты на сцене. — (Большой превью)

Затем мы настроили простой сервер nodeJS для обслуживания нашей статической демонстрации.

Шаг 4: Настройте сервер NodeJS

На этом этапе мы настроим базовый функциональный сервер nodeJS, который будет обслуживать вашу существующую модель виртуальной реальности. На левой боковой панели редактора выберите package.json .

Начните с удаления строк 2-4.

 "//1": "describes your app and its dependencies", "//2": "https://docs.npmjs.com/files/package.json", "//3": "updating this file will download and update your packages",

Измените имя на mirrorvr .

 { "name": "mirrorvr", // change me "version": "0.0.1", ...

В dependencies добавьте socket.io .

 "dependencies": { "express": "^4.16.3", "socketio": "^1.0.0", },

Обновите URL-адрес репозитория, чтобы он соответствовал вашему текущему сбою. Пример глитч-проекта называется point-and-click-vr-game . Замените это на название вашего глюк-проекта.

 "repository": { "url": "https://glitch.com/edit/#!/point-and-click-vr-game" },

Наконец, измените тег "glitch" на "vr" .

 "keywords": [ "node", "vr", // change me "express" ]

Дважды проверьте, что ваш package.json теперь соответствует следующему.

 { "name": "mirrorvr", "version": "0.0.1", "description": "Mirror virtual reality models", "main": "server.js", "scripts": { "start": "node server.js" }, "dependencies": { "express": "^4.16.3", "socketio": "^1.0.0" }, "engines": { "node": "8.x" }, "repository": { "url": "https://glitch.com/edit/#!/point-and-click-vr-game" }, "license": "MIT", "keywords": [ "node", "vr", "express" ] }

Дважды проверьте, что ваш код из предыдущих частей соответствует следующему в views/index.html .

 <!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <!-- blue sky --> <a-sky color="#a3d0ed"></a-sky> <!-- camera with wasd and panning controls --> <a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0"> <a-entity cursor="fuse: true; fuseTimeout: 250" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat" scale="0.5 0.5 0.5" raycaster="far: 20; interval: 1000; objects: .clickable"> <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="250"></a-animation> </a-entity> </a-entity> <!-- brown ground --> <a-box shadow shadow="receive:true" color="#847452" width="10" height="0.1" depth="10"></a-box> <!-- start code here --> <a-sphere color="green" radius="0.5" position="2 0.75 0" class="clickable"> <a-cylinder color="#84651e" position="0 -0.9 0" radius="0.05"></a-cylinder> <a-sphere color="green" radius="0.35" position="0 0.5 0"></a-sphere> <a-sphere color="green" radius="0.2" position="0 0.8 0"></a-sphere> <a-animation begin="click" attribute="position" from="2 0.75 0" to="2.2 0.75 0" fill="both" direction="alternate" repeat="1"></a-animation> </a-sphere> <!-- end code here --> </a-scene> </body> </html>

Измените существующий server.js .

Начните с импорта нескольких утилит NodeJS.

выражать
Это веб-фреймворк, который мы будем использовать для запуска сервера.
http
Это позволяет нам запускать демона, прослушивающего активность на различных портах.
socket.io
Реализация сокетов, которая позволяет нам общаться между клиентской и серверной сторонами практически в режиме реального времени.

При импорте этих утилит мы дополнительно инициализируем приложение ExpressJS. Обратите внимание, что первые две строки уже написаны для вас.

 var express = require('express'); var app = express(); /* start new code */ var http = require('http').Server(app); var io = require('socket.io')(http); /* end new code */ // we've started you off with Express,

Когда утилиты загружены, предоставленный сервер затем указывает серверу вернуть index.html в качестве домашней страницы. Обратите внимание, что ниже не написан новый код; это просто объяснение существующего исходного кода.

 // https://expressjs.com/en/starter/basic-routing.html app.get('/', function(request, response) { response.sendFile(__dirname + '/views/index.html'); });

Наконец, существующий исходный код указывает приложению выполнять привязку и прослушивание порта, который по умолчанию равен 3000, если не указано иное.

 // listen for requests :) var listener = app.listen(process.env.PORT, function() { console.log('Your app is listening on port ' + listener.address().port); });

Когда вы закончите редактирование, Glitch автоматически перезагрузит сервер. Нажмите «Показать» в левом верхнем углу, чтобы просмотреть ваше приложение.

Теперь ваше веб-приложение запущено и работает. Далее мы будем отправлять сообщения от клиента на сервер.

Шаг 5: Отправка информации с клиента на сервер

На этом этапе мы будем использовать клиент для инициализации соединения с сервером. Клиент дополнительно сообщит серверу, телефон это или десктоп. Для начала импортируйте файл Javascript, который скоро появится, в ваш views/index.html .

После строки 4 включите новый скрипт.

 <script src="/client.js" type="text/javascript"></script>

В строке 14 добавьте camera-listener в список свойств объекта камеры.

 <a-entity camera-listener camera look-controls...> ... </a-entity>

Затем перейдите к public/client.js на левой боковой панели. Удалите весь код Javascript в этом файле. Затем определите служебную функцию, которая проверяет, является ли клиент мобильным устройством.

 /** * Check if client is on mobile */ function mobilecheck() { var check = false; (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[aw])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); return check; };

Далее мы определим серию исходных сообщений для обмена со стороной сервера. Определите новый объект socket.io для представления подключения клиента к серверу. После подключения сокета запишите сообщение в консоль.

 var socket = io(); socket.on('connect', function() { console.log(' * Connection established'); });

Проверьте, является ли устройство мобильным, и отправьте соответствующую информацию на сервер с помощью функции emit .

 if (mobilecheck()) { socket.emit('newHost'); } else { socket.emit('newMirror'); }

На этом отправка сообщения клиента заканчивается. Теперь измените код сервера, чтобы получить это сообщение и отреагировать соответствующим образом. Откройте файл сервера server.js .

Обрабатывайте новые соединения и немедленно слушайте тип клиента. В конце файла добавьте следующее.

 /** * Handle socket interactions */ io.on('connection', function(socket) { socket.on('newMirror', function() { console.log(" * Participant registered as 'mirror'") }); socket.on('newHost', function() { console.log(" * Participant registered as 'host'"); }); });

Снова просмотрите приложение, нажав «Показать» в левом верхнем углу. Загрузите тот же URL-адрес на свое мобильное устройство. В вашем терминале вы увидите следующее.

 listening on *: 3000 * Participant registered as 'host' * Participant registered as 'mirror'

Это первая простая передача сообщений, когда наш клиент отправляет информацию обратно на сервер. Закройте запущенный процесс NodeJS. В заключительной части этого шага клиент отправит информацию о камере обратно на сервер. Откройте public/client.js .

В самом конце файла включите следующее.

 var camera; if (mobilecheck()) { AFRAME.registerComponent('camera-listener', { tick: function () { camera = this.el.sceneEl.camera.el; var position = camera.getAttribute('position'); var rotation = camera.getAttribute('rotation'); socket.emit('onMove', { "position": position, "rotation": rotation }); } }); }

Сохранить и закрыть. Откройте файл сервера server.js , чтобы прослушать это событие onMove .

Добавьте следующее в блок newHost вашего кода сокета.

 socket.on('newHost', function() { console.log(" * Participant registered as 'host'"); /* start new code */ socket.on('onMove', function(data) { console.log(data); }); /* end new code */ });

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

Шаг 6: Отправка информации с сервера клиенту

На этом шаге вы отправите информацию о камере хоста на все зеркала. Откройте файл основного сервера, server.js .

Измените обработчик события onMove следующим образом:

 socket.on('onMove', function(data) { console.log(data); // delete me socket.broadcast.emit('move', data) });

Модификатор broadcast гарантирует, что сервер отправляет эту информацию всем клиентам, подключенным к сокету, кроме исходного отправителя. После того, как эта информация отправлена клиенту, вам необходимо соответствующим образом настроить камеру зеркала. Откройте клиентский скрипт public/client.js .

Здесь проверьте, является ли клиент настольным компьютером. Если это так, получите данные о перемещении и зарегистрируйте их соответствующим образом.

 if (!mobilecheck()) { socket.on('move', function(data) { console.log(data); }); }

Загрузите предварительный просмотр на свой рабочий стол и на мобильное устройство. В настольном браузере откройте консоль разработчика. Затем загрузите приложение на свой мобильный телефон. Как только мобильный телефон загрузит приложение, консоль разработчика на вашем рабочем столе должна загореться с положением и поворотом камеры.

Откройте клиентский скрипт еще раз в public/client.js . Окончательно настраиваем клиентскую камеру в зависимости от отправляемой информации.

Измените обработчик события выше для события move .

 socket.on('move', function(data) { /* start new code */ camera.setAttribute('rotation', data["rotation"]); camera.setAttribute('position', data["position"]); /* end new code */ });

Загрузите приложение на рабочий стол и телефон. Каждое движение вашего телефона отражается в соответствующем зеркале на рабочем столе! На этом зеркальная часть вашего приложения завершена. Как пользователь настольного компьютера, теперь вы можете предварительно просмотреть то, что видит ваш мобильный пользователь. Концепции, представленные в этом разделе, будут иметь решающее значение для дальнейшего развития этой игры, поскольку мы превращаем однопользовательскую игру в многопользовательскую.

Заключение

В этом уроке мы запрограммировали трехмерные объекты и добавили к этим объектам простые взаимодействия. Кроме того, вы построили простую систему обмена сообщениями между клиентами и серверами, чтобы обеспечить предварительный просмотр того, что видят ваши мобильные пользователи.

Эти концепции выходят за рамки даже webVR, поскольку понятие геометрии и материала распространяется на SceneKit на iOS (который связан с ARKit), Three.js (основа для Aframe) и другие трехмерные библиотеки. Эти простые строительные блоки, собранные вместе, дают нам достаточную гибкость при создании полноценной приключенческой игры типа «укажи и щелкни». Что еще более важно, они позволяют нам создавать любую игру с интерактивным интерфейсом.

Вот несколько ресурсов и примеров для дальнейшего изучения:

ЗеркалоVR
Полноценная реализация предварительного просмотра в реальном времени, созданная выше. С помощью всего одной ссылки Javascript добавьте предварительный просмотр любой модели виртуальной реальности на мобильном устройстве на рабочий стол.
Мало по малу
Галерея детских рисунков и соответствующая модель виртуальной реальности для каждого рисунка.
Рама
Примеры, документация для разработчиков и другие ресурсы для разработки виртуальной реальности.
Опыт Google Cardboard
Опыт для классной комнаты с пользовательскими инструментами для преподавателей.

В следующий раз мы создадим полноценную игру, используя веб-сокеты для облегчения общения между игроками в реальном времени в игре виртуальной реальности. Не стесняйтесь делиться своими моделями в комментариях ниже.