Рубрики
Без рубрики

Сделать ваше первое приложение VR с React360

Виртуальная реальность начинает набрать некоторую тягу с некоторыми из новых технологий, которые вышли. Знаете ли вы, что вы можете сделать VR приложения, не написав на родном мобильном коде? Проверьте, как вы можете строить VR-приложения, используя экосистему RACT и библиотеку React360. Теги от реагирования, JavaScript, Reactanation, начинающие.

Невозможно быть в техническом сообществе и не знаю о росте виртуальной реальности или VR. Существуют игровые системы, мобильные приложения и веб-приложения, которые воспользуются функциями, которые VR должен предложить. Большое, что если вы знакомы с экосистемой RACT ECOSYSTEM, вы можете прыгать прямо на создание приложений VR! React 360 – это библиотека, которая использует много реагирования нативных функций для создания приложений VR, и это отличный способ начать работу в качестве разработчика VR.

Мы пройдем через настройку простого интерактивного приложения VR, используя React 360. К концу этого урока вы должны чувствовать себя готовым начать добавлять сложность в ваше приложение VR и сделать его более удобным для пользователя. Я дам вам несколько идей в конце, на всякий случай, если вам нужно небольшое запуск.

Установить React 360 CLI

Первое, что вам нужно сделать, это установить React 360 CLI. Это даст вам доступ к командам, которые вам понадобятся для создания приложения VR. Таким образом, откройте свой терминал и перейдите к папке, в которой вы хотите создать этот проект. Затем запустите эту команду.

npm install -g react-360-cli

Это устанавливает его по всему миру, поэтому вам не придется делать это снова для будущих проектов. Единственная причина, по которой вы находитесь в папке проекта, состоит в том, чтобы сделать следующий шаг проще. Теперь вы создадите новый проект VR под названием «VR-Project» (так творческий) со следующей командой.

react-360 init vr-project

Теперь у вас есть совершенно новый VR-приложение, построенный на React 360! Чтобы увидеть, как в вашем браузере выглядит в вашем браузере, вы можете использовать терминал, чтобы перейти внутрь папки VR-Project, а затем запустить начало NPM. Это должно сказать вам, куда идти в браузере, но если это не так, попробуйте навигацию на http://localhost: 8081/index.html Отказ Вы должны увидеть что-то вроде этого.

Давайте пройдемся через проект и поговорим о коде. Основные файлы, на которых вы сосредоточитесь, являются index.js и client.js. Существует четыре основных части файла index.js: импорт, класс, стиль и регистрация компонента. Мы импортируем реагируйте, чтобы мы могли работать с его классовой функциональностью, и мы импортируем некоторые вещи из React 360, поэтому мы создаем наш мир VR.

import React from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-360';

export default class vr_project extends React.Component {
  render() {
    return (
      
        
          
            Welcome to React 360
          
        
      
    );
  }
};

const styles = StyleSheet.create({
  panel: {
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingBox: {
    padding: 20,
    backgroundColor: '#000000',
    borderColor: '#639dda',
    borderWidth: 2,
  },
  greeting: {
    fontSize: 30,
  },
});

AppRegistry.registerComponent('vr_project', () => vr_project);

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

Текстовый компонент – это то, что звучит так. Вы можете отображать текст пользователю, и этот текст может быть динамичным для отображения различных видов данных. В самом конце вы должны зарегистрировать класс к клиенту, поэтому оно будет оказано. В файле Client.js вы заметите, что функция init создает новый экземпляр для вашего проекта VR и использует класс из файла index.js, чтобы установить метод рендера для вашего проекта. Затем он устанавливает среду проекта VR на панорамное изображение. Наконец, он запускает функцию init в окне браузера.

import {ReactInstance} from 'react-360-web';

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    fullScreen: true,
    ...options,
  });

  r360.renderToSurface(
    r360.createRoot('vr_project', { }),
    r360.getDefaultSurface()
  );

  r360.compositor.setBackground(r360.getAssetURL('simmes-start-screen.jpg'));
}

window.React360 = {init};

Теперь, когда вы знаете основы, как работает приложение React 360, вы можете начать создавать собственное приложение VR. Мы пройдем несколько вещей, которые вы можете добавить в свой проект.

Добавить активы для фона

Вы можете изменить фон для вашей среды на любое панорамное изображение, которое вы хотите. Я нашел несколько бесплатных изображений здесь: https://pixexid.com Отказ Добавьте все новые изображения в папку Static_assets, потому что именно поэтому Rect 360 будет искать все ваши статические активы, такие как изображения, звуки и модели. Вы можете обновить фон среды в файле Client.js, как это.

r360.compositor.setBackground(r360.getAssetURL('simmes-start-screen.jpg'));

URL Asset используется для 360_world.jpg И теперь это обновлено, чтобы быть начальным экраном приложения VR, над которым я работаю. Одна вещь, которую я был немного разочарован, был отсутствие встроенного в примитивных формах. Вы не можете просто построить объекты, чтобы разместить в своем мире. Вы должны строить модели за пределами приложения и импортировать их. Есть несколько бесплатных ресурсов, но они не лучшие. Так что имейте в виду, что вы не можете строить коробки и сферы в React 360.

Добавьте некоторые взаимодействия с приложением

Забавная часть любого приложения VR взаимодействует с ним. Вы можете сделать это с использованием компонента VRButton. Мы добавим его к импорту в файле index.js, как это.

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton
} from 'react-360';

Мы сделаем простой счетчик, чтобы отслеживать, сколько раз пользователь нажимает кнопку. Для этого нам нужно добавить небольшую дополнительную функциональность. Сначала мы установим начальное состояние компонента и установить счет до 0.

state = {
  count: 0
};

Тогда мы сделаем функцию для увеличения того, что это называется.

_incrementCount = () => {
  this.setState({
    count: this.state.count + 1
  })
}

Наконец, нам нужно добавить VRButton в метод рендера.


        
          
            {`You have visited Simmes ${this.state.count} times`}
          
        

Обратите внимание, что у нас есть событие OnClick для VRButton, который вызывает функцию _IncrementCount. Вот как мы обрабатываем пользовательский ввод. Тогда мы дали кнопку те же стили, которые были на мнении, которые держали текст до нашего изменения. Другое изменение, которое вы заметите, так это то, что мы обновили текст внутри текстового компонента к строке шаблона. Мы возвращаем количество щелчков, которые пользователь сделал и позволить им знать, вот сколько раз они посетили Мир Симмес Вр.

Добавить звук в приложение

Не каждое приложение VR понадобится звук, но для таких вещей, как игры или полностью захватывающие миры, вы можете включить его. Чтобы добавить звук к этому проекту, нам нужно импортировать еще несколько вещей из React 360 в файле index.js.

import {
  asset,
  AppRegistry,
  NativeModules,
  StyleSheet,
  Text,
  View,
  VrButton
} from 'react-360';

Далее нам нужно получить аудиомодуль из нативемодулей, и мы сделаем это, создавая новое const.

const { AudioModule } = NativeModules;

Аудио функциональность, которые мы собираемся реализовать, будут воспроизведены некоторые звуки, когда пользователь нажимает кнопку и прекращает воспроизведение его, если пользователь снова нажимает кнопку. Чтобы справиться с этим, мы добавим логическое значение в состояние.

state = {
  count: 0,
  playSound: false
};

Тогда мы можем добавить другую функцию, которая будет работать на том, как воспроизводится звук.

_playSound = () => {
    this.setState({
      playSound: !this.state.playSound
    });

    if (this.state.playSound) {
      AudioModule.createAudio('sza', {
        source: asset('brokenclocks.mp3'),
        volume: 0.5
      });

      AudioModule.play('sza');
    }
    else {
      AudioModule.stop('sza');
    }
  }

Когда эта функция срабатывает, первое, что он делает, это обновить состояние PlaySound, которое изначально ложно. В зависимости от значения Playsound вы либо начнете воспроизводить свой звук или остановить его. Если вам нужно начать воспроизведение звука, вы можете создать экземпляр аудио для работы с. Метод Createaudio принимает имя и любые варианты, в которых вы хотите пройти. Вам нужно пройти исходный файл в минимуме. Вот почему мы импортировали актив от реагирования 360. Это позволяет нам легко получать файлы из папки Static_assets.

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

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


 
    
     {`You have visited Simmes ${this.state.count} times`}
  
 
 
   
     {'You can play the music of your people'}
   
  

Это просто еще один VRButton, но на этот раз слушатель OnClick вызывает метод _Playsound. В противном случае это почти идентично другой Vrbutton. Вы можете немного понравиться и изменить текст, который показан в кнопке PLAY/STOP на основе значения Playsound. Теперь, когда вы добавили эту звуковую функциональность, мы закончили с помощью этого простого приложения! Пришло время построить это.

Запустите приложение и играй с ним

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

У вас есть какие-то фона и две кнопки, один из которых является счетчиком, а другой – это аудио управление. Теперь вы можете играть с новым миром и начать думать о вещах, которые вы хотите добавить к нему. Вы могли бы сделать сумасшедшую игру VR или вы могли бы сделать что-то, чтобы помочь людям с доступностью. Есть много вещей, которые вы можете построить из этого проекта с небольшим творчеством и воображением.

Надеюсь, это дало вам хорошую отправной точкой для работы с React 360. Это классная библиотека для использования в разработке VR. Вам не нужно инвестировать в дорогую гарнитуру, чтобы проверить ваши приложения. Вы можете сделать это прямо в браузере. Не ожидайте, что увидим много в Devtools, хотя все, что все оказано в холсте. Там не отдельных элементов, как вы, могли ожидать.

Как вы думаете, VR будет стоить обучения, как развиваться или будет причуда? Было бы круто, если бы была библиотека AR для Интернета, но как бы эта даже работала? Это новые поля, и они широко открыты прямо сейчас. Поскольку вы знаете, какие технические навыки вам понадобится, попробуйте сосредоточиться на творческой стороне того, что вы можете построить с приложениями VR.

Привет! Вы должны следовать за мной в Twitter, поскольку причины: https://twitter.com/flaphedcoding.

Оригинал: “https://dev.to/flippedcoding/making-your-first-vr-app-with-react360-22f”