Como um especialista em tecnologia, você provavelmente conhece a realidade virtual e seus vários aplicativos. Videogames, aplicativos para web e dispositivos móveis e muito mais podem colher os benefícios dos incríveis recursos de RV.
Se sua próxima meta de desenvolvimento é criar aplicativos de RV e você está familiarizado com o ecossistema React, está com sorte. Agora você pode desenvolver experiências de RV incríveis usando React 360 e JavaScript.
Em Neste tutorial, mostraremos como desenvolver um aplicativo de realidade virtual React simples e interativo usando React 360. No final, você deve estar pronto para construir seu primeiro aplicativo de realidade virtual no React.
Vamos cubra o seguinte:
O que é React 360? Instalando React 360 Adicionando recursos de fundo interações VR Adicionando sons envolventes Executando seu aplicativo React VR
O que é React 360?
React 360 é uma biblioteca que utiliza muitas funcionalidades do React Native para criar aplicativos de realidade virtual que rodam em seu navegador. Ele usa Three.js para renderização e vem como um pacote npm. Combinando APIs modernas, como WebGL e WebVR com o poder declarativo do React, o React 360 ajuda a simplificar o processo de criação de experiências de RV entre plataformas.
Aprender a usar o React 360 é uma ótima maneira de iniciar seu Carreira de desenvolvimento de RV. Neste tutorial, cobriremos todos os fundamentos para ajudá-lo a começar a usar o React 360.
Instalando o React 360
Em primeiro lugar, você precisa instalar o React 360 CLI . Isso lhe dará acesso a todos os comandos necessários para auxiliá-lo no desenvolvimento de um aplicativo de realidade virtual.
Agora, vá para a pasta desejada através do terminal de comando e execute o seguinte comando:
npm install-g react-360-cli
Esta é uma instalação única, então você não precisa fazer isso todas as vezes. A vantagem de estar na pasta do projeto é que torna mais fácil a etapa a seguir.
Após a instalação, crie um novo projeto chamado meu-projeto (criativo, certo?) E digite:
reagir-360 init my-project
Você criou com sucesso seu primeiro aplicativo de realidade virtual com React 360.
Para visualizar o aplicativo em seu navegador, navegue até a pasta my-project através do terminal e execute npm começar. Isso o guiará até o destino no navegador. Como alternativa, você pode acessar a saída seguindo http://localhost: 8081/index.html .
Esta é a aparência do aplicativo:
Agora que você tem o aplicativo instalado e funcionando, vamos falar sobre o código em detalhes. Dois arquivos importantes com os quais trabalharemos são client.js e index.js. O arquivo index.js consiste em quatro partes:
Class Imports Styles Component Registry
Estamos importando o React para usar sua funcionalidade de classe. Reuniremos algumas partes do React 360 para construir um ambiente de realidade virtual:
import React from’react’; import {AppRegistry, StyleSheet, Text, View,} de’react-360′; exportar a classe padrão my_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,}, saudação: {fontSize: 30,},}); AppRegistry.registerComponent (‘meu_projeto’, ()=> meu_projeto);
A sintaxe e os componentes da classe são bastante semelhantes ao React e ao React Native, respectivamente. O componente View permite renderizar vários aspectos do mundo VR e, se quiser, brincar com a aparência. O atributo Style e StyleSheet irão ajudá-lo a fazer isso. Existem inúmeras semelhanças com o React Native e a funcionalidade CSS aqui.
Quando se trata do componente Texto, você pode criar texto dinâmico para exibir todos os tipos de dados para o usuário. No final, a classe precisa ser registrada no cliente para renderização.
Você notará que a função init no arquivo client.js cria uma nova instância para o seu projeto e, em seguida, utiliza a classe de o arquivo index.js para atribuir um método de renderização a este projeto. Em seguida, o ambiente do projeto é aplicado a uma imagem panorâmica, seguido da execução da função init.
import {ReactInstance} from’react-360-web’; função init (bundle, parent, options={}) {const r360=new ReactInstance (bundle, parent, {fullScreen: true,… options,}); r360.renderToSurface (r360.createRoot (‘meu_projeto’, {}), r360.getDefaultSurface ()); r360.compositor.setBackground (r360.getAssetURL (‘simmes-start-screen.jpg’)); } window.React360={init};
Esses são os fundamentos da funcionalidade do React 360 e você está pronto para começar o desenvolvimento de seu primeiro aplicativo de RV. Agora que você sabe como um aplicativo React VR é feito, vamos seguir algumas etapas para personalizá-lo.
Adicionando recursos de fundo
Você pode aplicar qualquer imagem panorâmica ao fundo VR usando React 360. Para este tutorial, estamos usando uma imagem gratuita do Simmes; você pode usar qualquer imagem que desejar.
Para usar uma imagem panorâmica como plano de fundo, adicione a imagem desejada à pasta static_assets. Esta pasta contém todos os ativos estáticos, como imagens, música e modelos, e o React 360 procura por eles aqui.
Use o comando abaixo para atualizar o plano de fundo:
r360.compositor.setBackground (r360.getAssetURL (‘simmes-start-screen.jpg’));
Interações de RV
Um dos aspectos mais importantes e envolventes de qualquer aplicativo é a interação. Sem interação, um aplicativo não tem vida. Você pode adicionar esta funcionalidade vital ao seu aplicativo React VR adicionando o componente VrButton às importações dos arquivos index.js da seguinte maneira:
import {AppRegistry, StyleSheet, Text, View, VrButton} from’react-360′;
A seguir, adicione um contador para registrar o número de cliques. Comece definindo a contagem de cliques para zero:
state={count: 0};
A próxima etapa é escrever uma função de incremento:
_incrementCount=()=> {this.setState ({count: this.state.count + 1})}
No final, nós’Irá renderizar o VrButton assim:
Você configurou com sucesso o botão e agora pode ver o número de pessoas que visitam seu Mundo de realidade virtual.
Adicionando sons envolventes
Nem todos os aplicativos que você cria requerem som. No entanto, quando se trata de jogos, vídeos e outras experiências imersivas, os sons são essenciais.
Para adicionar som ao nosso aplicativo de RV, precisamos buscar mais algumas coisas no React 360.
import {asset, AppRegistry, NativeModules, StyleSheet, Text, View, VrButton} de’react-360′;
A próxima etapa é importar o AudioModule de NativeModules e definir uma nova const:
const {AudioModule}=NativeModules;
Assim que o novo const for definido, podemos adicionar funcionalidades específicas à forma como o som é reproduzido. Por exemplo, podemos fazê-lo começar a ser reproduzido ao clicar no botão e parar quando o botão for clicado novamente.
Para fazer isso funcionar, adicionaremos um valor booleano ao estado:
estado={contagem: 0, playSound: falso};Finalmente, escreveremos outra função para gerenciar a forma como o som é reproduzido:
_playSound=()=> {this.setState ({playSound:! this.state.playSound}); if (this.state.playSound) {AudioModule.createAudio (‘sza’, {fonte: ativo (‘brokenclocks.mp3’), volume: 0,5}); AudioModule.play (‘sza’); } Else {AudioModule.stop (‘sza’); }}
Depois de executada, esta função atualiza o estado playSound, que é definido como falso. A forma como o som é reproduzido depende do valor atribuído a playSound. Para reproduzi-lo, uma instância de áudio deve ser criada por meio do componente createAudio.
Depois de criado, você pode reproduzir o áudio por meio do nome atribuído. Isso ocorre apenas quando playSound está definido como verdadeiro. O som para de tocar quando é falso. É por isso que criamos uma nova instância sempre que playSound for true.
Agora criaremos um botão para iniciar e parar a reprodução do som. Esta será a aparência do código:
Seu aplicativo de realidade virtual está completo! Vamos executar o aplicativo para ver como fica.
Executando seu aplicativo React VR
Você pode visualizar o aplicativo por meio do comando run npm start. Seu primeiro aplicativo React VR, chamado “My Project,” deve conter o plano de fundo que você escolheu e dois botões. Um botão controla o áudio e o outro controla o número de usuários que visitam o aplicativo.
Agora você pode convidar seus amigos e familiares para brincar com seu novo aplicativo de RV e debater novas ideias para o aplicativo com colegas programadores. As possibilidades são infinitas.
Espero que este tutorial tenha ajudado você a entender o React 360 um pouco melhor.
Conte-nos sobre sua experiência com o React 360. Qual você acha que é a melhor maneira de criar aplicativos de RV? Adoraríamos ouvir de você.
