¿Dónde o cómo puedo aprender WebVR desde cero?

Answer 1

Mi equipo y yo hemos escrito un pequeño manual sobre cómo crear WebVR con ReactVR para los novatos. Estoy seguro de que sería interesante para usted:

React VR configuración del proyecto

Para hacer aplicaciones web de VR 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 denominamos TMExample para nuestro proyecto de aplicación React VR:

react-vr init TMEjemplo

Esto puede llevar algún tiempo, así que no te preocupes. Luego colocamos cd en nuestro directorio:

cd TMexample

Para comprobar si está funcionando, probamos un servidor local con:

npm start

Después de hacer todo esto, abra la siguiente URL en su navegador web: http: // localhost: 8081 / vr . Dale unos momentos para inicializar la aplicación, y deberías ver el entorno VR animado de esta manera:

Ahora puedes comenzar a crear tus propias aplicaciones de realidad virtual basadas en web con React VR. Vamos a explicar cómo construimos nuestra aplicación de gira VR simple.

Creación de un tour VR para web

La estructura del directorio de nuestra aplicación es la siguiente:

+ -nodo_módulos
+ -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 alberga 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,
Hoja de estilo,
Pano,
Texto,
Ver,
}
de ‘react-vr’;
La clase TMExample extiende React.Component {
render () {
regreso (

<Texto
estilo = {{
Color de fondo: ‘azul’,
Relleno: 0.02,
textoAlinear: ‘centro’,
textAlignVertical: ‘center’,
Tamaño de letra: 0,8,
layoutOrigin: [0.5, 0.5],
transformar: [{traducir: [0, 0, -3]}],
}}>
Hola

);
}
};
AppRegistry.registerComponent (‘TMExample’, () => TMExample);

Componentes VR en uso

Utilizamos el empaquetador React Native para el preprocesamiento, compilación, agrupación y carga de activos. En la función de render 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 resumir , 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 contenemos en la carpeta static_assets .

constructor (accesorios) {
super (props);
this.state = {
escenas: [{scene_image: ‘initial.jpg’, paso: 1, navegaciones: [{paso: 2, traductor: [0.73, -0.15,0.66], rotación: [0,36,0]}]},
{scene_image: ‘step1.jpg’, step: 2, navegaciones: [{step: 3, translate: [-0.43, -0.01,0.9], rotación: [0,140,0]}]},
{scene_image: ‘step2.jpg’, step: 3, navegaciones: [{step: 4, translate: [-0.4,0.05, -0.9], rotación: [0,0,0]}]},
{scene_image: ‘step3.jpg’, step: 4, navegaciones: [{step: 5, translate: [-0.55, -0.03, -0.8], rotación: [0,32,0]}]},
{scene_image: ‘step4.jpg’, step: 5, navegaciones: [{step: 1, translate: [0.2, -0.03, -1], rotación: [0,20,0]}]}],
current_scene: {},
Animación Ancho: 0.05,
animaciónRadio: 50
};
}

Luego, hemos cambiado la salida de las imágenes que las vinculan al estado , como se indicó anteriormente en el constructor.

<Pano source = {asset (this.state.current_scene ['scene_image'])}
estilo = {{
transformar: [{traducir: [0, 0, 0]}]
}} />

Botones de navegación

En cada escena, hemos colocado botones de transición para navegar dentro de un recorrido, tomando datos del estado . Suscribirse al evento onInput para transmitir el cambio entre escenas, vinculándolo también a él.

<Pano source = {asset (this.state.current_scene ['scene_image'])} onInput = {this.onPanoInput.bind (this)}
onLoad = {this.sceneOnLoad} onLoadEnd = {this.sceneOnLoadEnd}
style = {{transform: [{translate: [0, 0, 0]}]}} />
{this.state.current_scene [‘navegaciones’]. map (función (elemento, i) {
return <clave de malla = {i}
estilo = {{
layoutOrigin: [0.5, 0.5],
transform: [{translate: item [‘translate’]},
{rotateX: elemento [‘rotación’] [0]},
{rotateY: artículo [‘rotación’] [1]},
{rotateZ: artículo [‘rotación’] [2]}]
}}
onInput = {e => that.onNavigationClick (item, e)}>
<VrButton
estilo = {{ancho: 0.15,
altura: 0.15,
fronteraRadio: 50,
justificar contenido: ‘centro’,
alignItems: ‘center’,
borderStyle: ‘solid’,
borderColor: ‘# FFFFFF80’,
Ancho de la frontera: 0.01
}}>
<VrButton
style = {{width: that.state.animationWidth,
altura: that.state.animationWidth,
borderRadius: that.state.animationRadius,
color de fondo: ‘# FFFFFFD9’
}}>

})}

onNavigationClick (item, 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 ({type: “sceneLoadStart”})
}

sceneOnLoadEnd () {
postMessage ({type: “sceneLoadEnd”})
}
this.sceneOnLoad = this.sceneOnLoad.bind (this);
this.sceneOnLoadEnd = this.sceneOnLoadEnd.bind (this);
this.onNavigationClick = this.onNavigationClick.bind (this);

Animación de botones

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 botón, aplicando requestAnimationFrame convencional.

this.animatePointer = this.animatePointer.bind (this);
animatePointer () {
var delta = this.state.animationWidth + 0.002;
var radio = this.state.animationRadius + 10;
if (delta> = 0.13) {
delta = 0,05;
radio = 50;
}
this.setState ({animationWidth: delta, animationRadius: radio})
this.frameHandle = requestAnimationFrame (this.animatePointer);
}
componentDidMount () {
this.animatePointer ();
}
componentWillUnmount () {
if (this.frameHandle) {
cancelAnimationFrame (this.frameHandle);
this.frameHandle = null;
}
}

En la función componentWillMount hemos indicado la escena actual. Luego también nos suscribimos al evento de mensajes para el intercambio de datos con el hilo principal. Lo hacemos de esta manera debido a la necesidad de elaborar 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 (‘message’, this.onMainWindowMessage);
this.setState ({current_scene: this.state.scenes [0]})
}
onMainWindowMessage (e) {
interruptor (e.data.type) {
caso ‘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;
}
}
<Pano source = {asset (this.state.current_scene ['scene_image'])} onInput = {this.onPanoInput.bind (this)}
style = {{transform: [{translate: [0, 0, 0]}]}} />
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 el archivo completo index.vr.js en Github AQUÍ.

Archivo client.js

Avanzando en nuestro ejemplo de React VR de aplicaciones web de realidad virtual, hemos agregado el siguiente código en la función init . El objetivo es procesar los eventos ondblclick , onmousewheel y message , donde este último está en la secuencia 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 (‘message’, onVRMessage);

Hemos introducido la función onVRMessage para que el zoom vuelva a los valores predeterminados cuando cambian las escenas. Además, hemos agregado el cargador cuando se produce un cambio de escena.

función onVRMessage (e) {
interruptor (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 de VR web y se ve así:

función 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 ({type: “newCoordinates”, coordenadas: coordenadas});
}

Cambiar a la rueda del ratón

Hemos utilizado la función onRendererMouseWheel para cambiar el zoom a la rueda del ratón.

funcion onRendererMouseWheel () {
if (event.deltaY> 0) {
if (window.playerCamera.zoom> 1) {
window.playerCamera.zoom – = 0.1;
window.playerCamera.updateProjectionMatrix ();
}
}
else {
si (window.playerCamera.zoom <3) {
window.playerCamera.zoom + = 0.1;
window.playerCamera.updateProjectionMatrix ();
}
}
}

Exportando coordenadas

Luego hemos utilizado Three.js para trabajar con gráficos 3D. En este archivo solo hemos transmitido una función para exportar la pantalla coordinada a las 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 dir;
}

Vea y descargue el archivo client.js completo en Github AQUÍ. Probablemente no hay necesidad de explicar cómo funciona el archivo cameraHelper.js , ya que es muy simple, y puede descargarlo también.

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

¡Buena suerte!

Answer 2

Si estás interesado en aprender webVR a través de React VR, escribí un curso completo de Udemy sobre el tema.

Pasa por todos los elementos esenciales y lo lleva a través de 3 proyectos de ejemplo (una gira mundial, shapeGame y simulador de clima). Aprenderás todos los componentes principales y cómo hacer formas, animaciones, imágenes panorámicas y más.

Además, aprenderás React.js en el camino. ¡Es una excelente manera de introducirse en la realidad virtual con el desarrollo web y WebVR también!

¡Echale un vistazo! También incluí un descuento especial 🙂 React VR – Creación de aplicaciones de realidad virtual – Udemy

Answer 3

Si desea ver las versiones de JavaScript de Vanilla, consulte los ejemplos de Toji toji / webvr.info

¿La ventaja? Para aplicaciones pequeñas, descargará ~ 300k en lugar de ~ 2000k de código JS. Y para los dispositivos móviles, la ejecución de JS es un factor importante que ralentiza los sitios.

El costo de JavaScript – Dev Channel – Medio

Answer 4

Seguramente obtendrá mucha ayuda de A-Frame – Realice WebVR. Además, puede ver varios repositorios en GitHub. Si el campo realmente te excita ¡La imaginación es el límite del hombre!

Answer 5

Taller de webgl y webvr.Info. Mira la muestra webvr de toji