React 360: um framework para criação de interfaces em 3D e realidade virtual

React 360 é um framework para criação de interfaces 3D e VR (virtual reality ou realidade virtual) que foi feito utilizando o próprio React como base. Com esse framework é possível criar interfaces com o conceito de imersão 360 com uma certa facilidade, para aqueles que já têm conhecimento com React, ou até mesmo para aqueles que não possuem.

Como funciona React 360?

Para melhor entendermos o framework vamos pensar que ele funciona em duas partes: A aplicação e o runtime, conforme proposto pela própria documentação do framework.

A aplicação seria onde desenhamos nossos componentes e colocamos os eventos de click, drag, entre outros, ou seja, o nosso código. Já o runtime seria onde nossos componentes são transformados em elementos 3D e renderizados. Para quem conhece React Native, o runtime tem um funcionamento inspirado na bridge que converte componentes React em componentes nativos para dispositivos móveis.

O framework foi feito para que seja mais fácil criar interfaces interativas.

Iniciando um projeto

Para poder utilizar o React 360, o usuário precisa ter instalado previamente o Node.js. Com a ferramenta já instalada deve-se abrir um terminal e instalar o React 360 através do gerenciador de pacotes do Node (npm).

npm install -g react-360-cli

Com o react-360-cli instalado, podemos agora criar um novo projeto com o seguinte comando:

react-360 init nome-do-projeto

Esse comando irá criar uma nova pasta com o nome escolhido para o projeto, além de inicializar com a estrutura mínima de código para poder utilizar o React 360.

Entendendo a estrutura do projeto

Estrutura básica de arquivos de um projeto React 360

A estrutura do React 360 é composta por algumas pastas e arquivos que são importante citarmos.

A pasta __test__ é onde serão inseridos todos os arquivos de testes, e a pasta node_modules , assim como em outros projetos em Node, é onde ficam armazenadas os pacotes que são dependências do projeto.

A pasta static_assets é responsável por armazenar todos os arquivos que deverão ser carregados quando se inicia a aplicação. Isso quer dizer que nessa pasta deveremos colocar todas as imagens, modelos 3d, videos e etc.

Existem alguns arquivos de configuração que não serão detalhados nesse artigo, como o arquivo .babelrc , .watchmanconfig e rc-cli.config.js .

Vamos falar agora dos dois principais arquivos que iremos utilizar: client.js e index.js.

Ao criar um novo projeto, dentro do arquivo index.js podemos verificar a seguinte estrutura de código:

Olhando o código nós conseguimos ver algumas similaridades entre React 360 e React, a começar pela estrutura de classes, onde temos uma classe que extende de React.Component e que possui uma função render(), o que traz a mesma sintaxe de componentes utilizada no React. Além disso, conseguimos ver também o uso de outros componentes, tais como View e Text, que serão explicados mais adiante.

Algo interessante a se atentar nesse trecho de código é a última linha:

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

Essa linha é responsavel por registrar esse componente, para que mais tarde possa ser recuperado e renderizado. É o mesmo conceito utilizado no React Native.

Vamos observar agora o client.js:

Esse trecho de código é responsável por criar uma instância do React 360 e, a partir dela, renderizar nossos componentes. Podemos perceber que existe uma função renderToSurface() onde nós renderizamos o nosso componente que foi registrado anteriormente. Esse componente está sendo renderizado na tela através de um container que representa uma superfície. Por exemplo, se a superfície for plana, o conteúdo ficaria com o aspecto achatado, se for cilíndrico, o conteúdo teria uma curvatura ao ser renderizado. Nesse caso foi utilizada a superfície padrão do React 360, mas é possível criar nossas próprias superfícies.

Na última linha estamos colocando a função init() dentro de window.React360, essa função será utilizada para inicializar nosso componente mais adiante.

O ultimo arquivo a ser mencionado é o index.html:

Assim como em aplicações React, ele servirá como ponto de início para poder montar nossa aplicação em um elemento HTML. Isso será feito utilizando a função init() que exportamos anteriormente.

Componentes

Para a criar aplicações com o React 360 é necessário conhecer os principais componentes disponibilizados para o framework, eles são: View, Image, Entity, Text e VrButton.

View

A View talvez seja a mais importante dentre os componentes pelo fato de ser um container para se colocar os outros componentes. Ela pode ser customizada como se fosse um Flexbox. Temos abaixo um exemplo de como escrever um componente utilizando uma View.

Image

A Image serve para renderizar imagens para possuirem um efeito de 360. Essas imagens podem ser fornecidas através da pasta static_assets (ou qualquer outra que tenha sido definida como pasta de assets), ou através de uma URL. Para conseguir utilizar uma imagem que esteja dentro da pasta assets, deve-se utilizar a função asset('nome_da_imagem.jpg'). Veja abaixo um exemplo de como utilizar o component Image.

Text

Para que seja possível escrever textos e até mesmo ajudar na criação de UIs de apoio, o React 360 provê o componente Text. Essa é a única maneira de se renderizar textos puros, e você pode estilizar a cor (color), tamanho (fontSize), espessura (fontWeight), altura (lineHeight) e alinhamento do texto (textAlign). Abaixo vemos duas maneiras de utilizar o Text, uma sendo encapsulada pelo próprio Text, e uma sendo encapsulada pela View. Abaixo de cada exemplo podemos ver a diferença no resultado final, que seria a forma como seria disposto o texto.

Entity

Talvez seja o componente mais interessante do React 360, uma vez que ele possibilita a renderização de objetos 3D, o que torna a aplicação muito mais atrativa. Esse componente aceita arquivos no formato OBJ e GLTF, que devem estar dentro da pasta assets. A grande vantagem desse componente é o fato de não precisar de nenhuma configuração adicional e ser possível, além de renderizar o objeto, mudar algumas propriedades de estilo, que podem ser melhor visualizadas na documentação aqui. Abaixo vemos um exemplo de como criar um componente do tipo Entity.

VrButton

Esse componente permite disparar ações através de clicks. Ele funciona como todo componente do tipo Button e deve ser colocado uma função onClick() que será executada ao clicar no botão. Abaixo um exemplo de uso do componente.

Wrap Up

Nesse post vimos como é simples a criação de aplicações utilizando React 360 e como o próprio framework já possibilita a criação de uma estrutura de projeto bem organizada. Estamos disponibilizando o código de um mini projeto utilizando o React 360 onde renderizamos alguns objetos 3D (os planetas), um botão de ação no canto superior direito (rotate) e utilizamos animações para deixa-los ainda mais interessantes como demonstrado na imagem abaixo:

React 360 com objetos 3D (planetas)