Como construir um aplicativo AR

Sep 11, 2025

Como

Página 1 de 3:

Construa um aplicativo AR: passos 01-10

Construa um aplicativo AR: passos 01-10
Construir um aplicativo AR: passos 11-20
Como criar um marcador AR personalizado

Nos últimos dois anos, houve uma explosão em interesse em torno de VR e AR Technologies. A mais recente grande coisa em design experimental , AR também chegou na web, mas com essa nova tecnologia vem novas habilidades, e agora parece que o Oeste selvagem sem grandes padrões a seguir.

A capacidade de exibir 3D na web não é nada de novo, mas se você tem evitando, então você precisa pular em tecnologias como três.js ou um frame (dê uma olhada no nosso roundup de AR Ferramentas para tentar para uma lista completa).

Qualquer que seja o nível de habilidade que você está, não fará muita diferença se você não tiver algum conteúdo decente. Pense em casos de uso apropriados para AR antes de saltar. Neste artigo, mostraremos a você como criar uma experiência de AR de vários marcadores.

Sinta seu nível de habilidade não é certa para isso? UMA Construtor de sites vai criar um site para você sem o barulho. Ou se você está mergulhando com um site complexo, pegue o hospedagem na web. direita.

Ao usar vários marcadores, é possível mostrar diferentes estágios de um processo ou qualquer conteúdo exclusivo com base nesse marcador. Neste exemplo, nosso aplicativo irá explorar o ciclo da água. Ir para a página 3 para aprender a criar um marcador AR personalizado.

01. Comece

Abra o começar pasta no seu IDE e dentro do index.html. página Encontre as tags de script. Todo o código no tutorial entrará em frente. Para testar o aplicativo, você precisará ter um servidor e se quiser testar em um telefone, precisará hospedar os arquivos em um servidor HTTPS. Adicione as variáveis iniciais nas tags do script:

 var Model1, Model2, Model3, Contagem = 0,
  partículas, partlecount, partículas;
  var carregador = novo três.colladaloader ();

02. Carregue o modelo

scene — Use o ícone no canto superior direito para ampliar a imagem

Para tornar o trabalho de cena AR, um modelo será carregado. Você verá que, uma vez carregado, é armazenado na variável modelo1. . Isto é então dimensionado e clonado duas vezes para os três passos. Em vez de carregar três modelos diferentes, todos os ajustes em um modelo serão feitos no código para transformá-lo rapidamente no celular.

 carregador.load ('paise1.dae', função (colada) {
  model1 = colada.scene;
  model1.scale.x = model1.scale.y = model1.scale.z = 0,015;
  model2 = model1.clone ();
  Model3 = model1.clone ();

03. Configure o tweening

No primeiro modelo, a nuvem será encontrada em cena e isso será entre uma nova posição para que a nuvem se ajude fora do mar. Isso é definido para repetir para sempre e levará oito segundos para os Tween para animar e mostrar uma nuvem formando.

 var cloud1 = model1.getobjectbyName ("nuvem", true);
  Cloud1 = Cloud1.Children ;
  novo tween.deween (Cloud1.Position). para ({
  x: 0,
  Y: 30,
  Z: -15.
  }, 8000) .REPEAT (infinito) .Sing (tween.asing.Quadratic.inout). SART ();

04. dimensionar

A nuvem é dimensionada para ser quase invisível. Outro tween é adicionado à nuvem e isso escala a nuvem até o tamanho normal. Com o movimento e a escala, dará a ilusão de que a nuvem está aumentando e se formando fora do mar como o primeiro passo no processo do ciclo da água.

 cloud1.scale.x = cloud1.scale.y = cloud1.scale.z = 0.0;
  novo tween.deween (cloud1.scale). para ({
  X: 1,
  Y: 1,
  Z: 1.
  }, 8000) .REPEAT (infinito) .Sing (tween.asing.Quadratic.inout). Sart ();

05. Configure a segunda nuvem

the water cycle scene — Uma segunda nuvem vai se sentar acima da montanha

A próxima nuvem do segundo modelo precisa ser posicionada onde a primeira nuvem terminou sua animação como uma nuvem formada no céu. Este é dado um movimento entre as posições sobre a terra, subindo ligeiramente acima da montanha. Isso levará 12 segundos para animar como é um movimento maior.

 var cloud2 = model2.getobjectbyName ("Cloud", true);
  Cloud2 = Cloud2.Children ;
  Cloud2.Position.set (0, 30, -15);
  novo tween.deween (Cloud2.Position). para ({
  x: 0,
  Y: 50,
  Z: -145.
  }, 12000) .Reque (infinito) ..asing (tween.asing.Quadratic.inout). SART ();

06. faça chuva

A chave para fazer esse trabalho de ilusão está permitindo que a nuvem chova. O ciclo de água tem a chuva de nuvens quando se move mais na terra. Para obter o efeito, um sistema de partículas será usado. Aqui a quantidade de partículas e o material de partículas é criada, usando uma imagem de gota de chuva.

 var textureloader = novo três.Textureloader ();
particleCount = 1500;
partículas = novas três.geometry ();
var pmaterial = novo três.pointsmaterial ({
  Cor: 0x3a4e5d,
  Tamanho: 0,05,
  Mapa: textureoader.load ("img / rain.png"),
  Phatest: 0,3,
  Opacidade: 0,9,
  Transparente: True});

07. Crie pingos de chuva

Usando um loop para loop, 1500 pingos de chuva podem ser criados com uma posição Aleaticle X, Y, Z, que será entre a nuvem e o solo. Cada gota de chuva é dada a sua própria velocidade aleatória para tornar a chuva mais natural. A partícula é empurrada para o vértice correto da geometria.

 para (var i = 0; i & lt; particlecount; i ++) {
  var px = math.random () * 60 - 30,
  py = math.random () * -10,
  pz = math.random () * 20 - 10;
  var partícula = novo três.Vector3 (px, py, pz);
  partícula.Velocity = novo três.Vector3 (0, - (math.random () * 0,9), 0);
  partículas.Vortes.push (partícula); }

08. Trabalhe no sistema de partículas

Agora o sistema de partículas é criado fora da geometria e do material. As partículas são definidas para serem classificadas para que a ordem z esteja correta e, em seguida, as partículas de chuva são feitas uma criança da segunda nuvem. Em qualquer lugar a nuvem é interpetuada, a chuva também segue, então não há necessidade de animar a chuva seguindo a nuvem!

 partículasSistemas = novos três.Points (partículas, pmaterial);
partículasSistemas.SortParticles = true;
cloud2.add (partículas);

09. Defina as posições do modelo final

No modelo final, a nuvem é reposicionada ao ponto final do segundo ciclo de animação em nuvem. Esta nova nuvem só vai se sentar no céu e não animar. Em vez disso, o rio vai animar, então o modelo do rio é armazenado em uma variável, pronto para adicionar os tween a ele.

 var cloud3 = model3.getobjectbyName ("Cloud", true);
  Cloud3 = Cloud3.Children ;
  Cloud3.Position.set (0, 50, -145);
  var River = model3.getobjectbyName ("River", true);
  Rio = River.Children ;

10. Encha o rio

the water cycle model — Níveis de água no rio precisam subir

No terceiro passo do ciclo de água, a água sai das colinas, enchendo rios e lagos, pois retorna ao mar. Este é o movimento mais sutil, pois acarretará apenas a altura do rio para que pareça encher. Tudo é pré-carregado agora, então o iniciar função é chamada.

 New tween.deween (river.position). Para ({
  Y: 3.
  }, 8000) .REPEAT (infinito) .Sing (tween.asing.Quadratic.inout). Sart ();
  iniciar();
});

Tem arquivos de design para salvar? Confira nosso guia para armazenamento na núvem .

Próxima página: Adicionar funcionalidade e marcadores AR

Pagina atual: Construa um aplicativo AR: passos 01-10

Próxima página Construir um aplicativo AR: passos 11-20

Como construir um aplicativo AR

01. Comece

02. Carregue o modelo

03. Configure o tweening

04. dimensionar

05. Configure a segunda nuvem

06. faça chuva

07. Crie pingos de chuva

08. Trabalhe no sistema de partículas

09. Defina as posições do modelo final

10. Encha o rio

Como - Artigos mais populares

Construa um portal do cliente com o WordPress

Construa um componente de cabeça de SEO-amigável para NextJs / reagir

Como corrigir uma composição falha

Exportar animações de efeitos para HTML5

Crie animações de caráter melhores em Maya

Como criar personagens de desenhos animados no cinema 4D

Como desenhar uma paisagem com pastéis

Branding Pros compartilham como eles unha a voz da marca

Categorias