Transcrições
1. Introdução: A maior parte das narrativas é feita através de palavras e desenhos, deixando lacunas para a imaginação do espectador preencher. Mas e se você, como contador de histórias, pudesse projetar uma experiência inteira sem lacunas? E se você pudesse compartilhar um mundo virtual, uma realidade virtual em sua totalidade? Oi, eu sou Albert. Recebi reconhecimento internacional de marcas como a Adobe nos últimos anos. Eu também ensinei vários 100 alunos a codificar através do Airbnb ganhando mais de 50 avaliações de cinco estrelas. Em particular, eu ensinei isso exatamente para sua turma inúmeras vezes pessoalmente. Pela primeira vez, estou empacotando isso em uma aula online para você. Nesta aula, você aprenderá os três passos simples para converter qualquer cena natural em uma bela experiência de realidade virtual. Você construirá as bases de
suas habilidades de codificação de VR enquanto vê o mundo ao seu redor em uma lente diferente. Esta classe é feita para todos os níveis. Nenhuma experiência de codificação é necessária, e até mesmo desenvolvedores experientes encontrarão valor na criação de seu próprio mundo virtual. Esta aula é para você, se você é um programador procurando criatividade, um criativo procurando codificação, ou um espectador procurando ambos. O objetivo é dar-lhe uma nova ferramenta, um novo espaço como contador de histórias. Com a realidade virtual, você não está mais limitado a uma página ou a uma tela plana. O público está no seu mundo. Agora, enquanto você está assistindo a este vídeo, pense em uma bela cena na natureza e então tome a próxima lição. Você está apenas a três passos de entrar
no mundo que está imaginando. Vamos começar.
2. Imersão em 3 etapas simples: Seu projeto para hoje é criar uma experiência de realidade virtual que encapsula sua cena favorita na natureza. Pode ser um parque infantil, um esconderijo de verão, seu primeiro acampamento. Você não precisa de um fone de ouvido de realidade virtual para esta aula. Um navegador de computador padrão funciona muito bem. No entanto, para experimentar plenamente o seu mundo virtual, eu recomendo o Google Cardboard por 15 dólares ou se você é um viciado em VR, eu sugiro vivamente o Oculus Quest 2. Não há necessidade de tornar a sua cena realista. Sua cena deve refletir como você vê, e aqui está por que, imersão em um mundo virtual não significa apenas fotorrealismo. Isso significa coeso entre sinais visuais, de áudio e de movimento se envolvem com o espectador todas essas maneiras e isso é uma experiência virtual imersiva. Nas próximas lições, você construirá exatamente isso, uma experiência de realidade virtual imersiva em apenas três etapas. Primeiro, divida sua cena em um número de primitivos diferentes, como cilindros e caixas. Em segundo lugar, adicione iluminação. Altere seus materiais para adicionar cor, reflexos e sombras. Terceiro, adicione movimento. Mantenha seu público envolvido com algo para ver na cena. Isso pode ser folhas sussurrando, água fluindo ou chamas subindo. Meu conselho para você, comece pequeno. Uma cena com alguns objetos e um foco claro, mas completar todos os três passos, primitivos, iluminação e movimento. Então você pode se formar cenas
cada vez mais complexas à medida que você se torna mais confortável e mais confiante. Espero que ainda tenha aquela cena fácil, arejada e bonita na sua cabeça. Na próxima lição, começaremos a transformar sua imaginação em realidade virtual.
3. AFrame “Hello World”: Bem-vindos à Lição 3. Nesta lição, você criará seu primeiro modelo de Realidade Virtual,
um modelo Hello World VR, usando uma biblioteca chamada A-Frame. Comece navegando para este URL aaalv.in/vr 101/helloworld, isso abrirá um novo projeto em falha. Você deve ver uma tela como a minha metade direita da tela, alguns arquivos, algum código e um cabeçalho que é cortado fora da minha gravação. Então sugiro colocar suas janelas de falhas e esculturas lado a lado, como mostrado aqui. Vou minimizar meu navegador de arquivos clicando na seta que está apontando para a esquerda para que você possa ver mais do meu código ao mesmo tempo. Você não tem que fazer isso. Para explicar o código que você está olhando, você está olhando para uma página da Web HTML. HTML é composto por um monte de tags, como a mostrada à esquerda. As tags têm uma tag inicial e uma tag final, como mostrado aqui, e as tags são denotadas usando a barra direta. Se você já é um Web Dev Pro, você pode pular o primeiro minuto ou mais onde falamos sobre HTML. Este é o seu código HTML Hello World, observe que todo o documento está empacotado com uma tag HTML. Aqui está uma tag inicial, e aqui está a tag final. Dentro da tag HTML, há um par de tags head e body. Estas três tags, HTML, cabeça e corpo, mais ou menos definem o ponto de partida de qualquer documento HTML. Dentro da tag head, adicionamos propriedades invisíveis da página da Web, nesse caso, adicionamos um título para a página da Web e também adicionamos uma linha que
nos permite criar experiências de Realidade Virtual usando headframe. Dentro do corpo, adicionamos a cena de Realidade Virtual usando uma cena. Eu adicionei duas luzes para você, vamos falar sobre luzes mais detalhadamente mais tarde. De volta aos slides. Ao longo desta classe, você criará objetos neste mundo virtual usando HTML, os objetos mais simples são chamados de primitivos. Primitivas são formas básicas como cubos, cones e esferas. Em A-Frame, você cria um primitivo usando uma tag HTML. Como dissemos antes, as tags em HTML têm uma tag de início e uma tag de fim, como mostrado aqui. As tags finais são denotadas usando a barra. Existem várias tags diferentes que usaremos, todas as tags têm o mesmo menor que, maior que, e barras diretas como denotado em preto aqui. No entanto, cada tag terá um nome de tag diferente denotado em laranja aqui. Por exemplo, aqui está a tag body que vimos anteriormente em A-Frame, aqui está uma tag de caixa, isso cria um cubo em nosso mundo virtual. Aqui estão todas as partes anotadas, vamos tentar este código agora. Vá em frente e clique onde diz, “Seu código aqui.” Eu vou clicar no final da linha 11, aperte “Enter”, e agora digite menos de um ralador de caixa tracejado do que. Observe que falha auto completa para terminar tag depois de adicionar um maior que. Se você tiver um erro de digitação, por exemplo, digamos que eu esqueci o traço, vou digitar uma caixa, Glitch criará uma tag final com seu erro de digitação. Você precisará corrigir as tags de início e fim manualmente. Para visualizar seu modelo, vá em frente e clique no canto superior esquerdo, “Mostrar” e clique em “Próximo ao código”. momento, esta pré-visualização parece vazia, você não vê nada, mas isso é porque estamos dentro da caixa. Vá em frente e clique nesta janela de visualização, use as teclas de seta ou WASD para se mover para fora da caixa, e aqui está a caixa no chão. Você também pode arrastar com o mouse para girar a câmera. Os primitivos podem ser personalizados de algumas maneiras diferentes usando componentes. Por exemplo, aqui está a caixa que acabamos de definir, agora
podemos adicionar o componente sombra. Esta sombra de componente permitirá que a caixa para armazenar em cache e sombras recebidas, não requer um valor. Vamos tentar isso agora. De volta para dentro do seu código, vá em frente e logo antes deste sinal maior que, eu vou digitar na sombra. Mais uma vez, para visualizar seu modelo, vá em frente e clique na janela de visualização e seguida, use as teclas de seta ou WASD para se mover, e você pode ver agora há uma sombra. Também podemos alterar a cor da caixa, vamos fazer isso definindo o componente de cor igual ao valor azul. As cores do texto aqui são usadas apenas para ênfase. O texto roxo é o nome do componente, o texto rosa é o valor do componente. Às vezes eu vou adicionar quebras de linha entre propriedades como
esta, isso é apenas para que você possa ver todo o meu código sem eu rolar horizontalmente, se eu colocar todo o código em uma linha ou em várias linhas, o código iria se comportar a Da mesma maneira. Agora, vamos mudar a cor da sua caixa para azul, então em seu código no lado direito, vou clicar sobre isso para minimizar nossa visualização para que você possa ver mais do meu código. Logo após essa sombra, vou digitar a cor igual a “Azul”. Certifique-se de não esquecer suas aspas duplas. Mais uma vez, para abrir a visualização, você pode ir a um show e ao lado do código. No entanto, neste caso, notei que a pré-visualização já foi aberta porque há uma caixa cinza atrás deste botão, então eu posso ir em frente e clicar neste botão à direita para re-expandir minha pré-visualização. Depois de ter reexpandido a minha pré-visualização, clique na pré-visualização e posso mover-me para ver a minha nova caixa azul com a sombra. Vamos mudar a posição da nossa caixa. A posição é definida usando três eixos. O eixo x é horizontal, x
positivo é direito, x
negativo é esquerdo. O eixo y é vertical, y
positivo está para cima, y
negativo está para baixo. Finalmente, o eixo z fica fora da tela, z
positivo está em sua direção, z
negativo está longe de você, aqui estão os três eixos ilustrados. Para alterar a posição da caixa, defina o atributo position. A primeira coordenada é x, a segunda coordenada é y, e a terceira coordenada é z. Aqui mudamos a coordenada z para três negativos, isso significa que movemos a caixa três unidades para longe de nós. Observe que as coordenadas são denotadas sem vírgulas, apenas espaços entre cada par de valores de coordenadas. Vamos continuar e tentar isso em código, vou mais uma vez minimizar minha janela de visualização clicando na seta para a direita. Aqui, eu vou agora digitar posição igual a “0 0 -3". Agora, se eu voltar a expandir a minha pré-visualização, você poderá ver a caixa sem ter que mover a câmera manualmente. É especialmente importante incluir aspas duplas em torno do seu valor de atributo, por isso não se esqueça delas. Para completar seu conhecimento de transformações, também abordaremos a rotação. Os três eixos são os mesmos que antes, podemos girar ao longo do eixo horizontal ou x,
o eixo vertical ou y,
ou o eixo z que aponta diretamente para fora da tela em nossa direção. Para entender para que lado uma rotação positiva gira, use a mão direita. Enrole a mão direita em um punho e com o polegar apontado na direção positiva
do eixo, a onda dos dedos indica uma direção de rotação positiva. Tente isso agora, enrole sua mão direita em um punho, exceto com o polegar saindo. Você pode verificar se o eixo x e as setas giratórias do eixo z estão corretas, rotação z
positiva gira o objeto para a esquerda, a rotação x
positiva gira o objeto em sua direção. Para alterar a rotação da caixa, defina o atributo de rotação. A primeira coordenada é x, a segunda coordenada é y, e a terceira coordenada é z. Aqui mudamos a coordenada x para nove graus. Para entender qual direção é, verifique com o diagrama no canto superior esquerdo e verifique sua mão direita enrolada. rotação x positiva gira a caixa em nossa direção. As coordenadas de aviso são denotadas sem vírgulas, assim como antes, apenas espaços entre cada par de valores de coordenadas. Não se esqueça de aspas duplas em torno do seu valor de atributo. Vamos tentar isso agora, eu vou minimizar
a visualização e, em seguida, digitar aqui rotação igual a, e eu vou realmente escrever 9 0 0. Vá em frente e re-expanda sua visualização, agora, você pode ver que a caixa girou em nossa direção muito ligeiramente. Podemos ir para a esquerda se não estivermos convencidos. Agora, abordaremos três dicas para manter seu código HTML organizado. Dica número 1, adicione um ID a todas as etiquetas, vou mostrar-lhe agora no código. Vá em frente e minimize sua visualização, e dentro de seu código, eu vou adicionar outro atributo aqui, ID é igual a jogador. Uma vez que temos apenas um objeto, essas idéias não ajudam muito, entanto, em lições posteriores teremos muitos objetos. Nesse ponto, as IDs são muito úteis para encontrar objetos em nossa cena. Em seguida, vamos precisar explicar o que um quadro de referências, a fim de introduzir nossa segunda dica. Primeiro, vou criar outra entidade, esta entidade não é realmente um objeto, é apenas uma maneira de agrupar objetos juntos. Vá em frente e digite “ID de entidade A é igual a pai”. Vou excluir a tag final criada automaticamente, e vou colá-la logo após essa tag na parte inferior, a caixa original que criamos. Uma vez que eu fiz isso, eu vou selecionar esta linha 13, com um jogador, e eu vou tocar. Esta tag é o que chamamos de tag pai ou elemento pai. Nós nos referimos à caixa como a tag filho ou elemento filho. Então eu vou mover o pai, não a caixa para a direita, mudar a posição dos pais para 10. Vá em frente e digite “posição igual a 1 0 0". Se abrir a pré-visualização, notará
que a caixa foi movida para a direita também. Vá em frente e minimize sua visualização. Agora eu vou mover a caixa para cima, aqui eu vou mudar o valor y na posição para atribuir a um. Se eu abrir minha pré-visualização, você pode ver agora que a caixa foi movida para cima. O que está acontecendo exatamente? Vamos em frente e olhar para este quadro de referência. Nosso pai foi movido para a direita como mostrado no diagrama na metade superior do slide. Em relação ao pai, nossa caixa foi movida para cima, conforme mostrado na metade inferior do slide. Como resultado, percebemos a caixa infantil como estando no canto superior direito da tela, isso é o que é chamado de quadro de referência. Isso nos leva à nossa segunda dica, que é usar entidades pai para agrupar objetos juntos, isso mantém nosso código mais organizado. Você verá exemplos disso em lições posteriores. Dica Número 3 é recuar todas as etiquetas de crianças. Aqui está um exemplo, você pode ter notado eu recuando inadvertidamente em algum grau Glitch também faz isso para você, com recuo adequado você pode dizer quais primitivos pertencem a quais objetos. Isso é tudo para as nossas três gorjetas. No canto superior esquerdo, clique em “Mostrar”
e, em seguida, em uma nova janela. Nesta nova janela, você pode acessar o URL da página da Web. Você pode compartilhar esse URL com qualquer pessoa que você gostaria de ver seu modelo de VR. Se desejar, agora você pode carregar sua experiência de realidade virtual no fone de ouvido de realidade virtual. Se você tem um Google Cardboard, carregue o URL no seu telefone, clique no botão “Realidade Virtual” no canto inferior direito, que diz VR aqui, depois coloque o telefone no Google Cardboard. Dê uma olhada através da lente. Você pode ter que se virar para encontrar sua caixa azul. O processo é semelhante para um Oculus Quest, acessar o navegador Oculus e acessar o URL. O navegador Oculus acessará o site diretamente no modo VR. Isso conclui a lição, você aprendeu muito nesta lição. Este é um resumo rápido dos conceitos que você tocou em primitivas, componentes, posição, rotação e quadro de referência. Você também tem três dicas para o código HTML organizado limpo. Se você quiser acessar e baixar os slides, visite este URL. Isso é tudo para o seu modelo Hello World Virtual Reality. Na próxima lição, começaremos a construir nossa versão de Realidade Virtual de uma cena na natureza.
4. 1ª etapa. Primitivos: Bem-vindos à Lição 4. Nesta lição, vamos começar a converter uma cena na
natureza em uma experiência de realidade virtual. Comece navegando para este URL, aaalv/vr101/helloworld. Isso abrirá um novo produto no Glitch. Você deve então ver uma página como a da minha direita, um navegador de arquivos, um cabeçalho que é cortado e algum código. Como antes, sugiro colocar sua janela Glitch e Skillshare lado a lado, como mostrado aqui. Nessas próximas três lições, faremos uma versão estilizada de realidade virtual de um templo. Eu puxei fotos de um site chamado pixels.com, onde você pode encontrar fotos de alta qualidade, livre para usar. Em particular, escolhi uma das primeiras fotos de um templo, um santuário japonês ou portão. A vantagem desta lição é aprender a simplificar imagens como
esta em primitivas básicas como caixas e cilindros. Há quatro partes nesta lição. Na parte 1, cobrirei as primitivas básicas para este templo. Aqui está o templo de novo. No lado direito da tela, vou clicar na seta para a esquerda para minimizar o navegador de arquivos para que você possa ver mais do meu código. Vamos em frente e começar. Comece definindo uma entidade para conter seu templo. Observe que esta entidade não é realmente um objeto em seu mundo VR, é apenas uma maneira de agrupar outros objetos juntos. Vá em frente e clique na linha 16 em seu arquivo, eu vou adicionar algumas linhas extras e, em seguida, digite um ID de entidade igual ao templo. Essa é a identificação do nosso templo. Este espaçamento bem na frente aqui, então eu adicionei algumas guias diferentes, que na verdade não importa, mas apenas para manter seu código limpo. Eu tenho abas para que ele esteja alinhado com as linhas anteriores. Agora que eu tenho a identificação, vamos em frente e adicionar a sombra para que seu templo possa lançar e receber sombras. Todos os objetos filhos herdarão a capacidade de lançar e receber sombras. Também mudaremos a posição. Vou mover o templo por um e afastar-me do espectador por três unidades. Vamos agora começar fazendo o pilar esquerdo. Para estilizar um pouco este modelo, usaremos um cone para que a base do pilar seja mais larga do que a ponta do pilar. Antes de começarmos a definir esse pilar esquerdo, vá em frente e clique entre suas duas tags inicial e final. Pressione enter para criar uma nova linha. Eu vou fazer isso novamente e, em seguida, pressione tab para que agora você possa definir suas tags filho dentro do templo. Como sempre, comece identificando o primitivo, o ID do pilar esquerdo. Vamos fazer um cone e, em seguida, digitar ID igual ao pilar esquerdo. Vou adicionar um sinal de maior que para completar o cone. Agora, dê-lhe um raio no fundo de 0,15. Vou digitar o raio inferior igual a 0,15. Você vai notar que eu criei uma nova linha aqui em vez de apenas um espaço entre os dois componentes, ID e radius-bottom. Esta quebra de linha é completamente opcional. Você poderia manter todo o seu código em uma linha, se você quisesse. Optei por criar uma nova linha para cada componente para que você não precise rolar horizontalmente para ver o código desse pilar. Vamos definir um raio superior de 0,07. Radius-top é igual a 0,07. Nós também vamos dar-lhe uma altura de dois porque a origem templos é em y é igual a 1. Vamos agora definir altura igual a dois e movemos o pilar para a esquerda por 0,65, que significa coordenada x de 0,65 negativo. Caso esteja se perguntando como consegui esses valores estranhamente específicos como 0,07. Afinei esses valores de antemão para encontrar o melhor valor. Se você está se perguntando como escolher o melhor valor para si mesmo, eu tenho uma dica. Esta dica é usar o Inspector A-Frame. Agora, como minha tela já é tão pequena, vou maximizar minha janela de Glitch. Aqui está agora a minha janela Glitch maximizada. Para usar o A-Frame Inspector, primeiro
você terá que abrir a visualização. Vou clicar no show superior esquerdo ao lado do código. Agora você pode ver minha prévia no lado direito, você pode ver o único cone levantando o pilar esquerdo para o seu templo. Dentro da janela de visualização, clique dentro da janela de visualização e, em
seguida, pressione a opção de controle I, tudo de uma vez para iniciar o Inspetor. No Inspetor, você pode selecionar o objeto desejado. No meu caso, vou selecionar o pilar. Em seguida, você pode alterar qualquer atributo desejado e ver seu impacto visualmente em tempo real. Para ver mais deste Inspetor, vou arrastar esta barra redimensionável aqui. Então aqui eu vou realmente mudar a posição y para ser menor ou maior. Eu também posso alterar a rotação ao longo de qualquer um dos eixos que eu quero. No entanto, você pode querer conectar aqui 30, por exemplo, para ver o que parece girado ao longo do eixo x em 30 graus. Observação importante, porém, sem configuração adicional, você não pode realmente salvar as edições feitas dentro do Inspetor. Para simplificar, você deve fazer o menor número possível de alterações no Inspetor. Isto é apenas porque a função de exportação no canto superior direito, bem aqui, partir do momento desta gravação,
na verdade, às vezes falha em exportar suas configurações ajustadas. Em suma, use o Inspetor para ver as alterações mais rapidamente, mas adicione suas configurações ajustadas ao HTML manualmente para garantir a segurança. Agora vou clicar de volta para a cena para que eu possa fechar o inspetor. Eu também vou arrastar esta janela de visualização para que seja um pouco menor e, em seguida, eu vou minimizar a visualização clicando na seta. Agora, vamos copiar e colar para o segundo pilar. Só para ser consistente, vou clicar logo após esta aspas duplas e apertar enter. Então eu vou copiar e colar
este código e colar logo abaixo e, em seguida, renomear isso para pilar-direito. O pilar certo está à direita da origem. Vamos mudar o valor do eixo x para positivo, então 0,65. Agora vou mostrar a foto e o código lado a lado mais uma vez. Então aqui está o templo mais uma vez. Em seguida, defina a parte inferior das duas barras em execução horizontalmente. Vamos definir aqui uma caixa, vamos dar-lhe uma identificação, então esta é a barra inferior. Então vamos definir a largura, altura e profundidade. No entanto, em vez de definir a largura, altura e profundidade separadamente, usarei o atributo scale. Este atributo como parece, escala o objeto em cada direção, escala de um é igual à largura de um. Assim, a primeira coordenada é a escala ao longo da direção x ou em outras palavras, a largura. Vamos definir escala igual a dois e a largura será dois. Vamos torná-lo curto, então a altura será 0,15 e vamos torná-lo um pouco largo, então a profundidade vai ser 0,1. Finalmente, vamos dar-lhe uma posição. Vamos elevar a barra para uma altura de 0,65. Então vamos digitar a posição igual a zero, 0.65, zero e certifique-se de adicionar um sinal maior que e isso irá completar a tag para você. Em seguida, vamos definir o mais alto das duas barras correndo horizontalmente. Comece definindo o primitivo. Então vamos escrever uma caixa, dar uma identificação, como sempre. Vamos agora definir escala igual a 2, vamos dar-lhe uma largura de 0,2,
uma altura de 0,2 e uma profundidade de 0,25. Em seguida, levante a barra para uma altura de 1,05, então a posição é igual a 0, 1,050. Agora, nós escalamos os objetos para que ele tenha alguma largura, altura e profundidade,
e nós também demos a ele uma posição onde nós apenas
mudamos a coordenada y para que o objeto seja maior. Finalmente, vamos adicionar um boné. Este topo, muito, muito tippy parte superior do templo. Mais uma vez, isso vai ser uma caixa, então eu vou para o final da linha 31 para o meu arquivo, e pressione Enter, então vamos digitar um a-box, e vamos dar um id como de costume, cap-higher. Vamos torná-la um pouco mais larga e mais profunda do que a barra abaixo dela. Precisa ser um pouco mais largo, então em vez de 2.2, vai ser 2,6. Parece bem fino na foto, então eu vou dar-lhe uma altura de 0,05, e também precisa ser um pouco mais profundo, então vamos dar-lhe uma profundidade de 0,3. Vamos elevar a fasquia para uma posição ligeiramente mais alta. posição é igual a zero ao longo do eixo X, uma coordenada Y de 1,15
e, em seguida, uma coordenada Z de zero. Digite maior do que para completar sua tag. Isso realmente completa o nosso templo. Vamos agora dar uma olhada e ver como o modelo se parece. Clique nesta pré-visualização no lado esquerdo, e aqui você pode ver um templo. Aqui está agora o templo concluído e podemos ver que ele corresponde visualmente ao templo à esquerda. Se o seu templo não se parecer com o meu, como em uma peça está faltando, ou uma peça não está na posição certa, verifique novamente se seu código corresponde ao meu nesta seção para o templo. Seu código pode estar faltando algumas aspas diferentes, certifique-se de incluir essas aspas duplas ou pode estar faltando uma tag final. Você também pode acessar este URL, aaalv.in/vr101 para ver uma versão completa deste código. No próximo passo, vamos agora definir uma lanterna. Vou mais uma vez abrir meu código em tela cheia. Debaixo deste templo, por isso certifique-se de que isto está fora da etiqueta de entidade. Vamos agora criar uma lanterna. Defina uma lanterna, uma entidade, este é apenas um grupo, ou objetos juntos, e nós vamos identificar a lanterna com o centro da lanterna. Serão três lanternas, e esta lanterna vai estar no centro. Vamos mais uma vez dar-lhe a capacidade de lançar e receber sombras, e vamos movê-lo para que seja zero unidades, modo que ele esteja no centro, e então é também uma unidade fora do chão, e então Três unidades de distância de nós. Vá em frente e adicione um sinal de maior que para completar sua tag. Vou adicionar esta posição entre as minhas tags de início e fim, apertar Enter duas vezes, e tocar Tab uma vez para que eu esteja dentro desta lanterna. Cubra a lanterna com um prisma triangular. Aqui vamos identificar o primitivo que é um cone, um cone. Podemos então efetivamente fazer um prisma triangular usando um cone, e definindo o número de segmentos radiais para ser quatro. Aqui vamos primeiro identificar o cone com id igual ao cone da lanterna. Nós vamos dar-lhe, segmentos-altura igual a um, e então nós vamos dar-lhe segmentos radiais completos;
segmentos radiais igual a quatro. Mais uma vez, não se esqueça de suas aspas duplas, e não se esqueça de seus traços. Vamos agora definir o sombreamento flash como verdadeiro. Caso contrário, as sombras e o sombreamento ainda parecerão redondas ou como um cone regular. Vou digitar sombreamento plano igual a verdadeiro. Agora, podemos definir os raios, modo que o raio inferior será 0,1, e então a altura deste objeto será 0,09. Não se esqueça desse sinal de igual como eu quase fiz. Então vamos mover este prisma triangular um pouco para cima, então a posição é igual a zero, 0,16, zero. Então vamos girá-lo para que ele esteja de frente para nós. Vou tocar em Enter aqui logo após esta citação dupla, e lá está o nosso prisma triangular. Eu vejo o que isso parece, eu vou abrir a pré-visualização neste lado direito. Se ainda não o fez, certifique-se de clicar em Mostrar e, em seguida, Seguinte to The Code. Se você ver que há uma caixa cinza logo atrás deste Próximo ao Código como o meu tem, então isso significa que sua visualização já está aberta, então clique na seta bem aqui. Você pode ver que há um prisma triangular flutuante bem ali entre seus verdadeiros pilares. Agora, vamos adicionar uma caixa para o telhado
da lanterna debaixo daquele prisma triangular. Em seu código, logo após esse cone, preciso marcar isso mais uma vez. Novamente, esse espaço em branco, essa aba realmente não importa, é apenas para nos ajudar a ver como o código é organizado. Só queremos ver visualmente que este cone está dentro desta lanterna. Agora que temos este cone, vamos adicionar a caixa para o telhado da lanterna. Nós vamos digitar uma caixa dar um id como antes, telhado de lanterna vai ser nosso id. Agora, vamos definir a largura, altura e profundidade. Nós vamos digitar em escala igual a 0,2, 0,02, 0,2. Em seguida, dê-lhe uma posição de um que é ligeiramente alto. Isto é apenas um pouco levantado. O que isso significa é novamente, a largura é 0,2, a altura é 0,02. Isso deve ser 0,2. Novamente, a escala é largura de 0,2, altura de 0,02 e profundidade de 0,2. Agora você pode ver se você se move ao redor deste mundo, novamente, clique em sua visualização, use as teclas de seta ou WST, e agora você pode ver que há um teto logo abaixo desse prisma triangular. Agora, vamos adicionar uma caixa para o fundo da lanterna. Esta é a caixa que acabamos de criar, vou passar para o fim e apertar Enter. Então agora vamos criar outra caixa;
a-box , id é igual ao fundo da lanterna. escala é igual a uma largura de 0,15, uma altura de 0,02 e uma profundidade de 0,15. Mais uma vez, adicione um sinal de maior que para completar sua tag. Agora, ali está o fundo da lanterna. Agora vamos adicionar uma esfera brilhante, uma esfera com propriedades emissivas. Vamos adicionar uma luz real à lanterna na próxima lição. Digite a esfera A, id é igual a orbe da lanterna, raio igual a 0,03. Vamos movê-lo um pouco para cima,
um pouquinho para 0,05, opacidade é igual a um, e emissivo é igual a branco. O que esta propriedade final faz é fazer com que o objeto pareça brilhar. Você pode realmente ver aquela esfera branca bem ali. Parece que está brilhando. Isso não parece ter sombras lançadas sobre ele. É o que esta propriedade emissiva faz. [ inaudível] que aspas duplas, eu vou entrar exatamente como antes para que possamos ver como isso é organizado. Agora, novamente, se você está se perguntando como eu obtive esses valores
realmente, muito estranhos 0.03, 0.05, e 0, isso é apenas eu ajustando valores dentro do Inspetor A-Frame, e depois copiando-os. Agora, eu vou voltar para a tela dividida, e para o nosso último passo, nós vamos clonar aquela lanterna mais duas vezes. Não vamos copiar e colar, vamos fazer algo um pouco mais limpo. Voltar ao código em tela cheia. Esta foi a lanterna que tínhamos acabado de criar na etapa anterior. Agora vamos clonar esta lanterna mais algumas vezes. Vá em frente e digite uma entidade. Assim como antes, dê-lhe uma identificação de lanterna. Vamos definir isto como uma lanterna que está à esquerda. Vamos digitar um novo componente que nunca vimos antes. Isto é clone é igual ao centro da lanterna. Você pode dar a isso o valor que quiser. Estou dando uma posição negativa de 1,25. Para indicar uma lanterna à esquerda, vou levantá-la do chão, e vou afastá-la de nós. Aí está o seu Lanterna. Vou fazer isso mais uma vez termos uma terceira lanterna no lado direito. Vou digitar uma entidade, id é igual a lanterna-direita, e clone é igual ao centro da lanterna. Vamos clonar a lanterna central, e depois vou dar-lhe uma posição. A posição é igual a 1,5, 2, 2,5 negativos. Agora, temos três lanternas no total. Vou mover isto daqui a pouco para que
possas ver a terceira lanterna. Há as nossas três lanternas. Apenas para explicar este componente clone, estamos realmente usando o que são chamados seletores CSS. Com seletores CSS, o sinal de libra ou a hashtag denota um id. Você especifica a lanterna original usando um id de centro da lanterna. Isso é o que este componente clone faz. Não abordamos nenhum conceito novo nesta lição, mas praticamos os conceitos que aprendemos na lição anterior. componente [inaudível] e permanecer organizado por entidades agrupadas. Também cobrimos duas dicas extras. Um deles é o inspetor, o inspetor A-Frame que vimos para ajustar os valores. O segundo é os componentes do clone. Isso nos permite manter nosso código organizado em vez de copiar e colar. Se você quiser acessar e baixar esses slides, visite este URL. Isso conclui a etapa 1. Na etapa 2, adicionaremos cor à sua cena.
5. 2ª etapa. Cor: Bem-vindos à Lição 5. Nesta lição, continuaremos convertendo uma cena na natureza em uma experiência de realidade virtual em particular, adicionaremos cor à nossa experiência. Comece navegando para este URL, aaalv.in/vr1o1/step2. Isso abrirá um novo projeto no Glitch. Como antes, sugiro colocar suas janelas Glitch e Skillshare lado a lado, como mostrado aqui. Primeiro expandiremos nosso conhecimento de componentes, depois mudaremos as cores e adicionaremos iluminação à cena. Vamos começar com componentes. Aqui está um componente que já vimos antes. O componente de cor tem um valor, azul. Isso é chamado de componente de propriedade única. Ele tem uma propriedade que é o valor da cor. Aqui está um componente que não vimos antes chamado material. Material é o que é chamado de componente multi-propriedade porque suporta várias propriedades, como cor e opacidade. Os nomes das propriedades são mostrados aqui em azul, como antes, os valores são mostrados aqui em rosa. Observe que para separar nomes de propriedade dos valores de propriedade, usamos dois pontos denotados em vermelho. Para separar propriedades umas das outras, usamos ponto-e-vírgula denotados em vermelho. Agora vamos usar componentes multi-propriedade para mudar a cor do céu. Agora, vamos colorir nosso céu. Este é o nosso código inicial do Passo 2. Mais uma vez, vou minimizar o navegador de arquivos aqui. Vou começar a me referir a objetos dentro de nossa cena pela identificação deles, então as identificações que atribuímos aqui. Vamos em frente, e navegue até a cena. A cena é esta etiqueta aqui na linha 13. Escurecer o céu definindo a propriedade de cor de componentes de fundo, digite em plano de fundo é igual a cor, e então nós vamos dar-lhe uma cor roxa. Este sinal de libra agora denota um valor hexadecimal. Vamos digitar 0011a, esta é apenas uma maneira de definir uma cor. Agora veja como isso se parece. Vá em frente e abra sua janela de visualização, clique em “Mostrar”, ao lado do código. Se você já fez isso, então eles estarão uma caixa cinza atrás do código, assim como o meu, caso em que você pode clicar na visualização à esquerda. Você pode ver que há aquele roxo escuro no fundo. Agora é isso para o céu. Vamos mudar a cor do chão. Em nosso código, vamos mudar a cor do chão para ser um índigo. O chão está no fundo. Esta é a linha 42 com um avião A. Infelizmente, devia ter dado uma identificação a isto, mas é o que é. Vamos agora mudar a cor dos motivos para estar em índigo. A cor atual é branca ou fff. Nós vamos mudar isso para ser um #841fde, e isso é realmente também um tom de roxo. momento, isto parece absolutamente horrível, mas mudaremos isto mais tarde. Isso conclui o terreno. Em seguida, vamos falar sobre algumas luzes. Antes de continuar a codificação, vou ter que explicar os cinco tipos diferentes de luzes que você pode usar em A-frame como uma versão 1.1.0. Não há necessidade de memorizar estes, você sempre pode Google luzes A-Frame para encontrar esta lista de luzes novamente. Nesta lição, eu queria encontrar cada luz visualmente para que você possa ter uma intuição para quando usar que luz. Aqui está a cena que vamos usar. O primeiro tipo é uma luz ambiente. É uma luz onipresente. Pense nisso como a exposição em sua câmera. Todas as entidades são igualmente afetadas pela luz ambiente. Desligar a intensidade do ambiente escurecerá todos os objetos, e aumentar a intensidade iluminará todos os objetos. Você também pode adicionar cor à luz ambiente para dar-lhe uma cena de sabor quente ou fresco. Voltar às configurações originais. A segunda luz é uma luz direcional. Luz direcional que você pode pensar como o sol. É a luz que lança a sombra da caixa neste ambiente de RV. Abaixe a intensidade da luz direcional e obterá menos contraste nas sombras, e aqui está ainda menos contraste. Repare que eu poderia ter aumentado a exposição geral usando luzes ambiente. No entanto, não importa o quão intensa seja a minha iluminação ambiente, não
recuperarei o contraste de sombra sem iluminação direcional. De volta à cena original. Para a luz número 3, adicionaremos luzes do hemisfério. Para mostrar melhor os efeitos, vou mudar estas caixas para brancas. Aqui está a iluminação do hemisfério. Funciona basicamente como iluminação ambiente, exceto que você pode especificar uma cor de baixo, e uma cor de cima. Aqui temos azul de baixo e branco de cima. Aqui está mais iluminação hemisfério com azul de cima e azul de baixo. Isso é idêntico à iluminação ambiente com azul. De volta à cena original. Para a luz número 4, vamos adicionar luzes pontuais para mostrar melhor seus efeitos, eu reduzi a iluminação ambiente de volta para 0.2. Aqui está uma luz pontual logo acima da caixa mais à esquerda. Observe que a luz brilha em todas as direções como uma lâmpada descoberta. Como com luzes direcionais
, pode lançar sombras. Aqui está a mesma luz pontual deslocada para a direita. De volta à cena original. Para a luz número 5, vamos adicionar holofotes. Fiel ao seu nome, os holofotes lançarão luz em uma direção como os documentos A-Frame o colocam,
isso é como o bat-sinal. Para mostrar melhor seus efeitos, eu recusei para a iluminação ambiente de volta para 0.2. Aqui está um holofote brilhando em apenas uma parte da caixa, como luzes que você esperaria em um teatro, shows aquáticos de
Las Vegas, ou em uma exposição de museu. Aqui está a lista completa de luzes A-Frame disponíveis para você como uma versão 1.1.0. Não se preocupe se esta lista parecer esmagadora, vamos usar essas luzes agora em um exemplo. Para começar, você pode simplesmente copiar minha iluminação em cada novo projeto que você faz. Vamos agora configurar a iluminação do seu ambiente. Vá em frente e role para cima até o topo do seu arquivo. Agora, vamos adicionar três luzes ao novo ambiente. Observe que já existem duas luzes aqui. No meu caso, isto está nas linhas 14 e 15. Você pode ir em frente, e apagar as duas luzes. Agora vou definir uma nova luz. Nós vamos digitar uma luz, vamos definir o tipo como direcional, vamos mudar a intensidade ou quão brilhante ele brilha para 0.3. Novamente, não se esqueça das aspas duplas ou do sinal de igual. Finalmente, vamos dar-lhe uma tonalidade púrpura. Vamos definir cor igual a 6909b3. Esta é uma luz púrpura. Não finalmente, ainda precisamos adicionar mais componentes. Vá em frente, e mova a luz para o canto superior direito. Posição é igual, a direita significa um x positivo, cima significa um y positivo, e para nós significa um z positivo. Agora vamos adicionar um componente multi-propriedade. Este é o componente de luz com o atributo de sombra de conversão, sorry, propriedade e, em seguida, o valor é true. Isto significa que a nossa luz pode lançar sombras. Agora vamos adicionar um sinal de maior que para fechar nossa luz, e vamos mover isso de volta aqui para alinhar com isso. Algo não está alinhado. É o melhor que posso fazer. Em seguida, vamos adicionar outra luz, vamos repetir este processo para outra luz direcional. Vamos digitar aqui uma luz, tipo igual a direcional, intensidade igual a 0,2. A cor é branca, e a posição será muito próxima da nossa última luz. Finalmente, certifique-se de que também habilita sombras que são convertidas. Agora que eu tenho essas duas luzes direcionais, vamos em frente, e adicionar nossa luz ambiente para que toda esta cena seja um pouco mais brilhante, agora é um pouco escuro demais. Para a nossa terceira luz, A-light, tipo é igual ao ambiente. Vá, e adicione intensidade em 0,15, e então a cor será outra roxa, 6909b3. Certo, e essa é a nossa cena. Ainda parece um pouco escuro, então, se você quiser, você pode aumentar a intensidade de qualquer um desses valores, e ver como eles funcionam. Por enquanto, estas são as luzes que precisamos. Agora, se você estiver confuso com a forma extrapolar ou usar essas luzes em outros projetos para começar, eu sempre recomendo adicionar uma luz direcional e uma luz ambiente a qualquer cena com a qual você está trabalhando e refinar ou adicionando luzes conforme necessário. Você pode, de fato, copiar essas luzes que eu tenho aqui, se você quiser. Para nosso último passo nesta lição, adicionaremos luzes pontuais às suas lanternas como se as lanternas estivessem brilhando. Estas foram as luzes que definimos anteriormente. Vamos em frente, e desça até a lanterna. Esta é a lanterna que definimos na lição anterior. Agora vamos mudar a cor deste globo aqui. Vamos mudar a luz emissiva do globo de branco para uma cor ciana. Vamos definir aqui 09edda, não se esqueça do sinal de libra antes da sua cor. Observe que a emissiva não lança a luz, emissiva apenas configura esse objeto para parecer que está brilhando. Agora vamos ter que adicionar uma luz. Agora adicionamos uma luz pontual no centro da lanterna também com o mesmo tom de ciano. Isso é um tornado de língua. Logo após nosso orbe, vamos em frente, e agora digite uma luz, dê a ele uma identificação de lanterna-luz, e o tipo vai ser um ponto. Aí está a nossa luz pontual, a intensidade é de 0,2. A posição será ligeiramente acima do fundo da lanterna. Vamos dar-lhe uma cor ciana como antes, e depois vamos garantir que esta luz possa lançar sombras. Lembre-se desta capitalização aqui para esta propriedade, sombra
elenco é muito importante. Não se esqueça de suas aspas duplas, não se esqueça desses sinais de igualdade. Vá em frente, e agora termine essa etiqueta com um sinal maior que, e você pode ver que são muitas sombras sendo lançadas, uma de cada uma dessas lanternas, e uma de ambas as luzes direcionais, e é isso. No canto superior esquerdo, você pode clicar em “Mostrar”
e, em seguida, em uma nova janela, e você pode compartilhar o URL desta página da Web com qualquer pessoa que você gostaria de ver seu modelo de VR. Se desejar, agora você pode carregar sua experiência de realidade virtual no fone de ouvido de realidade virtual. Se você tiver um Google Cardboard, carregue o URL no seu telefone, clique no botão VR no canto inferior direito
e, em seguida, coloque o telefone no Google Cardboard. Dê uma olhada através da lente. Você pode ter que se virar para encontrar seu templo. O processo é semelhante para um Oculus Quest, acessar o Navegador Oculus e acessar o URL. O Navegador Oculus acessará o site diretamente no modo VR. Divirta-se. Isso conclui esta lição. Nesta lição, abordamos componentes de várias propriedades e diferentes tipos de luzes em A-Frame. Em seguida, praticamos ambos os conceitos adicionando cor e iluminação à cena. Se você quiser acessar e baixar esses slides, visite este URL. Isso conclui a Etapa 2, adicionando cor. Na terceira e última etapa, adicionaremos movimento à sua cena.
6. 3ª etapa. Movimento: Bem-vindos à Lição 6. Nesta lição, começaremos a adicionar movimento à sua cena. Comece navegando para este URL, aaaiv.in/vr101/step3. Isso abrirá um novo projeto Glitch. Como antes, sugiro colocar suas janelas de falha e SkillShare lado a lado, como mostrado aqui. Um quadro em si não inclui suporte para o primeiro passo de nossos cinco passos e sistema Star. No entanto, um desenvolvedor terceiro criou um sistema Star que podemos usar. No seu código, este é o nosso passo três. Eu já minimizei o navegador de arquivos e o lado esquerdo, e abri a visualização. Se você ainda não abriu a visualização, clique no show no canto superior esquerdo e selecione Próximo ao Código. Na linha 9, eu já adicionei uma linha de código que permite que você use este sistema estelar de terceiros. Vamos agora adicionar este sistema estelar ao código. Logo abaixo da sua cena A, vá em frente e crie um novo componente, uma entidade. Sistema estelar é igual a um raio de 200. Este raio de 200 faz com que algumas estrelas pareçam maiores e outras pareçam menores. Você provavelmente está se perguntando, bem, onde está a moção? Essa é uma ótima pergunta. Ainda não há nenhuma moção. Teremos que adicionar um pouco de movimento ao chão a seguir. O chão vai ser substituído por um oceano, como na nossa foto. Bem, assim como com um sistema estelar, um quadro em si não suporta um objeto oceânico. No entanto, um dos um quadro Bella of Brisk criou a noção de que podemos usar. Dentro deste código, vamos rolar todo o caminho até o
fundo onde está o chão. Este solo é apenas um avião. Vamos remover esta multidão para mim, esta é a linha 71. Vou apagar este avião. Em vez daquele avião, vamos definir um oceano. Eu já criei código para o oceano em um arquivo chamado ocean.js. Se eu clicar no navegador de arquivos no lado esquerdo aqui, você pode realmente ver o ocean.js. Por enquanto, não precisamos nos preocupar com o conteúdo desse arquivo. Vamos fechar este navegador de arquivos e mais uma vez, e agora vamos adicionar o objeto oceano no fundo muito, muito fundo. Agora vamos digitar um oceano. A posição é igual a 00.10. Isso vai movê-lo para cima apenas um pouco do chão. Vamos dar-lhe a capacidade de receber e lançar sombras. Vamos torná-lo bastante profundo e bastante amplo. Vamos então configurar o quão rápido e lento ele realmente flutua. Você pode alterar esses valores da forma que achar melhor. Eu defini alguns valores arbitrários aqui. Vou dar-lhe uma amplitude de zero, variância de amplitude de 0,2, velocidade de 1,5, e variação de velocidade de um. Mas você pode mudar esses valores no entanto, você gostaria de ver como o oceano se comporta e reage. Agora vamos definir sua opacidade para um, modo que isso não é transparente. Nós também vamos definir a densidade dos pontos nesse espaço para 50. Há muito mais polígono a circular ao redor para simular a água. Agora você vai dar uma cor, 841fte, e adicionar um sinal maior que para completar sua tag oceânica. Agora nosso oceano é uma tonalidade roxa. Nós vamos adicionar outra tag oceânica que é transparente para que haja um pouco mais de comportamento semelhante à água. Então a posição de um oceano é igual a novamente, a mesma posição, então é um pouco fora do chão. Você vai dar a ele a capacidade de receber sombras, uma profundidade de 50, largura de 50, então o mesmo tamanho. Vamos agora torná-lo um pouco transparente. Vamos fazer com que isto tenha um pouco mais de variância na amplitude. Vamos dar-lhe a mesma velocidade e a mesma variação de velocidade. Então a densidade, ou quantas ondas você pode ver aqui, será 50, e então a cor será a mesma cor que antes. Isso completa o nosso oceano. Você pode ver agora a visualização no lado direito. Em seguida, vamos mover as lanternas. Vamos traduzir ou mudar as posições e girar cada uma das lanternas. De volta ao código. Aqui, vá em frente e role até onde você está as lanternas estão. Neste caso, temos o centro da lanterna aqui na linha 40. Para animar um objeto usará o componente de animação, como acontece com outros componentes que você já viu anteriormente, o componente de animação tem várias propriedades. Vamos criar uma animação agora. Em um quadro, você pode criar várias animações para um único objeto adicionando dois sublinhados e adicionando um identificador exclusivo. Neste caso, vamos clicar na tag de início aqui na linha 40 logo antes desse sinal de maior que. Novamente, logo antes deste sinal de maior que, vamos pressionar enter e digite animação. Vamos dar-lhe dois sublinhados e, em seguida, um identificador único. Neste caso, vamos chamá-lo de animação de posição. Existem três propriedades necessárias diferentes para qualquer animação. A primeira é que você precisa especificar qual propriedade você deseja animar. Neste caso, você vai animar propriedade position. Vamos digitar a posição da propriedade. Certifique-se de adicionar um ponto-e-vírgula logo depois disso. Há uma segunda propriedade que precisamos adicionar, que é o valor inicial. Neste caso, a posição inicial será a posição original do objeto, ou zero um negativo três. Aqui vamos definir de zero um negativo três ponto-e-vírgula. O terceiro valor necessário é o valor final. Neste caso, a posição final é alguma posição arbitrária. Eu coloquei negativo um para negativo quatro. Aqui dois é negativo um para negativo quatro. Lembre-se, espaços entre esses valores, sem vírgulas, certifique-se de que há um ponto e vírgula. Existem algumas propriedades de animação extra dispostas a definir para garantir que sua lanterna continue se movendo. Vamos definir loop como true, para que ele continue a loop este espaço depois que os dois pontos é completamente opcional. Você vai notar que eu tenho sido inconsistente com isso, infelizmente. Mas este loop verdadeiro irá loop a animação definitivamente. Se você não definir o loop, a animação verdadeira ocorrerá apenas uma vez. Em seguida, vamos definir a direção ou apenas dir: alternativo. Isso significa que a lanterna se anima em ambas as direções do ponto A ao ponto B e de volta. Se você não definir a direção para alternar, a lanterna será animada do ponto A para B e,
em seguida, saltar para trás e animar do ponto A para o ponto B novamente. Em seguida, vamos definir a duração curta para o nosso dur para 8,5 segundos. Vamos definir aqui 8500 porque isso é medido em milissegundos. Vou adicionar um ponto-e-vírgula. Agora que eu fiz isso, terminamos com essa animação. Você verá na pré-visualização agora que a lanterna está se movendo, certo ou não? Sim, bem aqui. Agora ele desapareceu por um tempo lá. Você vê que a lanterna está realmente se movendo um pouco. Mas nós queremos fazer agora é fazer a lanterna balançar um pouco com alguma rotação. Logo depois disso, vamos digitar a rotação de animação é igual a e a propriedade será a propriedade de rotação desta vez, vamos dizer que é de cinco dez cinco, e para negativo dez cinco cinco negativos. Você pode definir isso para o que você quiser. Apenas certifique-se de que são pequenos valores para que ele não está girando para agressivamente. Assim como antes, vamos fazer loop nesta animação para sempre. Vamos alternar direções para que ele se
anime suavemente entre dois pontos e a duração será de dois segundos, então 2.000. Terminamos a animação de rotação, mas o que vocês notarão é que a lanterna não está balançando. Não está girando em tudo. Vamos em frente e puxar o inspetor como aprendemos na última lição para ir frente e apertar a opção de controle e I. Agora, se você olhar para esta lanterna, entrar e clicar na lanterna lado esquerdo aqui, o no centro da lanterna, e você verá que há a posição de animação exatamente como esperaríamos, mas não há rotação de animação. Isso deve dizer que há algo errado com o nome. Na verdade, se você olhar para o lado esquerdo, você
vê o inseto? O inseto é muito sutil. Este é um sublinhado em vez de dois sublinhados. Como dissemos antes, a animação deve ser seguida por dois sublinhados e, em seguida, o identificador. Vamos em frente e adicionar o segundo sublinhado aqui. Agora a lanterna está claramente balançando, girando e se movendo. Novamente, certifique-se de que você sempre dobrar sublinhado, certifique-se de que você tem seu sinal de igual, seus ponto-e-vírgula, dois pontos, e apenas em geral certifique-se de que seu código corresponde ao meu exatamente aqui. Isso é tudo para as lanternas. Vamos em frente e passar para a próxima parte. Vamos agora definir animações para o Orbe das Lanternas. Vai pulsar e crescer em intensidade e depois encolher em intensidade. Vá em frente e desça até a esfera. Isto lá vai haver orbe de lanternas bem aqui. Vamos mudar a opacidade da esfera para que a esfera apareça brilhar intensamente e, em seguida, mais vagamente alternadamente. Mais tarde fará a própria luz iluminar e escurecer de acordo. Como antes, vamos especificar a propriedade para animar para o valor inicial e o valor final. Loop infinitamente e direções alternadas. Aqui vamos definir animação-__opacidade. Vamos dar a ela a propriedade que queremos animar. Vamos dizer onde anima de onde anima 2s. Este é o valor n um. Vamos fazer um loop para sempre e então alternar direções para a animação. Certifique-se de ter seus dois-pontos e ponto-e-vírgula e aspas
duplas é igual a sinais, sublinhado duplo toda a pontuação. Agora você pode ver que a esfera está realmente mudando a opacidade. Este, o do centro e o do lado direito, todos eles estão mudando. Isso conclui nosso Orbe Lanterna ao meu lado para realmente animar a própria luz. Faça uma luz iluminar e escurecer. Vamos ir em frente e rolar para baixo até a luz em si. Aqui queremos animar a luz das lanternas para iluminar e escurecer periodicamente. Vamos adicionar animação. A intensidade da distância é igual a. Então vamos nomear a propriedade. Você quer dizer do que é, o valor inicial do valor n. Então vamos fazer um loop para sempre e definir a direção para alternar como antes. Agora esta é a intensidade da luz. Quão forte é a luz dentro de seu raio de impacto? Mas queremos realmente expandir a luz para que sua distância ou o raio de impacto realmente aumente. Vamos em frente e adicionar outra animação. Isso será animation_distance. Isto vai mudar a propriedade de distância da nossa luz. Vamos começar a partir de um padrão para que ele pareça afetar mais de uma região em torno dele, loop para sempre e direções alternadas. Você pode ver aqui que apenas a luz ou a lanterna e o centro está realmente animando as outras duas lanternas no local ou não. Eu vou ir em frente e animar as outras duas lanternas também. Sinta-se livre para acompanhar e também pode personalizá-los como quiser. Isso é tudo para a cena. Agora você pode ver que todas as três lanternas estão balançando. Se você quiser acessar e baixar os slides, visite este URL. Nesta lição, adicionamos vários tipos de dicas de movimento. Isso conclui esta experiência de realidade virtual. Nós cobrimos os três passos envolvidos para criar qualquer experiência de realidade virtual. Primitivas, cor e movimento.
7. Conclusão: Parabéns. Agora você terminou uma experiência de realidade virtual, que você pode compartilhar com amigos, familiares, realmente qualquer pessoa que você quiser. Nós cobrimos primitivas, iluminação, movimento, mesmo se você esquecer os códigos específicos, as técnicas exatas que usamos. O que eu espero que você tire é quão acessível este veículo para contar histórias é. Como é fácil começar a criar um mundo virtual com A-Frame. Espero que esteja animado para experimentar seu projeto de aula, porque eu definitivamente estou. Por favor, deixe-me entrar no seu mundo virtual, e carregue seu projeto para a guia projetos e recursos. Certifique-se de incluir uma captura de tela do seu mundo virtual e inclua um link para que possamos acessar sua experiência de realidade virtual. Se você estiver interessado em aprender mais sobre codificação criativa, certifique-se de me acompanhar no Skillshare para obter atualizações quando uma nova aula for lançada. Se você estiver interessado em aprender mais sobre ciência de dados ou aprendizado de
máquina, confira minhas 101 aulas no meu perfil Skillshare em Python,
SQL, ciência de dados, visão computacional e muito mais. Parabéns novamente por chegar ao final do curso, e até a próxima vez.
Alvin Wan, Research Scientist
