Включая вынос, советы и рекомендации
Начиная
Начать работу с React VR очень просто. Следуйте инструкциям в документации, указанной ниже, и вы запустите hello world за 5 минут или меньше.
Оси X, Y и Z
Если вы заглянете внутрь тега ‹text› в файле «index.vr.js», вы увидите элемент, называемый преобразованием, например:
transform: [{translate: [0, 0, -3]}]
Массив translate — это координаты X, Y и Z мира виртуальной реальности. В VR все вращается вокруг вас. Вы находитесь в нулевой позиции всех трех осей. Это означает, что X — это ось влево-вправо; Y движется вверх и вниз, а Z движется ближе или дальше от вас.
Вот список некоторых важных свойств:
- Расположение ваших глаз — это нулевое положение всех трех осей.
- Все три оси измеряются от ориентации по умолчанию.
- Ось X правая и левая, причем правая положительная, а левая отрицательная.
- Ось Y направлена вверх и вниз, причем вверх положительно, а вниз отрицательно.
- Ось Z направлена вперед и назад, причем вперед положительно, а назад отрицательно.
- Все измеряется в метрах. Итак, много десятичных дробей.
Вращение объекта
Одна вещь, которую вы можете заметить на раннем этапе, это то, что когда вы перемещаете объект с текстом позади вас, текст будет смотреть назад. Нравится:
Это потому, что объект нужно повернуть так, чтобы правая сторона была обращена к центру (вам).
React VR позволяет легко вращаться вдоль любой из трех осей, используя rotateX, rotateY и rotateZ внутри преобразования, например:
transform: [{translate: [0, 0, 3]}, {rotateY: 180}],
На приведенной ниже диаграмме показано направление rotateX, rotateY и rotateZ относительно соответствующих осей:
Имея это в виду, все, что нам нужно сделать сейчас, это добавить «rotateY», как показано в приведенном выше коде, и «hello» должно отображаться правильно, например так:
Встраивание
Чтобы получить 360-градусный контент на своем веб-сайте, вам просто нужно добавить iframe, который указывает местоположение видеосервера. Нравится:
<iframe src="http://localhost:8081/vr/index.html"></iframe>
Вопросы, на которые еще предстоит ответить:
- Как сделать объект плавающим, чтобы он всегда был в поле зрения?
- Насколько хорошо React Native работает с React VR?
- Чем React VR отличается от A-frame?
Последние мысли
Я буду документировать свое исследование виртуальной реальности с целью публикации модуля, который позволит разработчикам добавлять истории (например, истории из Instagram) для 360-градусных фотографий и видео в свои приложения виртуальной реальности. Оставайтесь с нами для следующего поста!
