React 360 – Introdução a Realidade Virtual com JavaScript

O que é React 360?

Uma biblioteca do NPM para criação de aplicações WEB com experiência em Realidade Virtual (VR).

Realidade virtual é uma tecnologia de interface entre um usuário e um sistema operacional através de recursos gráficos 3D ou imagens 360º cujo objetivo é criar a sensação de presença em um ambiente virtual diferente do real.

O que posso fazer com o React 360?

Existe uma infinidade de possibilidades e vou citar algumas aqui a baixo:

  • Criação de jogos imersivos.
  • Eventos reais transformados em virtuais.
  • Visitas a lugares distantes do mundo real.
  • Cinema com os amigos mesmo de longa distância.
  • Simulação da realidade podendo assim ser aplicada como um jogo.

Como viram são muitas coisas que podemos criar com a Realidade Virtual, React 360 veio para ajuda a fazer nossas aplicações usando JavaScript.

Dependências

  1. Node JS
  2. NPM
  3. Pacote NPM “react-360-cli”
  4. Um editor de código (VSCode)

Instalando React 360 CLI

Digite no seu console:

npm install -g react-360-cli

Retorno de sucesso:

+ react-360-cli@1.1.0
added 8 packages from 1 contributor in 3.842s

Criando nosso projeto

Antes de digita qualquer coisa, esteja certo que está na pasta que deseja criar seus projetos.

Digite no seu console:

react-360 init {NOME DO PROJETO}

Retorno de sucesso:

added 1036 packages from 555 contributors and audited 1037 packages in 112.023s
Done!
  Now enter the new project directory by running `cd palestra-react-460-introducao`
  Run `npm start` to initialize the development server
  From there, browse to http://localhost:8081/index.html
  Open `index.js` to begin editing your app.

Após o retorno parecido com o citado acima significa que sua aplicação foi criada agora basta acessar a pasta que foi criado usando o comando:

cd {NOME DO PROJETO}

E iniciar o servidor de desenvolvimento para que você possa ver sua aplicação rodando no localhost para isso digite:

npm start

Assim que obter sucesso nesse comando abra em seu navegador o site “http://localhost:8081/index.html”.

E pronto, depois de carregar a pagina (isso demorar alguns minutos), você verá algo parecido com isso:

Bom caso queira aprender um pouco mais você pode assistir o vídeo no topo desse artigo que foi de uma palestra que dei em uma live da comunidade Nerdzão, lá respondo algumas dúvidas a mais do pessoal e também mostro alguns outros projetos meus feitos em React 360.

Links:

Por hoje é isso pessoal!

Comentem aí abaixo o que acharam desse artigo se ajudou hoje ou não, se abriu sua mente a um mundo novo, etc…