¿Cómo desarrollar un software para crear recorridos virtuales? ¿Cuáles son los requisitos previos para el mismo Desarrollador de registros, desarrollo de aplicaciones

Te sugiero que uses el marco ReactJS para ese propósito.

Aquí están los requisitos técnicos para su proyecto.

Requerimientos técnicos

¿Se puede desarrollar una aplicación que permita al usuario jugar juegos de forma remota (transmisión) a través de otra computadora?
¿Cuál es el mejor proveedor de SMS salientes?
Habíamos planeado una puesta en marcha, necesitamos un desarrollador de aplicaciones para nuestra startup, ¿hay algún desarrollador loco por ahí?
¿Existe un caso para aplicaciones de escritorio de interfaz de usuario nativas, con escritorio multiplataforma, por ejemplo? con NW.js, React) ahora como una opción? (ej. velocidad)
Cómo ponerse en contacto con desarrolladores de aplicaciones en India

Para crear una aplicación React VR, primero debe tener Node.js instalado. Este entorno JavaScript potencia la compilación de código y la ejecución de un servidor local. También se necesita NPM , un administrador de paquetes de Node.js con muchas bibliotecas y código reutilizable. Three.js como posible biblioteca 3D adicional.

Con las API WebVR y WebGL podemos renderizar imágenes en 3D dentro de un navegador web. Para crear o ver aplicaciones web de realidad virtual, no necesita dispositivos o auriculares especiales de realidad virtual. Lo que necesita junto con React VR para crear aplicaciones web es:

Una PC / laptop en Windows
Un navegador compatible
Una última versión de Node.js
Un auricular VR (opcional)

¿Cuáles son los navegadores web VR compatibles?

Chrome para Android / iOS y Windows
Firefox Nightly
Carmel VR, un navegador web VR de Oculus
Navegador Samsung para Gear VR
WebVR Polyfill para dispositivos Google Cardboard

El marco React VR generalmente se distribuye de esta manera: React VR> React runtime> OVRUI> Three.js> WebVR y navegador . OVRUI, por cierto, es una biblioteca que ayuda con tipos geométricos y objetos para construir interfaces de usuario para aplicaciones web de realidad virtual.

Y aquí están las instrucciones sobre cómo desarrollar la aplicación React VR hecha por mi equipo durante el proceso de desarrollo:

Reaccionar configuración del proyecto VR

Para hacer aplicaciones web de realidad virtual como nuestro ejemplo React VR primero tenemos que hacer una configuración corta con las herramientas proporcionadas por Oculus. Para comenzar, instalamos la herramienta React VR CLI usando NPM:
  npm install -g react-vr-cli
Con él creamos un nuevo directorio para la aplicación web y lo nombramos TMExample para nuestro proyecto de aplicación React VR:
  react-vr init TM Ejemplo
Esto puede llevar algún tiempo, así que no te preocupes. Luego colocamos cd en nuestro directorio:
  cd TMExample 
Para verificar si funciona, probamos un servidor local con:
  npm start
Una vez hecho todo esto, abra la siguiente URL en su navegador web: http: // localhost: 8081 / vr . Déle unos minutos para inicializar la aplicación, y debería ver el entorno animado de realidad virtual como este:

Ahora está listo para crear sus propias aplicaciones de realidad virtual basadas en la web con React VR. Expliquemos cómo creamos nuestra sencilla aplicación de tour VR.

Crear un recorrido de realidad virtual para web

La estructura del directorio de nuestra aplicación es la siguiente:
  + -node_modules
 + -static_assets
 + -vr
 \ -. gitignore
 \ -. watchmanconfig
 \ -index.vr.js
 \ -package.json
 \ -postinstall.js
 \ -rn-cli-config.js
El código de una aplicación web estaría en el archivo index.vr.js , mientras que el directorio static_assets aloja recursos externos (imágenes, modelos 3D). Puede obtener más información sobre cómo comenzar con el proyecto React VR aquí. El archivo index.vr.js contiene lo siguiente:
  importar Reaccionar desde 'reaccionar';
 importar {
      AppRegistry,
      activo,
      StyleSheet,
      Pano,
      Texto,
      Ver,
 }
 de 'react-vr';
 clase TMExample extiende React.Component {
      render () {
           regreso (
            
           
                
                Hola
               
           
           );
      }
 };
 AppRegistry.registerComponent ('TMExample', () => TMExample);
Componentes de realidad virtual en uso

Usamos React Native packager para el preprocesamiento de código, compilación, agrupación y carga de activos. En la función de representación hay componentes de vista, panorámica y texto . Cada uno de estos componentes React VR viene con un atributo de estilo para ayudar a controlar el diseño.

Para concluir, verifique que el componente raíz se registre con AppRegistry.registerComponent , que agrupa la aplicación y la prepara para ejecutarse. El siguiente paso para resaltar en nuestro proyecto React VR es compilar 2 archivos principales.

Archivo Index.vr.js

En el constructor hemos indicado los datos para la aplicación VR Tour. Estas son imágenes de escenas, botones para cambiar entre escenas con coordenadas XYZ, valores para animaciones. Todas las imágenes que contiene en la carpeta static_assets .
  constructor (accesorios) {
      super (accesorios);
     this.state = {
       escenas: [{scene_image: 'initial.jpg', paso: 1, navegaciones: [{step: 2, traducir: [0.73, -0.15,0.66], rotación: [0,36,0]}]},
                {scene_image: 'step1.jpg', paso: 2, navegaciones: [{step: 3, traducir: [-0.43, -0.01,0.9], rotación: [0,140,0]}]},
                {scene_image: 'step2.jpg', paso: 3, navegaciones: [{step: 4, traducir: [-0.4,0.05, -0.9], rotación: [0,0,0]}]},
                {scene_image: 'step3.jpg', paso: 4, navegaciones: [{step: 5, traducir: [-0.55, -0.03, -0.8], rotación: [0,32,0]}]},
                {scene_image: 'step4.jpg', paso: 5, navegaciones: [{step: 1, traducir: [0.2, -0.03, -1], rotación: [0,20,0]}]}],
       current_scene: {},
       animationWidth: 0.05,
       animaciónRadio: 50
       };
 }
Luego, hemos cambiado la salida de las imágenes que las vinculan al estado , previamente indicado en el constructor.
  
     
 
Botones de navegación

En cada escena hemos colocado botones de transición para la navegación dentro de un recorrido, tomando datos del estado . Suscribiéndose al evento onInput para transmitir el cambio entre escenas, vinculando esto también.
  
         
         {this.state.current_scene ['navigations']. map (function (item, i) {
               return  that.onNavigationClick (item, e)}>
                               
                                      
                                      
       
     
           })}
       
 onNavigationClick (elemento, e) {
      if (e.nativeEvent.inputEvent.eventType === "mousedown" && e.nativeEvent.inputEvent.button === 0) {
           var new_scene = this.state.scenes.find (i => i ['step'] === item.step);
           this.setState ({current_scene: new_scene});
           postMessage ({type: "sceneChanged"})
      }
 }
 sceneOnLoad () {
     postMessage ({tipo: "sceneLoadStart"})
   }

   sceneOnLoadEnd () {
     postMessage ({type: "sceneLoadEnd"})
   }
 this.sceneOnLoad = this.sceneOnLoad.bind (this);
 this.sceneOnLoadEnd = this.sceneOnLoadEnd.bind (this);
 this.onNavigationClick = this.onNavigationClick.bind (this);
Botón de animación

A continuación, mostraremos el código para las animaciones de los botones de navegación. Hemos creado animaciones sobre el principio de aumento de botones, aplicando requestAnimationFrame convencional.
  this.animatePointer = this.animatePointer.bind (this);
 animatePointer () {
 var delta = this.state.animationWidth + 0.002;
 radio var = this.state.animationRadius + 10;
 if (delta> = 0.13) {
 delta = 0.05;
 radio = 50;
 }
 this.setState ({animationWidth: delta, animationRadius: radius})
 this.frameHandle = requestAnimationFrame (this.animatePointer);
 }
 componentDidMount () {
 this.animatePointer ();
 }
 componentWillUnmount () {
 if (this.frameHandle) {
 cancelAnimationFrame (this.frameHandle);
 this.frameHandle = nulo;
 }
 }
                
En la función componentWillMount hemos indicado la escena actual. Luego también nos hemos suscrito al evento de mensaje para el intercambio de datos con el hilo principal. Lo hacemos de esta manera debido a la necesidad de resolver un componente React VR en un hilo separado.

En la función onMainWindowMessage solo procesamos un mensaje con la clave newCoordinates . Más adelante explicaremos por qué lo hacemos. Del mismo modo, nos hemos suscrito al evento onInput para transmitir giros de flecha.
  componentWillMount () {
      window.addEventListener ('mensaje', this.onMainWindowMessage);
      this.setState ({current_scene: this.state.scenes [0]})
 }
 onMainWindowMessage (e) {
      switch (e.data.type) {
           case 'newCoordinates':
                var scene_navigation = this.state.current_scene.navigations [0];
                this.state.current_scene.navigations [0] ['translate'] = [e.data.coordinates.x, e.data.coordinates.y, e.data.coordinates.z]
                this.forceUpdate ();
           descanso;
      defecto:
           regreso;
      }
 }
 
 rotatePointer (nativeEvent) {
      switch (nativeEvent.keyCode) {
            caso 38:
                  this.state.current_scene.navigations [0] ['rotación'] [1] + = 4;
            descanso;
            caso 39:
                  this.state.current_scene.navigations [0] ['rotación'] [0] + = 4;
            descanso;
            caso 40:
                  this.state.current_scene.navigations [0] ['rotación'] [2] + = 4;
            descanso;
            defecto:
                  regreso;
      }
      this.forceUpdate ();
 }
Los giros de flecha se realizan con las teclas ↑ → ↓ alt, para los ejes YXZ respectivamente.

Vea y descargue todo el archivo index.vr.js en Github AQUÍ.

Archivo Client.js

Avanzando en nuestro ejemplo React VR de aplicaciones web de realidad virtual, hemos agregado el siguiente código en la función init . El objetivo es el procesamiento de ondblclick , onmousewheel y eventos de mensajes , donde este último se encuentra en la cadena de procesamiento para intercambios de mensajes. Además, hemos mantenido un enlace a los objetos vr y vr.player._camera .
  window.playerCamera = vr.player._camera;
 window.vr = vr;
 window.ondblclick = onRendererDoubleClick;
 window.onmousewheel = onRendererMouseWheel;
 vr.rootView.context.worker.addEventListener ('mensaje', onVRMessage);
Hemos introducido la función onVRMessage para que el zoom vuelva al valor predeterminado cuando cambian las escenas. Además, hemos agregado el cargador cuando se produce un cambio de escena.
  funcion onVRMessage (e) {
      switch (e.data.type) {
           caso 'sceneChanged':
                if (window.playerCamera.zoom! = 1) {
                     window.playerCamera.zoom = 1;
                     window.playerCamera.updateProjectionMatrix ();
                }
           descanso;
           caso 'sceneLoadStart':
              document.getElementById ('loader'). style.display = 'block';
           descanso;
           caso 'sceneLoadEnd':
              document.getElementById ('loader'). style.display = 'none';
           descanso;
           defecto:
                regreso;
      }
 }
Función onRendererDoubleClick para el cálculo de coordenadas 3D y el envío de mensajes al componente vr para cambiar las coordenadas de flecha. La función get3DPoint es personalizada para nuestra aplicación web VR y se ve así:
  function onRendererDoubleClick () {
     var x = 2 * (event.x / window.innerWidth) - 1;
     var y = 1 - 2 * (event.y / window.innerHeight);
     coordenadas var = get3DPoint (window.playerCamera, x, y);
     vr.rootView.context.worker.postMessage ({tipo: "newCoordinates", coordenadas: coordenadas});
 }
Cambiar a la rueda del mouse

Hemos utilizado la función onRendererMouseWheel para cambiar el zoom a la rueda del mouse.
  function onRendererMouseWheel () {
      if (event.deltaY> 0) {
           if (window.playerCamera.zoom> 1) {
                window.playerCamera.zoom - = 0.1;
                window.playerCamera.updateProjectionMatrix ();
           }
      }
      más {
           if (window.playerCamera.zoom <3) {
                window.playerCamera.zoom + = 0.1;
                window.playerCamera.updateProjectionMatrix ();
           }
      }
 }
Exportar coordenadas

Luego, hemos utilizado Three.js para trabajar con gráficos en 3D. En este archivo solo hemos transmitido una función para exportar la pantalla coordinada a coordenadas mundiales.
  importar * como TRES de 'tres';
 función de exportación get3DPoint (cámara, x, y) {
     var mousePosition = new THREE.Vector3 (x, y, 0.5);
     mousePosition.unproject (cámara);
     var dir = mousePosition.sub (camera.position) .normalize ();
     dir de retorno;
 }
Vea y descargue todo el archivo client.js en Github AQUÍ. Probablemente no haya necesidad de explicar cómo funciona el archivo cameraHelper.js , ya que es simple y puede descargarlo también.

Si está interesado en una estimación aproximada del proyecto como este, le recomiendo que lea este interesante artículo:

¿Cuánto cuesta crear la aplicación React VR de muestra?