Comece com o WebVR

O WebVR é uma API JavaScript para criar experiências 3D de realidade virtual no navegador. Isso requer baixa latência, alta taxa de quadros e excelente desempenho. Seu objetivo é tornar mais fácil para alguém entrar em experiências de VR abaixando as barreiras à entrada.

A WebGL permite que os desenvolvedores criem experiências ricas e de qualidade de console que rendem em tempo real em dispositivos móveis e navegadores de desktop (apenas certifique-se de obter o hospedagem na web. direito para uma capacidade ideal). O suporte quase universal de navegador e dispositivo torna uma abordagem perfeita para os desenvolvedores da Web que querem criar experiências de VR incríveis. Aqui, mostramos como começar com o WebVR. Na parte inferior deste artigo, você encontrará alguns recursos úteis para promover seu conhecimento.

Em nosso tutorial, estaremos usando o WebVR em combinação com três.js. - uma opção de efeito dos muitos Web Design Tools. Disponível para 3D e VR na web. É livre e open source, leve e inúmeras sites premiados usá-lo. Além de ter um fundo javascript, você pode mergulhar neste tutorial sem conhecimento prévio e criar sua primeira experiência no webvr. O objetivo deste tutorial é começar e inspirar você a continuar explorando essa tecnologia muito emocionante. Quer algo mais simples? Tente A. Construtor de sites .

• Baixe os arquivos para este tutorial do FilesILo

01. Ativar a bandeira do WebVR no Chrome

O WebVR ainda é uma tecnologia experimental e requer HTTPS para executar seu servidor. Não será executado em dispositivos móveis sem um polyfill.github.com/immersive-web/webvr-polyfill. . No entanto, você pode executar conteúdo localmente em cromo para testes e construir. Certifique-se de ativar o sinalizador WebVR do Chrome. Modelo Chrome: // flags / ativar-webvr em seu navegador de URL e, em seguida, clique em Ativar para ativá-lo. Você pode precisar reiniciar o Chrome também.

02. Instale o plugin de emulação da API da WebVR

Para testar localmente na sua área de trabalho e evitar a necessidade de um dispositivo, há um ótimo plugin que você pode usar no Chrome pelo ClickPorelease. O plugin irá imitar um Fone de ouvido VR. para você e permitir que você mova e gire o fone de ouvido virtualmente ( venha aqui ).

03. Barra de ferramentas de dispositivo aberto em ferramentas de desenvolvedor

Para emular um dispositivo móvel ou fone de ouvido, funciona melhor para usar a emulação do dispositivo em ferramentas cromadas. Abra as ferramentas do desenvolvedor no Chrome e alterne na barra de ferramentas do dispositivo para ver a visualização móvel, gire para paisagem e selecione emulação de telefone favorita.

04. Crie um arquivo HTML básico

Em seguida, você precisa configurar um arquivo HTML básico. Você pode configurar arquivos CSS e JavaScript externos ou incluir na simplicidade. A classe de renderer de três.js irá criar um & lt; lona & gt; elemento para você. Adicione o seguinte código ao seu index.html. Arquivo:

 & lt; html lang = "en" & gt;
& lt; head & gt;
& lt; title & gt; webvr demo & lt; / title & gt;
& lt; meta charset = "utf-8" & gt;
& lt; meta nome = "viewport" conteúdo =
"Largura = largura de dispositivo, escala inicial =
1.0, User-Scalable = No "& GT;
& lt; estilo & gt;
HTML, corpo {margem: 0; preenchimento: 0;
estouro: oculto; }
& lt; / style & gt;
& lt; / head & gt;
& lt; corpo e gt;
& lt; script & gt;
// código irá aqui
& lt; / script & gt;
& lt; / corpo e gt; 

05. Incluir aulas de três.js

Inclua um link para a biblioteca de três.js na cabeça do seu arquivo - hospedado externamente ou faça o download do repositório de três.js. Você também precisará da nova classe webvr e boxlineogometry para este tutorial. Você pode encontrar a biblioteca e aulas de apoio aqui . Nota: O código neste tutorial foi testado no último lançamento de três.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 / boxlinegeometry.js" & gt;
& lt; / script & gt; 

06. Adicionar variáveis ​​globais

Entre as tags de script para o código, adicione as seguintes variáveis ​​globais para acessar globalmente a câmera, cena, renderizadores, objetos e raycaster. Também adicionar A. ACERTAR Variável para acompanhar objetos que são intersecionados pelo olhar da câmera. Isso demonstrará como saber o que um usuário está olhando em VR.

 Var relógio = novo três.clock ();
Var recipiente, câmera, cena, renderizador, sala,
Crosshair, atingido;
var objetos = []; // coleção de objetos
var num = 100; // número de objetos
var raycaster = novo três.raio (); 

07. Crie uma cena 3D

Você vai adicionar uma cena 3D básica, que será o contêiner para seus objetos. A cena é o palco que vai renderizar com a câmera. Todas as apresentações 3D terão uma cena ou fase de alguma forma. O que é nesse estágio e em vista da câmera é o que o usuário verá. Adicione o seguinte código para adicionar uma cena:

 // crie um objeto de cena
varena var = nova três.scene (); 

08. Adicione uma câmera de perspectiva

Em seguida, você precisa adicionar uma câmera. Você usará a câmera de perspectiva, significava para cenas 3D. O primeiro atributo é o campo de visão da câmera. A segunda é a proporção ( largura altura ). Então você pode indicar o próximo avião de recorte e as distâncias do plano de recorte distante, que definem o que deve ser visível para a câmera.

 // criar câmera
Câmera = New Three.persPectivecamera
(70, janela.ingwidth / window.InnerHeight,
0,1, 1000);
cena.add (câmera); 

09. Adicione um renderizador e elemento de lona

O renderizador lida com o desenho dos objetos em sua cena que são visíveis para a câmera. Defina a propriedade Antialias como true para obter bordas suaves no objeto. O renderizador cria um Domelement. , que é realmente um html & lt; lona & gt; elemento. Você pode então acrescentar ao corpo. Observe o uso do novo sinalizador habilitado para VR do renderizador.

 Renderer = New Three.Webglrenderer (
{Antialias: True});
renderer.setpixelratio (janela.
DevicePixelratio);
renderer.setsize (janela.ingwidth, janela.
innerheight);
renderer.vr.enabled = true;
Documento.Body.AppendChild (renderizador.
Domeleamento); 

10. Adicione a Crosshair da câmera

Para ajudar os usuários a orientar ao ponto de foco da câmera, é uma boa prática adicionar uma cruz ou segmentação ícone na frente da câmera. Você pode adicioná-lo diretamente ao objeto da câmera, por isso é sempre onde deveria ser.

 Crosshair = novo três.mesh (
New Three.ringBuffergeometry (0,02, 0,04, 32),
novo três.meshbasicmaterial ({
Cor: 0xffffff
Opacidade: 0,5,
Transparente: True.
})
);
crosshair.position.z = - 2;
câmera.add (Crosshair); 

11. Crie um objeto de quarto VR (opcional)

Em seguida, crie um objeto de quarto simples. Isso é bom dar ao usuário uma sensação de orientação no mundo do VR. Ele cria uma caixa de quarto simples com linhas para indicar as paredes, chão e teto.

 quarto = novos três.linescimentos (
New Three.boxLeometry (6, 6, 6, 10, 10, 10),
novo três.LineBasicMaterial ({cor:
0x808080}));
sala.Posição.Y = 2;
cena.add (quarto); 

12. Adicione luzes à cena

Para acender a cena, usaremos uma simples luz do hemisfério e uma luz direcional. Vai dar uma visibilidade ambiente agradável e algum sombreamento realista de uma fonte de luz uniforme também.

 cena.add (Novo Three.Hemispherelight
(0x806060, 0x404040));
var leve = novo três.DirectionAllight
(0xfffff);
Light.Position.set (1, 1, 1) .Normalize ();
cena.add (luz); 

13. Crie alguns objetos

Você vai encher a sala com objetos em seguida. Aplique-os aleatoriamente ao redor da sala. Você também definirá a rotação e a escala aleatoriamente para a variedade. Você pode adicionar um pouco mais código na próxima etapa, onde diz Criar atributos de órbita. para ativar alguns caminhos de órbita personalizados.

 var geometria = novo três.boxbuffergeometry
(0,15, 0,15, 0,15);
para (i = 0; i & lt; = num; i ++) {
Var material = novo três.meshlambertmaterial
({cor: math.random () * 0xfffff});
Var objeto = novo três.mesh
(geometria, material);
object.position.set (math.random () * 4.0
- 2.0, math.random () * 4.0 - 2.0, matemática.
aleatório () * 4.0 - 2.0);
objeto.scale.set (math.random () +. 5, matemática.
aleatório () +. 5, math.random () +. 5);
objeto.rotation.set (math.random () * 2 *
Math.pi, math.random () * 2 * math.pi, matemática.
aleatório () * 2 * math.pi);
// Criar atributos de órbita} 

14. Adicione atributos de órbita aos objetos

Para permitir algum bom movimento orbitante aleatório, e para manter os objetos "escapando da sala", atribuiremos alguns dados de ângulo iniciais (em radianos) e uma distância. Ele permite uma maneira simples de animar os objetos no loop de renderização após.

// criar atributos de órbita
// Calc distância como constante e atribuído a
objeto
var A = novo três.Vector3 (0, 0, 0);
var b = object.position;
var d = a.distanceto (b);
objeto.Distance = D;
objeto.Radians = math.random () * 360 * matemática.
Pi / 180; // ângulo inicial
objeto.Radians2 = math.random () * 360 * matemática.
Pi / 180; // ângulo inicial
objeto.Radians3 = math.random () * 360 * matemática.
Pi / 180; // ângulo inicial
sala.add (objeto);
objetos.push (objeto); 

15. Adicione uma janela Redimension

À medida que testamos nosso aplicativo WebVR, estaremos redimensionando a tela, movendo-a e assim por diante. É uma boa ideia ter um manipulador que ajusta as dimensões da área de renderização e atualiza as coisas para mantê-lo enchendo a tela corretamente e parecendo bom.

 janela.addeventListener ('redimensionar',
onwindowresize, falso);
função onwindowsize () {
câmera.aspect = window.ingwidth / window.
innerheight;
câmera.updateprojectionmatrix ();
renderer.setsize (janela.ingwidth,
janela.innerheight);
} 

16. Crie o botão WebVR

A nova classe WebVr de três.js inclui um botão WebVR, que lida de alternar e fora do modo VR para nós. Também lida se o dispositivo não suportar o modo VR. Você pode incluí-lo com este simples código:

 // três.js webvr para entrar /
Saia do modo VR.
document.body.appendchild (WebVr.CreateButton.
(renderizador)); 

17. Inicie o loop de animação VR

Normalmente, você estaria usando o requiranimationframe. Para lidar com o loop de renderização, mas em VR você tem que usar um manipulador de loop diferente para garantir que tudo esteja pronto para renderizar e que você evite assuntos de latência e renderização. Em vez disso, use o novo setanimationloop. e passe na sua função de renderização.

 // Inicie o loop de animação VR
renderer.setanimationloop (renderização); 

18. Crie a função de renderização

Em seguida, crie uma função de renderização. Se você não quisesse animar seus objetos ou testar a câmera / crosshair se cruzando com objetos, você pode usar o seguinte código:

 Função Render () {
// encontrar interseções
// Anime os objetos
// renderize a cena
renderer.render (cena, câmera);
} 

19. Teste de interseções

Para ativar o teste de objetos que intersejam o raio rastreado da câmera no espaço Z, adicione o seguinte código ao seu loop de renderização onde você o comentou no último passo:

 Raycaster.setFromCamera ({x: 0, y: 0},
Câmera );
var intersecte = raycaster.intersectObjects
(quarto.Children);
if (intersecte.length & gt; 0) {
Se (hit! = interseção 
 .bject) {
se (hit) {hit.material.emissive.
SETHEX (hit.currenthex); }
Hit = intersecte 
 .bject;
Hit.currenthex = hit.material.emissive.
GetHex ();
Hit.material.emissive.sethex (0x00ff00);
}
} outro {
if (hit) {hit.material.emissive.sethex
(Hit.currenthex); }
Hit = indefinido;
} 

20. Animar objetos ao longo de órbitas

Em seguida, você pode animar seus objetos ao longo de seus caminhos de órbita usando este código:

 para (i = 0; i & lt; = num; i ++) {
var o = objetos [i];
o.rotation.y + = 01;
if (i% 2 == 0) {
O.Radians + =. 004;
O.Radians2 + =. 005;
O.Radians3 + =. 008;
} outro {
O.Radians - =. 006;
O.Radians2 - =. 005;
O.Radians3 - =. 003;
}
o.Position.x = (math.co (O.Radians) *
O.Distance);
O.POSITION.Z = (math.sin (O.Radians3) *
O.Distance);
o.Position.y = (math.sin (O.Radians2) *
O.Distance * .5);
} 

21. Renderize a cena do webvr

Finalmente, você pode renderizar sua cena usando as funções de renderização de uso consolor. Se você ainda não adicionou essa linha, faça agora. Depois de adicionado isso, você pode testá-lo tudo e deve ver uma renderização da cena do WebVR no seu navegador. Você também pode verificar no seu dispositivo móvel ou fone de ouvido VR.

 // Renderize a cena
renderer.render (cena, câmera); 

Recursos do WebVr.

Começar no WebVR pode ser esmagadora. Montamos alguns exemplos de sites usando o WebVR e recursos para ajudá-lo a obter rolagem.

Sketchfab.
Você provavelmente já conhece este site por causa de sua incrível galeria de ativos, mas também tem um modo WebVR que permite navegar no VR.

Um quadro
Esta é uma estrutura sólida-sólida para AR e VR. Ele lida com as dores de fallbacks e suporte a dispositivos para você, incluindo permitindo que você renderize no seu navegador para testes. Até resumula a criação de objetos 3D comuns.

Três.js.
Esta biblioteca tem numerosos exemplos com o código-fonte para ajudá-lo a ir com o WebVR. É um ponto de partida perfeito.

WebVR.
Como o WebVR é uma tecnologia emergente, é uma boa ideia acompanhar os últimos desenvolvimentos. Você precisa saber quais dispositivos são suportados e sob quais condições. Este site ajudará você a ficar atualizado. Há um Página dedicada aos exemplos , também.

E sempre ajuda a ter o direito armazenamento na núvem , também.

Este artigo foi originalmente publicado em questão 283 da revista Creative Web Design Web designer . Comprar edição 283. ou se inscrever .

Consulte Mais informação:

• 7 bonkers vr tendências em direção ao seu caminho
• Comece com Redux Thunk
• 11 tendências da Web Hot agora