Comienza con WebVR

[dieciséis]

Para emular un dispositivo móvil o auricular, funciona mejor para usar la emulación del dispositivo en herramientas de cromo. Abra las herramientas del desarrollador en Chrome, y alternar en la barra de herramientas del dispositivo para ver la vista móvil, gire a horizontal y seleccione la emulación del teléfono favorito.

04. Crear un archivo HTML básico [sesenta y cinco]

A continuación, debe configurar un archivo HTML básico. Puede configurar CSS externos y archivos JavaScript o incluir en línea para simplificar. Three.js 'Renderer Class creará un & lt; lienzo & gt; elemento para ti. Agregue el siguiente código a su index.html expediente:

 & lt; html lang = "en" & gt;
& lt; cabeza y gt;
& lt; title & gt; Webvr Demo & Lt; / Title & GT;
& lt; meta charset = "UTF-8" & gt;
& lt; meta name = "viewport" content =
"Ancho = ancho de dispositivo, escala inicial =
1.0, usuario-escalable = no "& gt;
& lt; estilo & gt;
html, cuerpo {margen: 0; relleno: 0;
Desbordamiento: oculto; }
& lt; / estilo & gt;
& lt; / cabeza y gt;
& lt; cuerpo y gt;
& lt; script & gt;
// el código irá aquí
& lt; / script & gt;
& lt; / body & gt; 

05. Incluir clases de tres.js. [sesenta y cinco]

Incluya un enlace a la biblioteca Three.js en la cabeza de su archivo, ya sea alojada externamente, o la descargue desde el repositorio de Three.js. También necesitará la nueva clase de Clase WEBVR y BoxlineGeometry para este tutorial. Puedes encontrar la biblioteca y las clases de apoyo. aquí . Nota: El código en este tutorial se ha probado en la última versión de THE.JS V99.

 & lt; script src = "libs / three.min.js" & gt; / lt; / script & gt;
& lt; script src = "libs / webvr.js" & gt; & lt; / script & gt;
& lt; script src = "libs / boxlinegeomeome.js" & gt;
& lt; / script & gt; 

06. Añadir variables globales [sesenta y cinco]

Entre las etiquetas de script para el código, agregue las siguientes variables globales para acceder a la cámara, la escena, los rendimientos, los objetos y el raycaster. También agregue un PEGAR Variable para realizar un seguimiento de los objetos que se intersectan por la mirada de la cámara. Esto demostrará cómo saber qué está mirando un usuario en VR.

 var reloj = nuevo tres.clock ();
VAR Contenedor, Cámara, Escena, Renderista, Habitación,
Crosshair, golpeó;
var objetos = []; // colección de objetos
var num = 100; // Número de objetos
var raycaster = nuevo tres.raycaster (); 

07. Crea una escena 3D [sesenta y cinco]

Vas a agregar una escena 3D básica, que será el contenedor para sus objetos. La escena es la etapa que representará con la cámara. Todas las presentaciones en 3D tendrán una escena o etapa de algún formulario. Lo que está en esa etapa y en vista de la cámara es lo que verá el usuario. Agregue el siguiente código para agregar una escena:

 // Crea un objeto de escena
var escena = nuevo tres.scene (); 

08. Añadir una cámara en perspectiva [sesenta y cinco]

A continuación, necesitas agregar una cámara. Usará la cámara en perspectiva, destinada a escenas 3D. El primer atributo es el campo de la vista de la cámara. El segundo es la relación de aspecto ( Ancho / altura ). Luego, puede indicar el plano cercano de recorte y las distancias del plano de recortes lejanas, que definen lo que debe ser visible para la cámara.

 // Crea Cámara
cámara = nuevo tres.perpectiveCamera
(70, ventana.innerwid / window.innerheight,
0.1, 1000);
escena.add (cámara); 

09. Añadir un renderizador y elemento de lona. [sesenta y cinco]

El renderizador maneja el dibujo de los objetos en su escena que son visibles para la cámara. Establezca la propiedad antialias en fiel para obtener bordes suaves en el objeto. El renderizador crea un dominamiento , que en realidad es un HTML & lt; lienzo & gt; elemento. Luego puedes agregar al cuerpo. Tenga en cuenta el uso de la nueva bandera activada por VR del renderizador.

 Renderer = NUEVO TRES.WEBGLRENDERER (
{antialias: verdadero});
render.setpixelratio (ventana.
devicepixelratio);
render.setsize (ventana.innerwidth, ventana.
innerheight);
render.vr.enabled = verdadero;
Documento.body.appendchild (Renderer.
dominacion); 

10. Añadir cámara cruzada [sesenta y cinco]

Para ayudar a los usuarios a orientarse hacia el punto de enfoque de la cámara, es una buena práctica agregar un ícono de sierra o objetivo frente a la cámara. Puede agregarlo directamente al objeto de la cámara para que siempre sea donde debería serlo.

 Crosshair = Nuevo Three.Mesh (
Nuevo Three.RBUBUFFERGEOMETRY (0.02, 0.04, 32),
Nuevo Three.MeshBasicMaterial ({
Color: 0xFFFFFF,
Opacidad: 0.5,
transparente: cierto
})
)
crosshair.position.z = - 2;
cámara.add (Crosshair); 

11. Crea un objeto de habitación VR (opcional) [sesenta y cinco]

A continuación, cree un objeto de habitación simple. Esto es bueno para darle al usuario un sentido de orientación en el mundo VR. Crea una caja de habitación sencilla con líneas para indicar las paredes, el piso y el techo.

 Room = NUEVO TRES.LEESEGMENTOS (
Nuevo Tres.boxEtraometría (6, 6, 6, 10, 10, 10),
NUEVO TRES.LINEBASICMATERALIAL ({COLOR:
0x808080}));
room.position.y = 2;
escena.add (habitación); 

12. Añadir luces a la escena. [sesenta y cinco]

Para encender la escena, usaremos una luz simple hemisferio y una luz direccional. Le dará una bonita visibilidad ambiental y un sombreado realista de una fuente de luz uniforme también.

 SCENE.ADD (Nuevo Three.Hemispherightight
(0x806060, 0x404040));
var luz = new three.directionallight
(0xFFFFFF);
luz.position.set (1, 1, 1) .normalizar ();
escena.add (luz); 

13. Crea algunos objetos. [sesenta y cinco]

Vas a llenar la habitación con objetos a continuación. Aplícalos al azar alrededor de la habitación. También establecerá la rotación y la escala al azar para la variedad. Puedes agregar un poco más de código en el siguiente paso, donde dice crear atributos de órbita para habilitar algunas rutas de órbita personalizada.

 var geometría = nuevo tres.boxbuffereometría
(0.15, 0.15, 0.15);
para (i = 0; i & lt; = num; i ++) {
vario var = nuevo tres.meshlambertmaterial
({color: math.random () * 0xffffff});
var objeto = nuevo tres.mesh
(geometría, material);
objeto.position.set (math.random () * 4.0
- 2.0, matemath.random () * 4.0 - 2.0, matemáticas.
aleatorio () * 4.0 - 2.0);
objeto.scale.set (math.random () +. 5, matemáticas.
aleatorio () +. 5, math.random () +. 5);
objeto.rotation.set (math.random () * 2 *
Math.pi, math.random () * 2 * math.pi, matemáticas.
aleatorio () * 2 * math.pi);
// crear atributos de órbita} 

14. Añadir los atributos de órbita a los objetos. [sesenta y cinco]

Para habilitar un buen movimiento de órbita aleatoria, y mantener los objetos de 'escapar de la habitación', asignaremos algunos datos de ángulo inicial (en radianes) y una distancia. Permite una forma sencilla de animar los objetos en el bucle de renderizado después.

 // Crear atributos de órbita
// Distancia de Calc como constante y asignar a
objeto
var a = nuevo tres.vector3 (0, 0, 0);
var b = objeto.position;
var d = a.distanceto (b);
objeto.distance = d;
objeto.radians = math.random () * 360 * Matemáticas.
PI / 180; // ángulo inicial
objeto.radians2 = math.random () * 360 * Matemáticas.
PI / 180; // ángulo inicial
objeto.radians3 = math.random () * 360 * Matemáticas.
PI / 180; // ángulo inicial
sala.add (objeto);
objetos.push (objeto); 

15. Añadir una ventana Cambiar el manipulador [sesenta y cinco]

Mientras probamos nuestra aplicación WEBVR, cambiaremos el tamaño de la pantalla, moviéndolo, y así sucesivamente. Es una buena idea tener un manejador que ajuste las dimensiones del área de render y actualiza cosas para mantenerlo llenando la pantalla correctamente y se ve bien.

 ventana.addeventlistener ('tamaño de tamaño',
onewindowresize, falso);
función onwindowresize () {
Cámara.aspect = window.innerwidth / ventana.
inernheight;
camera.UpdateProyZYMAYMATRIX ();
renderer.setsize (ventana.innerwidth,
ventana.innerheight);
} 

16. Crea el botón WEBVR. [sesenta y cinco]

Imagen 1 de 2

[dieciséis] MODO NO VR

La nueva clase de WebVR de tres.js incluye un botón WEBVR, que maneja alternar y salir del modo VR para nosotros. También se maneja si el dispositivo no admite el modo VR. Puedes incluirlo con este simple código:

 // Three.js Botón webvr para entrar /
Salir del modo VR
Documento.body.appendchild (webvr.createbutton
(renderizador)); 

17. Iniciar el bucle de animación VR [sesenta y cinco]

Típicamente, estarías usando el solicitud de solicitud Para manejar el bucle de renderizado, pero en VR debe usar un controlador de bucle diferente para asegurarse de que todo esté listo para representar y que evite las cuestiones de latencia y renderizar. En su lugar, usa el nuevo setanimationloop y pasar en su función de renderizado.

 // Iniciar el bucle de animación VR
render.setanimationloop (render); 

18. Crea la función de renderizado. [sesenta y cinco]

A continuación, cree una función de renderizado. Si no quiso animar sus objetos o prueba para la cámara / cruzada que se intersecina con objetos, podría usar el siguiente código:

 Función Render () {
// encontrar intersecciones
// animar los objetos
// Render la escena
render.render (escena, cámara);
} 

19. Prueba de intersecciones. [sesenta y cinco]

Para habilitar las pruebas para los objetos que se cruzan el rayo trazado de la cámara en el espacio z, agregue el siguiente código a su bucle de renderizado donde lo comentó en el último paso:

 RayCaster.SetFromCamera ({X: 0, Y: 0},
cámara);
var intersecta = raycaster.intersectobjects
(Room.Children);
if (intersects.length & gt; 0) {
Si (golpee! = se intersecta 
 .Object) {
Si (golpe) {hit.material.missive.
sethex (hit.currenthex); }
HIT = Intersige 
 .Object;
Hit.currenthex = hit.material.missive.
gethex ();
Hit.material.emissive.sethex (0x00ff00);
}
} demás {
if (hit) {hit.material.emissive.sethex
(Hit.currenthex); }
Golpear = indefinido;
} 

20. Animar objetos a lo largo de las órbitas. [sesenta y cinco]

A continuación, puede animar sus objetos a lo largo de sus rutas de órbita utilizando este código:

 para (i = 0; i & lt; = num; i ++) {
var o = objetos [i];
o.Rotation.y + =. 01;
Si (I% 2 == 0) {
O.RADIANS + =. 004;
o.Radians2 + =. 005;
O.RADIANS3 + =. 008;
} demás {
O.RADIANS - =. 006;
O.RADIANS2 - =. 005;
O.RADIANS3 - =. 003;
}
o.position.x = (math.cos (O.RADIANS) *
o.distance);
o.position.z = (mathsin (O.RADIANS3) *
o.distance);
o.position.y = (mathsin (O.RADIANS2) *
o.distance * .5);
} 

21. Renderizar la escena webvr. [sesenta y cinco]

Finalmente, puede hacer su escena utilizando las funciones de renderización constantemente. Si aún no ha agregado esta línea, hágalo ahora. Una vez que haya agregado esto, puede probarlo todo y debe ver una reproducción de escena WEBVR en su navegador. También puede verlo en su dispositivo móvil o auriculares VR.

 // Render la escena
render.render (escena, cámara); 

Recursos webvr

Comenzar en WebVR puede ser abrumador. Hemos reunido algunos ejemplos de sitios que utilizan WebVR y recursos para ayudarlo a rodar.

Boceto
Probablemente ya sepa este sitio debido a su increíble galería de activos, pero también tiene un modo de WebVV que le permite navegar en VR.

Un cuadro
Este es un marco de rock-sólido para AR y VR. Maneja los dolores de los falgos y el soporte de dispositivos para usted, incluso lo que le permite prestarle en su navegador para las pruebas. Incluso se abstrae la creación de objetos 3D comunes.

Tres.js
Esta biblioteca tiene numerosos. ejemplos Con código fuente para ayudarlo a ir con WEBVR. Es un punto de partida perfecto.

WebVR
Dado que WebVR es una tecnología emergente, es una buena idea mantenerse al día con los últimos desarrollos. Debe saber qué dispositivos son compatibles y en qué condiciones. Este sitio te ayudará a mantenerse al día. Hay una Página dedicada a los ejemplos. , también.

Y siempre ayuda a tener el derecho. almacenamiento en la nube , también.

Este artículo se publicó originalmente en cuestión 283 de la revista Creative Web Design Design Diseñador web . Comprar emito 283 o suscribir .

Leer más:

• 7 Tendencias VR de Bonkers que se dirigen a tu manera
• Empiece con Redux Thunk
• 11 tendencias web en caliente ahora mismo