Crie uma cena explorável em 3D com Three.js | Kevin Newcombe | Skillshare
Pesquisar

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Crie uma cena explorável em 3D com Three.js

teacher avatar Kevin Newcombe, Front-end developer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução

      0:57

    • 2.

      Uma visão de 3D na web

      2:06

    • 3.

      Introdução a three.js

      2:15

    • 4.

      Configurando um ambiente local

      2:51

    • 5.

      Como configurar uma cena de three.js

      6:34

    • 6.

      Adição

      2:32

    • 7.

      Explorando uma cena 3D

      1:44

    • 8.

      Como importar modelos

      5:55

    • 9.

      Adição

      6:42

    • 10.

      Posicionador

      8:47

    • 11.

      Como detectar cliques

      6:19

    • 12.

      Exibindo as dicas de ferramenta

      10:06

    • 13.

      Conclusão

      0:35

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

1.110

Estudantes

3

Projetos

Sobre este curso

Aprenda a criar uma cena que permite que os usuários exploram modelos 3D em um navegador web usando o WebGL. Este curso vai ensinar o básico de usar de of de uma biblioteca de Javascript 3D para exibição e interagem com modelos. Não é necessário saber de modelagem ou animação, embora seja necessário que você tenha pelo menos uma compreensão básica de Javascript. Mais de modelos e bibliotecas O produto final pode ser visto em https://codepen.io/kevinnewcombe/full/3a278d1a654f7f1ab187ddd5d5d836

Conheça seu professor

Teacher Profile Image

Kevin Newcombe

Front-end developer

Professor

Hi there! I'm Kevin Newcombe, a front-end developer from Edmonton, Canada. I focus on CSS and HTML, but I also like to get creative and play with things like TensorFlow and WebGL.

Visualizar o perfil completo

Level: Beginner

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Eu corri. Bem-vindo à construção Explorar papel três D cena com três Jazz Eu tenho um novo vir na frente do desenvolvedor, mas eu amo jogar em torno de três D, e este é um projeto que combina os dois. Estou muito entusiasmada com isso, e juntei-me a nós hoje. Vou orientá-los sobre como juntar HTML, CSS, CSS, JavaScript e três modelos D. Você apenas Lionel interage até que ele dê dicas em um navegador da Web? Isso pode ser usado para mostrar o site de produtos e permitir que os usuários para explorá-los em um assunto de indústria altamente visual. Começaremos aprendendo a adicionar uma cena de mob, iluminada e, em seguida, dar aos usuários a capacidade de explorá-la girando. E esta noite finalmente adicionará Call SNC, que, quando clicado, traremos mais informações relevantes para esse modelo de área. Até o final deste tutorial, você tem uma compreensão de trabalho de usar três Js, que é uma biblioteca que poderia ser usado para você adicionar e interativa três D e navegador da Web. Nenhuma parte do conhecimento de três D é necessária, embora eu recomendo que você tenha alguma experiência em JavaScript. Junte-se a mim no placar. Supondo um bom quando você 2. Uma visão de 3D na web: então três D na Web é feito usando algo chamado Web GL, que significa Web Graphics Library. É um FBI JavaScript para renderizar dois gráficos D e três D interativos. E o que isso nos permite fazer é realmente colocar três D em um navegador da Web de uma maneira que é realmente rápido e eficiente e realmente não atolou suas máquinas. E ele poderia ser exibido em coisas como smartphones poderia ser feito em computadores desktop. Não há perna, há muita interatividade nisso. E assim ele nos permite fazer coisas como este caminhão animado no topo do site de transmissão, que é apenas um modelo três D de seu logotipo. Sabe, eu posso arrastar isso. Posso movê-lo. Também temos algo como este Mars Rover, que é da Biblioteca de Propulsão a Jato da NASA. Eu poderia dirigir por aí usando minhas chaves para cima, para baixo, esquerda para baixo, esquerda, direita, vem um trem. É um modelo bastante complicado, mas você viu o quão rápido ele carregou. Temos este fóssil da National Geographic e usando buggy l e alguns dos três modelos D podemos exportar de uma forma muito interessante, interativa. Então, como eu estou tipo de rolagem sua resposta para o meu mouse em e gasta o modelo como diferentes chamadas para ele destaca áreas de importância. Então é um bom dispositivo de contar histórias aqui, e também temos isso da Mercedes Benz. Então vá para o Explorer. O que é isto? Cargas. Você pode realmente ver o carro como um modelo três D você pode. Você pode olhar ao seu redor se você quiser ver o que foi segundo configurações diferentes e dizer cores de tinta diferentes. Você pode clicar sobre aqueles, ver o que parece com rodas diferentes. Então, qual prisão poderia ser usada para adicionar um monte de detalhes interessantes. Ou adiantado é como uma peça central, ou talvez apenas como um pouco de florescer para qualquer site. E é feito de forma justa. Simplesmente, como os navegadores são capazes de lidar com isso e um assunto realmente rápido e eficiente. Então você começou Teoh se tornar um pouco mais e mais popular agora, então vamos explorar como fazer isso no próximo vídeo 3. Introdução a three.js: a fim de obter todos os três d em um navegador da Web, precisamos dizer coisas como como a geometria é configurada, como os materiais lidavam com coisas como reflexão de luz ou a cor de tais materiais. Como a câmera funciona, qual a profundidade de foco é coisas assim. Então, se estamos olhando para fora, por exemplo, como cubos em cena, estamos vendo isso em Strange. É um monte de detalhes. O que estamos explicando onde na cena, cada ponto em cada triângulo em cada rosto que compõe o Cubo vive. Então, como você vê, há um monte de detalhes aqui, e há um pouco de uma chance de erro se você sabe que você perde algo como absolutamente colocar um positivo em vez de negativo ou perder uma vírgula, ou possivelmente colocar as coisas na ordem errada. Então o que vamos usar aqui é uma biblioteca chamada três Js. Então, se você for lá a home page deles, o oral é três valetes fora do trabalho. Você pode ver alguns dos exemplos aqui, e alguns dos que acabamos de ver. Aqui está o caminhão Você transmite. Vamos investigar um pouco da documentação. Aqui está um Yacine básico, e eles vão adicionar um cubo à cena. Então, se você olhar para o país destacaram aqui, este é todos os dados de uso de cocaína para ah 23 Js dois fora de Cuba para a cena passando linha por linha. A primeira linha diz, aqui está a geometria. É uma caixa que tem uma unidade de largura, uma unidade de profundidade e uma Utah. Todo o material em si é verde. Vamos adicionar estes dois juntos e vamos adicioná-lo à cena. Então são quatro linhas de código em uma caixa para uma cena de três rápido em oposição a todo esse código , que é apenas meio pesado e às vezes fica repetitivo. E o mesmo, talvez a facilidade de uso possa ser usada para iluminação. Então, por exemplo, se nós olharmos, se você quiser ver como ter uma luz para um três Js visto você definir a luz, você diz a ele a cor e apenas adicioná-lo. E então há um monte de padrões aqui, você sabe, você sabe, exemplo, por padrão, ele não desconta sombras. É uma luz ambiente, que significa que uma espécie de espalha uniformemente. E isso é realmente algo. Adicione, ao contrário de você, por exemplo, iluminação com JavaScript apenas reto. Então a grande coisa sobre três jazz é realmente permite que você tipo de chegar ao que é único para a cena, e eu vou ter que me preocupar muito com os aspectos repetitivos dele ou as coisas que você está vindo nós temos que fazer. E vamos investigar como ver e ter que realmente configurar seu computador para lidar com três Js no próximo vídeo, então veremos então. 4. Configurando um ambiente local: Então vamos começar a ver em três Js e vamos configurar o nosso ambiente local aqui. Basta ter todo o software instalado e tudo o que precisamos para trabalhar nele localmente. E quando eu digo que vamos trabalhar nisso localmente, isso significa, vez de fazer uma mudança, carregá-lo Teoh um servidor Web e visualizá-lo, que pode levar um pouco de tempo. É difícil, meio que transferido para frente e para trás. Vamos editá-lo nos nossos próprios computadores. As coisas que salvámos. Podemos visualizar o que parece. Sabe qual navegador? Se eu começar, vou para os três sites Js e vou para a documentação. Vamos executar as coisas localmente, e há algumas maneiras de fazer isso por causa de configurações de segurança e navegadores da Web, você precisaria substituir aqueles t visualizar alguns desses arquivos ou você precisaria executar um Servidor Web, e eu recomendo vivamente que você não substitua nenhuma configuração de segurança padrão no navegador da Web . Então nós vamos ver como você executa um pequeno servidor legal? E neste caso vamos usar? Não, Js e eu vamos começar dizendo que estou usando um Mac aqui. Se você estiver usando qualquer outra plataforma como o software Windows ou Lennox pode ser diferente, mas os princípios do mesmo. Então, se eu copiar isso para um terminal, quero dizer, é tudo nota. Ótimo. Então isso não está instalado no meu computador e realmente colocar algo em funcionamento. Vou criar uma nova pasta. Vou chamar-lhe “Cuidado de demonstração “no meu computador . E então eu vou CD naquele diretório. Então CD Demo Grant. E agora vou rodar este pedacinho desta linha para recomeçar as minhas anotações. Então o que acabamos de fazer foi instalar um servidor. Começamos a executá-lo. Se eu copiar um desses para um navegador, ele vai me mostrar o que está naquela pasta. Então isso está realmente nos mostrando o conteúdo da demonstração. Então, para provar, vamos abrir o código da FIA. Vamos criar qualquer arquivo Olá mundos e salvá-lo, como na explicação e em cada um para o seu Ok. Então, agora, se voltarmos a um navegador e você não puder atualizar, veremos o conteúdo desse arquivo. Então é assim que funciona localmente. Agora vamos começar a adicionar três prisões à cena do crime tão bem aqui. E se você olhar no arquivo de download, vamos começar a baixar todos os recursos que precisamos para isso. E vamos ver como realmente adicionar arquivos e como fazer um canto básico e funcionar no próximo vídeo, então veremos você então. 5. Como configurar uma cena de three.js: Agora que temos o nosso serviço configurado, podemos começar a construir a nossa cena de três D. E se você voltar para três Js site, vamos clicar no link de download para começar a baixar biblioteca que já foi em frente e feito isso Bem, basta descompactar isso. Então, se eu voltar aos meus downloads, vou pegar esses arquivos. E o que eu quero fazer é eu quero começar a adicionar estômago a biblioteca para o servidor que eu vou estar executando, correndo, visto fora, então voltar para três Js não construir mestre e agarrou três patinhos Js ponto que são os homens ificada versão da biblioteca. Vou mover isso para o servidor. Todos criaram uma pasta chamada Js uh, acelerar isso e voltar para o meu editor de código. Então, fora de arranhões, um realmente rápido parou eu cheiro criar uma cena aqui. Que criativo. Basicamente arquivo html que apenas carrega que JavaScript e porque ele está correndo fora da tela em vez de apenas como adicioná-lo diretamente ao html bem, basicamente, basta ter uma tela preencher toda a tela, Então tipo estilo fechar texto ponto CS us uh margem de corpo html. Zero uh, tela e todos os Web GL são executados fora da tela, então nós estaremos adicionando uma tela da cena. Então falando isso e então vá em frente e crie um básico visto em três Js. Então volte para o nosso comprometido lá e tudo o que ensinamos aqui tudo o que estamos aprendendo aqui. Isso é direto da documentação de três na TV começando área tão bem, arquivo de crédito para manter nosso código personalizado. Então, uh, o corpo e então nós vamos apenas criá-lo aqui. Viu um médico? Sim. E primeiro vamos começar criando uma instância de três das três cenas de jazz até agora, cantar é igual a nova cena de três pontos e vamos adicionar uma câmera. Então, para isso, vamos adicionar uma câmera de perspectiva. Existem alguns tipos diferentes de câmeras que você pode usar, mas este tipo de combina mais câmeras do mundo real com coisas como profundidade de foco e perspectiva. Então de nossa câmera é igual a nova câmera perspectiva de três pontos e nós damos a ela o campo de U. S. A. 75. Qual seria o tipo de ângulo que a câmera pode ver? Então 75 a proporção será janela ponto inter com dividido por ponto janela em suas alturas. Ah, o mais próximo que a câmera pode ver é 0,1, e o segundo mais é 1000 em três DS. Não há unidades. Então, se você está vindo de algo como CSS estavam usando pixels ou Ari EMS, Então é todo tipo de relativo a si mesmo. Estamos na câmera. Bem, mover a câmera um pouco para trás do centro da tela, então ponto oposição câmera disse que é igual a cinco por padrão. Qualquer coisa que seremos. Quando é adicionado, ele é adicionado ao meio da cena, que tem uma ex esposa disse de 000 Então, para isso, vamos mover a câmera para trás um pouco . Então, quando posicionamos as coisas na tela, é olhar para esses objetos. Ok, então agora é uma rendição, Então renderizadores é igual a novo $3 Web GL corredor e renderizadores ponto definir tamanho quando, sem dúvida entre largura e ponto janela em sua altura. E qual é o corpo? Então o corpo do documento Será que uma criança caneta renderiza seu elemento dot dom? Ele vem, Então, se você voltar, este é o básico visto. Não há nada lá. O que há em Cem Gentry? Até agora, geometria é igual à nova geometria da caixa de três pontos. Então este monte de cubo e ele vai ter um com uma maior em uma profundidade de um vai criar material para isso. Então material é igual a novo. Três combina com material básico, então isso será apenas um material. Ele não tem iluminação afetada por padrão, o que vamos fazer mais tarde, mas vamos apenas dar-lhe uma cor verde. Vamos adicionar tudo isso juntos em uma malha de nosso Q B é igual e você re ponto de material geometria de malha ums visto ponto ad Cube. Ok, uh, nós adicionamos à cena. Vamos renderizá-lo na tela. Então deixe animar igual a função para que nós realmente renderizemos a cena na câmera. Se voltarmos para trás, há um cubo e digamos que queremos girá-lo para que tenhamos que chamar anima cada quadro assim solicita animação quadro anima, modo que vai chamá-lo em cada quadro e cada quadro. Vamos realmente girá-lo para cima rotação em cubos ponto x mais y. Então, para cobrir isso, quando a cena começar pela primeira vez, ele chamará esta função animada, e a função animar aumentará a rotação no eixo X por uma unidade de 0,1 ele vai . Desculpe, tenho algo errado. Ordem. Ele renderizará essa cena e então se chamará novamente. Assim, a cada 60 quadros por segundo, aumentará a rotação desse cubo e a leitura ou a cena. Então, se voltarmos, está certo, acrescentando. Então o que queremos fazer a seguir é um pouco de iluminação para isso, e vamos para isso na próxima lição. 6. Adição: Então nós adicionamos um cubo à cena, e ele está girando. Mas não está pegando de qualquer maneira. Então não parece muito realista. E a razão pela qual não está captando nenhuma luz é agora. A maneira que nós temos isso configurado é que ele está usando um material chamado material básico de malha. Há alguns tipos diferentes de material que você pode usar os três Js, e todos eles tipo de responder à luz de forma diferente ou responder a outros objetos de forma diferente. Então, para ir para o material base de malha, você sabe, você pode ver que é em um simples flash comido fora. Mas digamos que queremos realmente ter luz e que reflita e faça sombras. Então vamos a algo chamado material de revestimento de malha. E então há todos os tipos de coisas diferentes que podemos fazer com isso, você sabe, você pode definir a capacidade que você pode definir o quão brilhante ela é, mas nós vamos usar isso em um sentido básico. Então pegue material longo de malha e substitua o material do cubo com malha ao longo tão bem. Diga isso e vai refrescar. Não há nada lá, e a razão pela qual não há nada lá é porque a confusão errada reage à luz. Precisamos adicionar luzes à cena. Então vamos agarrar. Digamos que os holofotes. Assim é um três holofotes e olhar para os exemplos de código. Então aqui está criando um holofote. Está definindo a cor da luz, e está definindo a posição e você pode fazer outras coisas assim, disse Cast Shadow. Ou você poderia definir metade do seu longe. O holofote brilha, mas vamos agarrar isto. Vamos adicioná-lo ou visto e, bem, talvez ele vai movê-lo um pouco mais perto do para o Cubo. Tão bem, disse isso. Dada a Expedição Zero uma posição Y de 10. E é essa cidade posição e ir visto. Adicione holofotes e o que é talvez apenas adicionar mais alguns, apenas para que possamos tipo de captura de luz de alguns ângulos diferentes. Então vamos ter outro que está diretamente acima do Cubo. Então essa é uma exposição de zero posição Y de dezenas. Deposição de Zero, e teremos um que está atrás do Cubo, que será útil depois. Então, o que é isso? Isso e agora se ele bater, refrescante, são vistos, você pode ver que ele está captando a luz um pouco mais com mais precisão. Ok, então na próxima lição, vamos aprender como se mover ao redor deste objeto em vez de girar no som. Então, vemo-nos depois. 7. Explorando uma cena 3D: Então agora temos o Cubo girando sozinho e pegando luzes. Mas queremos que os usuários sejam capazes de lidar com o movimento da cena eles mesmos. E para fazer isso, vamos tirar a rotação automática e vamos ter algo chamado quatro B Controls e ou controles é uma parte de três Js que vem com ele, e permite que os usuários cliquem na janela e eles podem arrastar cena ao redor. Dois escreveram. Ele gira, e eles também podem usar a roda do mouse para ampliar e diminuir o zoom. Então vamos começar indo para os downloads de mais cedo e vai para exemplos controles Js ou porque papéis e vamos adicionar que projeto de bacharel. Então solte na pasta Js com todos os nossos outros JavaScript em voltar para o arquivo de índice principal . E agora que eles são para que a documentação ou controles podem ser encontrados nas três principais docas de gás então vamos copiar o código de Atlanta, vamos pedir controles, vamos adicioná-lo à cena, vamos dizer-lhe para controlar a câmera e os renderizadores de ogivas anteriores em. Em seguida, vamos também tirar a rotação padrão para o Cubo. Então volte. Só estou controlando o farol. Eu cliquei na cena e estou arrastando por aí. Se eu usar minha roda de rolagem, também posso ampliar e diminuir o zoom dela, e isso é ótimo. Então adicionamos um cubo à cena. Nós deixamos, e agora estamos conectando o controle com a boca deles, então há um pouco mais de interatividade nisso. Então isso é bom com o Cube. Mas vamos dizer que queremos fazer alguma outra geometria e vamos falar sobre isso no próximo vídeo , que vai ver você então. 8. Como importar modelos: Então agora queremos adicionar alguma geometria que é mais complexa do que apenas um cubo, e podemos fazer isso criando vários cubos e vários cilindros e colocando-os juntos até que eles se assemelhem a algo que gostamos. Ou também podemos importá-los de fontes externas. E três, vamos importar arquivos chamados GLT F e G L T F. Eles são modelos. Eles têm texturas e iluminação assadas neles, mas eles podem ser criados em algo como Maya ou liquidificador e facilmente importados para Web GL E há alguns sites diferentes lá fora dos quais você pode baixá-los. . Baixar os existentes de I pessoalmente gosto Sketch Fab. E assim o euro é um esboço. Ter ponto com. Se você se inscrever para conta gratuita, você pode procurar, Digamos, bem, em carros. Você. Há modelos de carros diferentes. Alguns deles são pagos, alguns são gratuitos. Mas para a pessoa deste, digamos que queremos sair do baixo para ser visto. Então vamos fazer uma busca pelo Rickenbacker. Ok, e vamos clicar para download. Então, há alguns livres aqui, então ele escolheu este, e então isso vai mostrar a vocês uma prévia do modelo. E isto é para baixo com isto. E antes de baixar qualquer coisa que você precisa para criar uma conta, você estará conectado a ela. Mas a conta é gratuita, e alguns dos modelos são gratuitos. Então vamos fechar isto. Vamos mostrar isso em nosso localizador, e então vamos colar isso em nosso projeto. Então isso é chamado de modelo. Ok? E então, se você for para três, podemos carregá-lo por nós precisamos ter algum JavaScript adicional para o projeto. Teremos que ir ao nosso dentista. É pasta vai voltar em três, vai entrar em exemplos Js carregadores e, em seguida, pegar o G l t f letra Tom e, em seguida, ritmo fora endossando. Agora precisamos fazer referência a isso. Então teremos essa história no próximo arquivo. G l t f carregador Doutor. Sim, é um pouco. Então vamos remover o nosso cubo aqui. E, uh, carregador de barras é igual a novo carregador de três g l t f não carregar, e então vamos chamar a cena. Então carta é modelo barra não parece G. Lt f uma vez que é carregado. Bem, na verdade, carregue na cena. Isso é certo. Precisamos passar em GLT. Ok, isso vai carregar o goc fr que acabamos de baixar. Uma vez que ele é baixado, vamos passar esse objeto para a cena e depois vamos adicioná-lo de volta e bater. Atualize Neste. Não devemos mais ver o Cubo. Deveríamos ver o baixo. Então, usando os controles, acabamos de adicionar, Podemos girar em torno dele, ver a luz e pegá-la, e lá está ela. Então agora que temos a geometria adicionada à cena, vamos mudar mais algumas coisas. Como vemos, ele não está realmente virado para a câmera, e é difícil de ver contra o fundo. Então vamos entrar sozinha mudando a rotação. E uma vez que estamos adicionando cena, vamos adicionar, uh, g L T f não vi ponto Rotação foi definida. Portanto, rotação fora do trabalho em qualquer três geometria DS ou luzes ou câmeras. Então vamos definir isso para estar no eixo X. Itália zero graus sobre o porquê e definir acesso. Será de 270 graus, então qualquer vez que você definir rotação fora, ele vai na ordem de X Y Z. Quando você faz alguma rotação em três, ele precisa estar em brilho, que eu não sou super falha com. Então vamos usar um pouco de matemática construída em três para converter graus Radiance. Então, cão de matemática de três pontos Doc, Trade 270. Isso é nos eixos Y, e vamos fazer isso nos eixos definidos. Ok, então agora ele está de frente para a câmera, e é difícil de ver agora porque está em um fundo preto, mas podemos mudar isso. Então, se você subir para alugar para, podemos ir renderizadores definir cor clara. O que significa que se não houver nada aparecendo aqui, é como a cor de fallback padrão, e vamos passá-la. Digamos White. Assim como os seus tempos, F f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f F f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f fit it Então vamos mover a câmera. E também e isso pode ser apenas mudanças para ver como ele se parece. Ela é boa, e talvez vamos fazer a iluminação em torno de um pouco, porque provavelmente é um pouco longe demais. Então, se mudarmos a linha de frente para, digamos, estar à frente, então X será zero descontroladamente zero e estes ed serão, digamos, três e o que é a luz superior para estar diretamente acima dele por unidade de três. E vamos mudar a luz de fundo para estar diretamente atrás dela por unidade de 30 para que você a importasse . É na frente e no centro. Ele está de frente para o usuário quando ele carrega pela primeira vez, e nós podemos parecer dentro dele. Mas a órbita controla. Nós só tivemos. Então agora é hora de adicionar alguma faculdade para que os usuários possam tipo de clicar em áreas específicas dele e ver detalhes específicos sobre essas áreas. E vamos fazer isso na próxima lição, então nos vemos depois. 9. Adição: Então, agora vamos em frente e adicionar dicas de ferramentas à cena. Então vamos voltar para a nossa base de código. Vamos apenas criar comentários de cosom aqui, uh, outros. Então, bem, criando um raio que vai armazenar todos os marcadores que irá retornar para você mais tarde, e nós vamos criar outro array, que armazena todos os dados. Aposte esses. Então ele vai conter tudo o que você precisa para cada marcador específico, e isso vai coisas como a posição e a descrição que tipo de aparece 17 cliques nele. Então bem, grande vista Array vai chamá-lo posição de dados de mercado irá armazenar isso como X Y disse assim. 0.2. Vamos mudar isso mais tarde. Então isso é apenas um tipo de espaço reservado. E essa foi outra que, para fins de demonstração, se posicionará à esquerda. Ok, então agora vamos olhar para isso. Então, se vamos para objeto de chaves de dados do marcador para cada marcador é igual a mais chave de dados. Então, o registro do console vai viver através de todos os marcadores e passar ao longo do índice , então novos grupos algo aqui. Certo, então você vê, é meio que registrando os dados da direita anterior. Então agora queremos criar alguma geometria associada com Parker e foi bom para a nossa geometria . Vamos fazer um turista. Assim, um turista será essencialmente o golpe da ponta da ferramenta. Então, novo liberado para nós, John Advogado, e daremos ao raio um 0,6. Vamos nos dar com 0,1, e vamos dar-lhe 100 segmentos e material em si, uh, uh, novo material básico de malha de três pontos. E vamos usar materiais básicos de bagunça que não queremos descontentes com a iluminação. Sempre quisemos ser uma garganta de cor consistente. Vamos fazer essa cor cinzenta. Está bem. E turistas distantes equivale a novos três pontos de malha geometria e material. E também queremos adicionar isso a um objeto três D. Então, um objeto de três D é basicamente vai ser um recipiente ao qual vamos adicionar objetos. E podemos quando movermos esse objeto. Quando você move o recipiente três, movemos todos os objetos dentro dele. Então vamos criar mais por contêiner, novos três Dr Objects em três e vamos adicionar os turistas ao contêiner marcador. Certo, Certo, vamos fazer uma coisa parecida, mas teremos um círculo dentro disso. Então temos o derrame. E vamos preencher essa dica de ferramenta. Geometria distante é nova geometria de círculo de três pontos, e vamos dar-lhe um raio de 0,5 em e 32 segundos, e vamos dar-lhe um Phil branco, exceto que este vai ter alguma transparência para porque nós queríamos ser semi-real negócio negócio. Ver tripes. Então defina a cor branca conjunto transparente. Verdadeiro. E então vamos definir a capacidade para 0,5. E, novamente, copiaremos o marcador. Mesh vem e nós também vamos definir a posição. Agora que adicionamos os turistas e o círculo ao contêiner marcador, vamos posicionar o contêiner marcador na tela. Assim marcador conjunto de pontos de posição do recipiente. E já que estamos olhando para o marcador, cuidaremos das posições. Então, para cada marcador, você sabe, queremos que o 1º 1 seja 0002 e o 2º 1 seja 0,20 não. Então vamos capturar este marcador de set A oposição zero machucou, perturbado procurado na sessão de mercado também, e vamos adicionar que o mercado entra em cena. Então visto ponto anúncio Marco recipiente. Então, agora, se voltarmos e revertermos a cena, devemos ver dois marcadores. Um terá o nosso convidado terá ambos um contorno cinza que o interior será semi transparente com 50% de opacidade e branco, e cada um estará na posição única que estabelecemos aqui. Agora, se você fizer isso, sim, podemos ver que temos o círculo de nós temos o que está um pouco atrás só porque nós realmente não movê-lo para a frente. Então, se pegarmos o 2º 1 e alterarmos o valor para 0.2, você realmente verá isso. Vê-lo movendo-se para a frente. Então lá estava você nas posições e em seguida vai ter alguma interatividade com eles. Vemo-nos na próxima lição. 10. Posicionador: Então, agora que temos os 20 passos adicionados à tela, precisamos movê-los para a posição retrato. E podemos fazer isso por um pequeno cheque de adivinhação. Ou também podemos usar algo chamado “dúvida dot gov”. E o que o médico que ele faz é nos permitir atualizar e visualizar valores em tempo real. Então, por exemplo, se eu for ao site deles, é essa coisa lá em cima, certo? E eu posso ajustar alguns dos valores à direita e vê-los refletidos no JavaScript à esquerda. O que vamos fazer é adicionar isto à cena só para nos ajudar a obter alguns valores preliminares com que tipo de copiar e colar. Então eu vou baixar dot, dot gooey. Vou dizer isto ao meu projecto. Voltar para o meu arquivo de índice adicionado à cena, ir dabs homens pegajosos assistir sim, e voltar para a cena e, em seguida, permitir um pouco de espaço para isso e dizer ajudante, então isso só vai capturar alguns dados de teste. Não vamos manter isso em tempo integral. Isto é apenas para obter alguns valores iniciais e colocá-los no laboratório real. Então eu vou apenas criar uma função chamada em helper. Chame-o, ajudante , e eu vou adicionar um pouco como um círculo de espaço reservado. Até agora para geometria é igual a notícias. Três pontos temidos fazem o raio de 0,5 e vão torná-lo vermelho. Só para que ele realmente se destaca contra o fundo e venha para Então você marcador Apolinar é igual a novo material de geometria de malha de três pontos. Essa é a cena. É e posição em frente à base. Então o valor x de zero valores zero esse valor de 0.1 É agora se eu visualizar Crips, você apenas definir esta oposição de mercado que definir. Ok, então é aquele pequeno ponto vermelho lá, e eu vou mover isso por aí com Dot Gov, então um monte de indiscutivelmente igual a você ponto ponto do nosso acordo. Foi, sem dúvida, não pegajoso. E então todos vão gooey dot anúncio marcador ajudante, oposição X. Então o que isso está fazendo é isso é adicionar uma instância do pai dot gov para a cena e dizer que queremos manipular marcador, sua posição auxiliar e o valor exato que queremos manipular é X, e queremos que haja um mínimo de um e um máximo de um. Então, agora, se uma pré-visualização isso deve vê-lo no topo, certo? E tem um pequeno controle deslizante. Mas eu vou fazer uma vez que eu meio que colocar isso em um alcance que eu queria ser. Eu só vou copiar esse valor X. Mas como você pode ver, é apenas uma espécie de ir entre os negativos o seu. E isso porque, por padrão, ele só fará números inteiros. Então, bem, diga isso para ser um pouco mais para ter, tipo, membros mais finos. Então temos que pisar. Eu fui pisado. Eu vou deixá-lo ir em incrementos de 0,1 e eu vou fazer isso para o valor por quê e estes que valor . Digamos que eu queira ter um sistema logo acima da ponte, então eu vou nos levar até lá. Talvez eu quisesse me destacar um pouco mais. Assim disse Thies, disse Teoh. Número maior. E digamos que eu quero uma posição para cima. Oh, agarra isso. Essas são as posições X Y Zed que eu quero que meu eventual abuso de mercado tudo apenas tipo de cópia sobre isso. Agora, se eu apertar Refresh. Meu marcador é a posição que dat dot gov nos disse que o marcador inicial estava em para que eu pudesse fazer o mesmo com a cabeça, e eu poderia fazer isso com outros marcadores para a frente. Há outra coisa que é se eu rodar. Os marcadores na verdade não estão girando junto com ele, então eles estão sempre voltados para frentes, e nós queremos que quando o usuário para girar em torno que nós queremos que esses marcadores tipo de sempre olhar para a câmera. Vamos fazer algo para sempre capturar a rotação de controles para cerca de dois controles. Encontre minha declaração inicial e eu vou até você. Limita como os controles podem girar para que nós só queremos girar no eixo Y para que ele vá controles. Você pode definir os homens Max ângulos tão controlados ângulo polar homens. Isso significa que ângulo polar é igual a controles? Estou em tempos completos ou angulares agora, torta de pensamento dividido por dois, então isso significaria que ele só gira no eixo y. Não pode se mover no dito ou está tudo bem, então não posso nos levar em nenhum outro avião agora que eu queira. À medida que os controles são atualizados, eu quero ouvir e mover os marcadores adequadamente. Então vá para os controles. Saí do ouvinte trocado na atualização da câmera. Então isso chamaria uma função chamada na atualização da câmera, que vai encontrar aqui função na data da câmera e o que eu quero que isso faça é passar por todos os marcadores e girá-los junto com o ângulo que as câmeras giraram. Então, volte para o marcador que criamos anteriormente. Vou acrescentar alguma coisa. O Teoh. Adicione todos os mercados a uma única sala. 02 marcadores pontos empurrar recipiente marcador. Então estes estão movendo todos os marcadores para a matriz chamada marcadores. Atualizações da câmera. Eu vou dizer, Deixe câmera ângulo igual controles não fica como um ângulo bonito. E, em seguida, marcadores de ponto para cada mercado de rotação que define zero. Este ângulo de câmera. Zero. Desculpe, você mudou esta variável para o ângulo da câmera? Quando alguém gira os controles, ele está indo Teoh por sua vez, Obter o ângulo dos controles e passar por cada marcador e girar o marcador. Combine esse ângulo de controle para que ele esteja sempre virado para a câmera. Frutas e eu perdi algo aqui, é atingido. Refresque. Oh, ok. Então você vê, como estavam girando nos marcadores iniciais girar junto com as câmeras para que eles estão sempre voltados para a câmera. E a próxima coisa que vamos fazer é adicionar a capacidade de realmente clicar sobre a marca seriamente dados. Então vamos fazer isso no próximo vídeo. 11. Como detectar cliques: Então, agora que adicionamos as dicas de ferramentas, vamos torná-las clicáveis. E vamos fazer algo chamado Ray Casting. Então, o jejum de Ray é usado para ver o que um mouse acabou. Acho que neste caso, queríamos alguém. Alguém clica na tela, nós atirar matriz do mouse para a cena e ver o que intersexo sem linha. Então, se eu fosse pairar sobre este casting de raios nos diria que os ratos sobre um círculo turistas e você guitarra, nós vamos em frente e adicionar grande elenco a cena e nós vamos voltar aqui e G o r Um pastor é igual a uma nova taxa de US $3, Casper e também precisamos manter o controle do rato. Até agora, mouse é igual e você três ponto desertor e vamos voltar para as três ações de jazz e copiar isso diretamente de lá. Então isso vai manter o controle do posicionamento do mouse. Voltem aqueles em movimento, mas copie o ouvinte de eventos. Então, sempre que o usuário mover suas bocas, eles saberiam onde isso está na tela . Está bem. E agora vamos configurar a condessa para receber cliques para que nossa tela seja igual a documentos. Os dardos ficam no meu nome da etiqueta. Tenho a primeira pesquisa e o ouvinte do evento. Então, quando alguém clica, ele vai chamar uma função para que possa começar adicionado e ouvinte. Clique nas velas. Clique. Rasga a função no campus. Ok, vamos montar o Ray Kaster e vamos pegar mais isso, então quebre a casa para o set da câmera. Vamos usar o mouse, e a câmera vai ter uma lista de qualquer coisa que está embaixo do mouse quando eles clicarem nisso, e a única coisa que queremos adicionar a isso é que queremos que isso seja recursivo, então queremos que seja. Se alguém clicar, ele não pega apenas o item superior. Ele meio que deixa através de cada criança do que é útil para usar um objeto. Três. Então Ray Kaster cruza objetos, visto Children True. Então esse vai ser o seu Carson. Vamos armazenar alguns dados sobre o que eles realmente clicaram, e vamos configurar isso. Até agora, Marker é igual a não para um marcador. Os dados para nome de mercado são iguais a não. E agora vamos dizer quando alguém clicar que se o comprimento intersexual, se eles clicaram em algo e ele interagiu, vamos fazer o logout do que eles coletam. Ok, agora, se eu voltar aqui com um clique em um desses itens Desculpe. Encontramos um erro. Eu tenho um erro de digitação se eu clicar nisso e isso nos diz que nós clicamos em alguns itens aqui e nós vamos apenas voltar para nossos marcadores originais e vamos adicionar alguns dados para nos ajudar a realmente capturar o que eles coletaram. Hum, o que temos são marcadores Frigorífico em um nome de mercado de dados de usuário circulado, chave do Povo. Está bem , está quente de volta aqui. Se intersexo, queremos ir o objeto superior e queremos raiz para baixo para o objeto e os dados do usuário e o nome do mercado. Vamos voltar para isto na janela. Então, por padrão, isso retornará uma lista de todos os objetos que foram clicados. E eles são um tipo de ordenado como ele tipo de dar a você o mais próximo primeiro. E queremos enraizar para baixo nos dados por trás disso. Então vá pegar. O objeto superior vai para a raiz, vamos para o objeto dele, e vamos para os dados do usuário e procurar mais o nome dela Então, se estamos vendo nomes de marcadores definidos, isso significa que eles realmente clicaram em marcador. Se tivéssemos que clicar no baixo, não haveria marketing set. Então, e nós vamos em um só pegar isso. Então vamos amarrar isso de volta ao objeto de cima, que significa que se eles coletarem isso vai pegar a chave para isso. E a chave que estamos usando é a mesma que a chave de nossos dados de mercado. Então, se você clicar no primeiro marcador, ele retornaria zero. Se clicássemos no segundo marcador, ele retornaria um. E assim que passarmos, podemos pegar o pai associado a ele. Então, se você clicar no 1º 1 ele irá retornar posição, título e descrição em Vamos talvez mudar para algo um pouco mais de detalhes. Então vamos à Cauda Pedaço e ao Rick. Então, agora, se eu provei isso longo para fora, eu deveria ver se eu clicar neste retorno. Ok, então nós coletamos este pedaço de cauda em particular ou clique neste marcador em particular que tem esta posição ou tem esta descrição e manchete. E no próximo vídeo, vamos mostrar como posicionar isso na primavera. Agora que sabemos exatamente o que eles coletaram e nos veremos então 12. Exibindo as dicas de ferramenta: Então, agora vamos mostrar algumas informações. Uma vez que o usuário realmente clica em um marcador e vamos voltar para a nossa base. Andi estava fora. Espaço reservado chamado essa divisão é igual a dica da ferramenta. E o que acontece é quando alguém clica em um marcador irá aparecer essa dica de ferramenta e preenchido com informações sobre esse marcador em particular. Assim, a posição da ponta da ferramenta será absoluta. Vamos mantê-lo fora da tela ou fora da câmera, eu acho, por padrão. Vamos mantê-lo fora da tela ou fora da câmera, eu acho, Então agrupa collants e nós vamos conseguir. Quando alguém clica nele, ele será visível além do esforço Con. Então passá-lo E um e também até mesmo uma massa com 300 pixels e desenvolvimento de auto. Certo, vamos voltar para a base do código da porta e posicioná-la. Temos este código. Sabemos que alguém colecionou um marcador, e sabemos qual é o mercado específico. Agora vamos para Jewell ponta recipiente ponto interior html pessoas. Ele ganha dados de mercado fortes. O nome dela é Dot Manchete. Ok, então o que vai acontecer é alguém clicar nele e ele vai obter os dados do mercado e extrair essa informação de cima. Então vai preencher a manchete. Ele preencherá a descrição em algum HTML e soltará esse html na dica da ferramenta. E acho que a última coisa que precisamos fazer é dizer àquela dica de ferramenta onde estar na tela, porque ela precisa estar bem sobre o marcador. Então vamos se o nome do Marker. Então nós definimos o nome do marcador aqui, que é por padrão agora. Então, queremos dizer, se alguém realmente clicou em um marcador, então o marcador ativo será que a dica de ferramenta recipiente ponto adicionar classe ou ponto lista de fechamento. Não adicionar está visível. Marcadores ativos de outra forma? Não e até listas de classes de dicas remover. Está tão desbotada? Se alguém recolheu a tela e não há Marconi isso e precisamos falar para posicionar o marcador. Então vá para o que poderia uma função para agarrar os valores ex esposas do mouse Clique e posicionar o mercado lá. Então função Karina para esse marcador de posição função, e nós vamos apenas agarrar. Deixe posição igual à câmera marcador ativo posição da tela, e vamos criar uma função chamada para dicas de posição da tela. Então, isso nos dirá especificamente onde coletamos o que é esse valor X Y. Até agora. Fator é igual a novo. Ele vai basicamente nos dizer, como a tela está girando como o que a posição X Y de um objeto na cena de três D é. E eu acho que em vez de apenas capturar o valor estático quando alguém clica nele, um, nós queremos ser capazes de sempre saber, como se o marcador fosse se mover, se alguém para girar a tela, uh, onde essa dica de ferramenta está na tela. Assim, os dados da ponta da ferramenta girarão com a dúvida do marcador em si. Então o vetor é igual ao novo fator de três pontos. E eu vou pegar essa base de código, que é algo que eu roubei para outro lugar, mas que essencialmente retornou o valor X Y de qualquer objeto na cena. Então, agora, se for para logar isso, ele me diria se eu coletar este recipiente de dicas de ferramentas de grupos. Oh, e ele realmente encontrou aquela dica de ferramenta. Então, as ferramentas têm contêiner igual a documento? Eu recebo elemento por d nunca clicar nisso, ele nos diria que a exposição é 700. A posição branca é 41 estes na posição é zero. E como você pode ver como ele girava para tipo de obter um gosto que então Agora que eu tenho esses dados eu quero ir. Se a Posição X for menor que zero para o estilo de ponto do contêiner à esquerda é igual a zero. que significa que se essa dica de ferramenta é essencialmente fora da tela, não mova a ponta da ferramenta fora da tela e mantê-lo zero mais se posição ponto x mais recipiente ponta ferramenta Nem tudo definido com sua janela de lição ponto Inner com. Então, o oposto seria se esse marcador estivesse realmente fora da tela para a direita. Não posicione que a ponta da ferramenta ainda mais. Como não posicionar os dados fora da posição sido tela é que o padrão é a posição que janela de informações direita em cima do marcador se é basicamente dentro da tela, ok. E então isso é definir a exposição e irá definir a posição y para ser qualquer que seja o padrão . Então, agora, quando clicarmos nisso, ela deve preencher a ponta da ferramenta e definir a posição do acidente onde quer que o marcador esteja . E está fazendo isso, exceto que não definimos uma cor de fundo. Então, bem, bem, defina o fundo da ponta da ferramenta. Então a cor de fundo é ordem branca. A cor é preta e muita necessidade. É um 10 pixels e descobriu famílias Ariel. Então, lá vai você. Nós clicamos nisso. Na verdade, temos a ponta da ferramenta pairar sobre ela e que faz fronteira e aparecendo. Vamos tornar isto um pouco mais grosso, está bem? Mas você verá que ele não está realmente se movendo quando eu rodar o modelo, então nós também vamos querer fazer isso. Nós vamos voltar. Então agora o que nós também queremos fazer é voltar para a atualização da câmera onde estávamos verificando rotação e dizer quando a câmera atualiza o marcador de posição. Então essa é a mesma função que estávamos usando para soltar o marcador em cima de sua área apropriada . Assim, à medida que a câmera gira na atualização da câmera, se houver um marcador ativo, posicione-o. Então agora, enquanto eu giro que você pode ver a ferramenta Tip está girando junto com ela e talvez apenas limpar o preenchimento um pouco aqui porque isso é um pouco demais, e isso é uma paz final. Vamos apenas remover a nossa ferramenta para ajudá-la. E agora que nós meio que aprendemos como os marcadores de posição Teoh adicionaram, nós podemos liberar isso um pouco mais. Então agora você vai ter noção de como adicionar marcadores ao corpo, e vamos ver isso no próximo vídeo 13. Conclusão: e esse é o fim do curso. Revisamos o básico de criar uma cena, importar modelos externos, iluminá-la, iluminá-la, permitindo que apenas dois explorados ou se tornem tolos e usar elenco de estupro. Usando o método, fomos até lá para obter co-ordenadas. Adicionei mais alguns parentes ao modelo, e aqui estão os resultados finais. A partir daqui podemos fazer coisas como em um pré-carregador, ou girar o objeto para caber os usuários livre importação promovido. Então eu adoraria ver para onde você leva esse conhecimento a seguir. Então, definitivamente, se você tem algo que você gosta de compartilhar comigo amor para dar uma olhada nele . Adoro falar sobre essas coisas, então sinta-se à vontade para falar comigo. E além disso, obrigado por assistir e nos vemos da próxima vez.