Creando una aplicación en Realidad Virtual (VR) y Vista 360° con React VR

5 minuto(s)

Demo Github

Vamos a construir una aplicación web que va tener un entorno Virtual, es decir en realidad Virtual y podremos tambien mirar los alrededores en una vista de 360° entre otras funcionalidades. Las páginas en Realidad Virtual hacen que el usuario tenga una experiencia diferente. Probablemente sea el futuro de las páginas webs junto con la llamada Web 3.0. En este tutorial aprenderemos a como crear una aplicación en Realidad Virtual (VR) y Vista 360° con React VR.

NOTA: La herramienta que usamos para este tutorial React VR, ahora se llama React 360, en donde han cambiado muchas cosas, pero este tutorial aún funciona y te permite crear aplicaciones con React VR.

Instalación de Node JS para Gestionar nuestras dependencias

Voy a instalar Node JS para gestionar mis paquetes y dependencias (según la documentación es el que debemos usar, hasta la fecha de creación de este artículo), para ello vamos a su página y lo descargamos e instalamos

Ahora verificamos la versión de Node JS que hemos instalado, con esto compruebo que se ha instalado correctamente Node JS, para ello ejecuto la siguiente instrucción:

node -v
// resultado:
v6.10.1

1 2 3 4 5	node -v // resultado: v6.10.1

Si necesitas una guía más detallada sobre Node JS, te recomiendo leer el artículo Que es y Como instalar Node JS.

Instalación de las dependencias para el Proyecto

Primer instalamos el Gestor de líneas de Comandos React VR CLI, ejecutamos:

npm install -g react-vr-cli

// Instalado: 
`-- react-vr-cli@0.3.1
  `-- chalk@1.1.3
    +-- ansi-styles@2.2.1
    +-- escape-string-regexp@1.0.5
    +-- has-ansi@2.0.0
    | `-- ansi-regex@2.1.1
    +-- strip-ansi@3.0.1
    `-- supports-color@2.0.0

1 2 3 4 5 6 7 8 9 10 11 12 13	npm install -g react-vr-cli // Instalado: `-- react-vr-cli@0.3.1 `-- chalk@1.1.3 +-- ansi-styles@2.2.1 +-- escape-string-regexp@1.0.5 +-- has-ansi@2.0.0 \| `-- ansi-regex@2.1.1 +-- strip-ansi@3.0.1 `-- supports-color@2.0.0

Ahora hago el deployment inicial de mi aplicación con el siguiente comando:

react-vr init miproyectovr

// Resultado
Creating new React VR project...
Project directory created at miproyectovr

Copying assets...

Installing dependencies...

1 2 3 4 5 6 7 8 9 10 11	react-vr init miproyectovr // Resultado Creating new React VR project... Project directory created at miproyectovr Copying assets... Installing dependencies...

Vista previa de mi Proyecto

Vamos a ver nuestro proyecto en el navegador, para ello ingreso al directorio ‘miproyectovr’ que se ha creado durante el deployment inicial y luego inicio el proyecto:

// ingreso al directorio creado
cd miproyectovr

// luego una ves dentro del directorio arranco mi proyecto con el comando
npm start

1 2 3 4 5 6 7	// ingreso al directorio creado cd miproyectovr // luego una ves dentro del directorio arranco mi proyecto con el comando npm start

Vamos al navegador e ingresamos a la siguiente dirección para ver nuestro proyecto publicado:

https://localhost:8081/vr/

Personalizando mi proyecto

Ahora a mi proyecto le voy a colocar una imagen equirectangular (Fondo) la cual le da un entorno de realidad virtual a 360°, agregare un letrero de bienvenida, 3 botones y un video, podemos ver la imagen a continuación:

Gestionando la imagen de Fondo y demás archivos

Para modificar la imagen que viene por defecto en mi proyecto ingreso a la carpeta llamada ‘static_assets’ aquí debo de agregar el fondo del proyecto, una imagen equirectangular, asimismo voy a tener que colocar todos mis archivos multimedia y otros que creamos que deban de verse públicamente en este directorio, este directorio es como la carpeta publica por default en React VR.

Yo agregare mis archivos:

bj.jpg
sonido.mp3
video.mp4

Son los archivos que usare en este proyecto.

Agregando el código

Primero importare las dependencias necesarias para este proyecto:

import React from 'react';
import {
  AppRegistry,
  asset,
  Pano,
  Text,
  VrButton,
  View,
  Image,
  Box,
  Cylinder,
  CylindricalPanel,
  Sound,
  NativeModules,
  Video,
  MediaPlayerState,
  VideoControl,
} from 'react-vr';

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20	import React from 'react'; import { AppRegistry, asset, Pano, Text, VrButton, View, Image, Box, Cylinder, CylindricalPanel, Sound, NativeModules, Video, MediaPlayerState, VideoControl, } from 'react-vr';

Con la siguiente función le digo que me cargue el video automáticamente y sin silenciar el audio:

constructor(props) {
      super(props);
      this.state = {
      playerState: new MediaPlayerState({autoPlay: true, muted: false}),
    };
  }

1 2 3 4 5 6 7 8	constructor(props) { super(props); this.state = { playerState: new MediaPlayerState({autoPlay: true, muted: false}), }; }

Creo el letrero de bienvenida:

<Text
          style={{
            backgroundColor: '#305b8e',
            fontSize: 0.8,
            fontWeight: '400',
            layoutOrigin: [0.5, 3.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -7]}],
            borderRadius: 0.1,
          }}>           
            Bienvenido
</Text>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	<Text style={{ backgroundColor: '#305b8e', fontSize: 0.8, fontWeight: '400', layoutOrigin: [0.5, 3.5], paddingLeft: 0.2, paddingRight: 0.2, textAlign: 'center', textAlignVertical: 'center', transform: [{translate: [0, 0, -7]}], borderRadius: 0.1, }}> Bienvenido </Text>

Muestro el video en formato MP4:

<Video 
          style={{
            transform: [{translate: [0, 0, -7]}],
            width: 7.0, 
            height: 3.6,
            layoutOrigin: [0.5, 0.9],
          }} 
          source={{uri: '../static_assets/video.mp4'}}
          playerState={this.state.playerState} />

          <VideoControl
            style={{height: 0.2, width: 4}}
            playerState={this.state.playerState}
          />

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16	<Video style={{ transform: [{translate: [0, 0, -7]}], width: 7.0, height: 3.6, layoutOrigin: [0.5, 0.9], }} source={{uri: '../static_assets/video.mp4'}} playerState={this.state.playerState} /> <VideoControl style={{height: 0.2, width: 4}} playerState={this.state.playerState} />

Crea el botón para que al hacer click nos envíe a una determinada URL que le especifiquemos:

<VrButton
          style={{width: 1.7,transform: [{translate: [0, 0, -7]}],layoutOrigin: [1.65, 7.9],backgroundColor: '#444444',borderRadius: 0.1,}}
          onClick={() => NativeModules.LinkingManager.openURL('https://nubecolectiva.com/')}>
          <Text
            style={{              
              fontSize: 0.3,
              fontWeight: '400',              
              paddingLeft: 0.2,
              paddingRight: 0.2,
              textAlign: 'center',
              textAlignVertical: 'center',
            }}>           
              Home
          </Text>
        </VrButton>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	<VrButton style={{width: 1.7,transform: [{translate: [0, 0, -7]}],layoutOrigin: [1.65, 7.9],backgroundColor: '#444444',borderRadius: 0.1,}} onClick={() => NativeModules.LinkingManager.openURL('https://nubecolectiva.com/')}> <Text style={{ fontSize: 0.3, fontWeight: '400', paddingLeft: 0.2, paddingRight: 0.2, textAlign: 'center', textAlignVertical: 'center', }}> Home </Text> </VrButton>

Bien también React VR nos da la posibilidad de agregar figuras Geométricas y otros elementos, yo agregare una caja y un cilindro:

<Box
          dimWidth={2}
          dimDepth={2}
          dimHeight={1}
          style={{
            color: '#444444',
          }}
        />

        <Cylinder
          radiusTop={0.2}
          radiusBottom={0.2}
          dimHeight={2}
          segments={12}
        />

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	<Box dimWidth={2} dimDepth={2} dimHeight={1} style={{ color: '#444444', }} /> <Cylinder radiusTop={0.2} radiusBottom={0.2} dimHeight={2} segments={12} />

Puedes agregar más elementos solo revisa la documentación oficial de React VR con paciencia y mesura.

Código completo

import React from 'react';
import {
  AppRegistry,
  asset,
  Pano,
  Text,
  VrButton,
  View,
  Image,
  Box,
  Cylinder,
  CylindricalPanel,
  Sound,
  NativeModules,
  Video,
  MediaPlayerState,
  VideoControl,
} from 'react-vr';

export default class MiproyectoVR extends React.Component {

  constructor(props) {
      super(props);
      this.state = {
      playerState: new MediaPlayerState({autoPlay: true, muted: false}),
    };
  }

  render() {
    return (
      <View>
        {/*
        <Sound
          source={{
           mp3: asset('sonido.mp3'),
          }}
          autoPlay={false}
        />
        */}

        <Pano source={asset('bg.jpg')} />

        {/*
        <VrButton
          style={{width: 0.7,transform: [{translate: [0, 0, -3]}],layoutOrigin: [0.5, 0.9],}}
          onClick={() => NativeModules.LinkingManager.openURL('https://google.com/')}>
          <Image style={{width:1, height:1}}
            source={asset('fp.jpg')}
            inset={[0.2,0.2,0.2,0.2]}
            insetSize={[0.05,0.45,0.55,0.15]} >
          </Image>
        </VrButton>
        */}

        <Text
          style={{
            backgroundColor: '#305b8e',
            fontSize: 0.8,
            fontWeight: '400',
            layoutOrigin: [0.5, 3.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -7]}],
            borderRadius: 0.1,
          }}>           
            Bienvenido
        </Text>

        <Video 
          style={{
            transform: [{translate: [0, 0, -7]}],
            width: 7.0, 
            height: 3.6,
            layoutOrigin: [0.5, 0.9],
          }} 
          source={{uri: '../static_assets/video.mp4'}}
          playerState={this.state.playerState} />

          <VideoControl
            style={{height: 0.2, width: 4}}
            playerState={this.state.playerState}
          />

        <VrButton
          style={{width: 1.7,transform: [{translate: [0, 0, -7]}],layoutOrigin: [1.65, 7.9],backgroundColor: '#444444',borderRadius: 0.1,}}
          onClick={() => NativeModules.LinkingManager.openURL('https://nubecolectiva.com/')}>
          <Text
            style={{              
              fontSize: 0.3,
              fontWeight: '400',              
              paddingLeft: 0.2,
              paddingRight: 0.2,
              textAlign: 'center',
              textAlignVertical: 'center',
            }}>           
              Home
          </Text>
        </VrButton>

        <VrButton
          style={{width: 1.7,transform: [{translate: [0, 0, -7]}],layoutOrigin: [0.5, 8.9],backgroundColor: '#444444',borderRadius: 0.1,}}
          onClick={() => NativeModules.LinkingManager.openURL('https://nubecolectiva.com/team.php')}>
          <Text
            style={{              
              fontSize: 0.3,
              fontWeight: '400',              
              paddingLeft: 0.2,
              paddingRight: 0.2,
              textAlign: 'center',
              textAlignVertical: 'center',
            }}>           
              Nosotros
          </Text>
        </VrButton>

        <VrButton
          style={{width: 1.7,transform: [{translate: [0, 0, -7]}],layoutOrigin: [-0.65, 9.9],backgroundColor: '#444444',borderRadius: 0.1,}}
          onClick={() => NativeModules.LinkingManager.openURL('https://nubecolectiva.com/contacts.php')}>
          <Text
            style={{              
              fontSize: 0.3,
              fontWeight: '400',              
              paddingLeft: 0.2,
              paddingRight: 0.2,
              textAlign: 'center',
              textAlignVertical: 'center',
            }}>           
              Contacto
          </Text>
        </VrButton>

        <Box
          dimWidth={2}
          dimDepth={2}
          dimHeight={1}
          style={{
            color: '#444444',
          }}
        />

        <Cylinder
          radiusTop={0.2}
          radiusBottom={0.2}
          dimHeight={2}
          segments={12}
        />


      </View>     


    );
  }


};

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162	import React from 'react'; import { AppRegistry, asset, Pano, Text, VrButton, View, Image, Box, Cylinder, CylindricalPanel, Sound, NativeModules, Video, MediaPlayerState, VideoControl, } from 'react-vr'; export default class MiproyectoVR extends React.Component { constructor(props) { super(props); this.state = { playerState: new MediaPlayerState({autoPlay: true, muted: false}), }; } render() { return ( <View> {/* <Sound source={{ mp3: asset('sonido.mp3'), }} autoPlay={false} /> /} <Pano source={asset('bg.jpg')} /> {/ <VrButton style={{width: 0.7,transform: [{translate: [0, 0, -3]}],layoutOrigin: [0.5, 0.9],}} onClick={() => NativeModules.LinkingManager.openURL('https://google.com/')}> <Image style={{width:1, height:1}} source={asset('fp.jpg')} inset={[0.2,0.2,0.2,0.2]} insetSize={[0.05,0.45,0.55,0.15]} > </Image> </VrButton> */} <Text style={{ backgroundColor: '#305b8e', fontSize: 0.8, fontWeight: '400', layoutOrigin: [0.5, 3.5], paddingLeft: 0.2, paddingRight: 0.2, textAlign: 'center', textAlignVertical: 'center', transform: [{translate: [0, 0, -7]}], borderRadius: 0.1, }}> Bienvenido </Text> <Video style={{ transform: [{translate: [0, 0, -7]}], width: 7.0, height: 3.6, layoutOrigin: [0.5, 0.9], }} source={{uri: '../static_assets/video.mp4'}} playerState={this.state.playerState} /> <VideoControl style={{height: 0.2, width: 4}} playerState={this.state.playerState} /> <VrButton style={{width: 1.7,transform: [{translate: [0, 0, -7]}],layoutOrigin: [1.65, 7.9],backgroundColor: '#444444',borderRadius: 0.1,}} onClick={() => NativeModules.LinkingManager.openURL('https://nubecolectiva.com/')}> <Text style={{ fontSize: 0.3, fontWeight: '400', paddingLeft: 0.2, paddingRight: 0.2, textAlign: 'center', textAlignVertical: 'center', }}> Home </Text> </VrButton> <VrButton style={{width: 1.7,transform: [{translate: [0, 0, -7]}],layoutOrigin: [0.5, 8.9],backgroundColor: '#444444',borderRadius: 0.1,}} onClick={() => NativeModules.LinkingManager.openURL('https://nubecolectiva.com/team.php')}> <Text style={{ fontSize: 0.3, fontWeight: '400', paddingLeft: 0.2, paddingRight: 0.2, textAlign: 'center', textAlignVertical: 'center', }}> Nosotros </Text> </VrButton> <VrButton style={{width: 1.7,transform: [{translate: [0, 0, -7]}],layoutOrigin: [-0.65, 9.9],backgroundColor: '#444444',borderRadius: 0.1,}} onClick={() => NativeModules.LinkingManager.openURL('https://nubecolectiva.com/contacts.php')}> <Text style={{ fontSize: 0.3, fontWeight: '400', paddingLeft: 0.2, paddingRight: 0.2, textAlign: 'center', textAlignVertical: 'center', }}> Contacto </Text> </VrButton> <Box dimWidth={2} dimDepth={2} dimHeight={1} style={{ color: '#444444', }} /> <Cylinder radiusTop={0.2} radiusBottom={0.2} dimHeight={2} segments={12} /> </View> ); } }; AppRegistry.registerComponent('MiproyectoVR', () => MiproyectoVR);

Compilando nuestro proyecto

Ejecutamos el siguiente comando para compilar nuestro proyecto:

npm run bundle

1 2 3	npm run bundle

Nos crea carpeta llamada ‘vr’ que contiene los archivos de nuestro proyecto.

Asimismo estos proyectos se pueden ver también en dispositivos móviles y lentes de realidad virtual increíble cierto ?

Notas

Algunos de los pasos mencionados pueden variar en futuras versiones de React VR, esto no depende de nosotros si no de los desarrolladores que dan soporte a React VR que cambian el orden de las opciones mencionadas, también suelen quitar o agregar nuevas funciones.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.