Como codificar um marcador de realidade aumentada

Feb 5, 2026
Como

A realidade aumentada existe há algum tempo, mas com o apoio de WeBrtc (comunicação em tempo real), é possível que os usuários em dispositivos Android e desktop acessem a câmera de um telefone.

Atualmente, o iOS não pode suportar isso, pois não foi implementado no navegador Webkit que poderá o Safari, mas está em desenvolvimento e você pode verificar o status aqui . Se você tiver um dispositivo iOS, você não precisa perder, como você ainda pode usar a webcam no seu computador desktop.

Observação: Para obter isso funcionando no navegador Mobile Chrome, o conteúdo deve ser servido por uma camada segura do soquete (isto é, sobre HTTPS em vez de HTTP padrão). A área de trabalho trabalha atualmente com HTTP regular embora.

  • Para baixar os arquivos que você precisa para este tutorial, vá para Filesilo. , selecione coisas gratuitas e conteúdo gratuito ao lado do tutorial.

Neste tutorial, vou mostrar como colocar um marcador de realidade aumentada na frente de uma câmera de telefone. Isso será apanhado pelo navegador e Ar.js. e o conteúdo será mapeado por cima em 3D, grudando ao marcador AR.

Há muitos usos possíveis para esta técnica. Por exemplo, você pode querer criar um 3D simples currículo criativo e, em seguida, o marcador AR poderia ser impresso no seu cartão de visita. Porque você pode caminhar pelo marcador, isso é ótimo para conteúdo que você pode querer ver de diferentes ângulos - pense em um determinado fabricante de móveis suecos dando a você passos animados que podem ser vistos de qualquer ângulo! Há tantas possibilidades que isso pode ser útil.

01. Adicione as bibliotecas

Start by linking up your project libraries

Comece ligando suas bibliotecas de projetos

Depois de você baixou os arquivos tutoriais vá para a pasta do projeto, abra a pasta Iniciar em seu editor de código e, em seguida, abra o index.html. Arquivo para edição. Nesta fase, as bibliotecas precisam ser vinculadas - e há alguns para este projeto! As bibliotecas estão em três seções: três.js, jsaroolkit e a extensão de três.js para o arteolkit e marcador. 

 & lt; script src = 'js / three.js' & gt; & lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "fornecedor / jsaroolkit5 / build / artoolkit.min.js" & gt; / lt; / script & gt;
& lt; script src = "Vendor / jsaroolkit5 / js / arteolkit.api.js" & gt; / lt; / script & gt;
& lt; script src = "trêsx-arteolkitsource.js" & gt; & lt; / script & gt;
& lt; script src = "trêsx-artoolkitcontext.js" & gt; / lt; / script & gt;
& lt; script src = "trêsx-armarkercontrols.js" & gt; & lt; / script & gt;
& lt; script & gt; threex.artoolkitcontext.baseurl = '/' & lt; / script & gt;

02. Cuide do estilo CSS

No cabeça seção da página, adicione alguns roteiro tags e gota nas regras de estilo para o corpo e a tela de pintura elemento. Isso garante que eles são colocados corretamente na página sem as margens padrão adicionadas pelo navegador. 

 corpo {
  Margem: 0px;
  estouro: oculto;
}
tela de pintura {
  Posição: Absoluto;
  top: 0;
  Esquerda: 0;
}

03. Adicionar variáveis ​​globais

No corpo seção da página, adicione alguns roteiro Tags onde o restante código JavaScript para este tutorial irá. Há uma série de variáveis ​​necessárias: a primeira linha é para três.js, a segunda para o AR.JS, o terceiro para o modelo e, em seguida, uma variável para carregar o modelo. 

 VaR renderer, cena, câmera;
varão arteolkitcontext, onrenderfcts, arteolkitsource, markerraot, arteolkitmarker, lastimemsec;
var modelo, tube1, tube2, meados, detalhes, pulso;
var carregador = novo três.colladaloader ();

04. Carregue o modelo

Antes que a cena seja configurada, o modelo será carregado para que ele possa ser exibido quando os marcadores são detectados. Isso é dimensionado por 10 para se encaixar exatamente no marcador AR. O modelo é de 10 cm para a largura e altura, então o marcador é 1cm que se traduz como 1 incremento em três.js. 

loader.load ('modelo / cena.dae', função (colada) {
  modelo = colada.scene;
  modelo.scale.x = model.scale.y = model.scale.z = 0.1;
  Detalhes = Modelo.GetoBjectByName ("Detalhes", True);

05. Corrigir alguns problemas de exibição

Ainda dentro do código de carregamento de Collada, uma vez que o modelo é carregado, haverá um par de tubos que giram por isso eles são encontrados na cena colada. O primeiro tubo é encontrado e seu material é agarrado. Aqui o material é definido para apenas renderizar no interior do modelo, não o exterior. 

 Tube1 = Model.GetoBjectByName ("Tube1", true);
var A = tube1.Children 
 .material;
A.Transparent = true;
a.side = três ["backside"];
a.Blending = três ["aditivoblingbling"];
A.Opacidade = 0,9;

06. Repita a correção

If the transparency and additive blending is not enabled, the model looks like this when loaded and displayed on top of the AR marker – not very exciting and barely visible!

Se a transparência e a mistura aditiva não estiver ativada, o modelo se parece com isso quando carregado e exibido na parte superior do marcador AR - não muito emocionante e mal visível!

Como no último passo, esse mesmo princípio é repetido para o segundo tubo e o modo de mesclagem, semelhante aos encontrados em efeitos após e Photoshop, é definido como uma mistura aditiva. Isso permite que o exterior dos pixels tenham uma transição mais suave para a imagem da câmera. 

 Tube2 = Modelo.GetoBjectByName ("Tube2", true);
c = tube2.Children 
 .Material;
c.transparent = true;
c.side = três ["backside"];
c.Rending = três ["aditivandingbling"];
c.opacidade = 0,9;

07. Final Fix.

O último modelo é um círculo giratório apenas no meio do design. Isso segue as mesmas regras que antes, mas não renderizam a parte de trás do objeto, apenas a frente. A opacidade de cada um desses materiais foi definida para 90% apenas para torná-lo ligeiramente mais suave. Quando o modelo for carregado, a função Init é chamada. 

 MID = modelo.GetoBjectByName ("Mid", True);
  b = mid.children 
 .material;
  B.Transparent = true;
  b.blending = três ["aditivoblingbling"];
 b.opacidade = 0,9;
  iniciar();
});

08. Inicialize a cena

A função Init é configurada e dentro daqui as configurações do renderizador são criadas. O renderizador está usando o WebGL para dar a velocidade de renderização mais rápida para o conteúdo, e o valor alfa de fundo é definido como transparente para que a imagem da câmera possa ser vista por trás disso. 

 Init Function () {
  renderer = novo três.Webglrenderer ({
  Alpha: True.
  });
  renderer.setclearColor (novo três.Color ('Lightgrey'), 0);
  renderer.setsize (janela.ingwidth, janela.innerheight);
  documento.body.appendchild (renderer.domelement);

09. Crie a exibição da cena

O renderizador é feito para ser o mesmo tamanho da janela do navegador e adicionado ao modelo de objeto do documento da página. Agora, uma matriz vazia é criada que armazenará objetos que devem ser renderizados. Uma nova cena é criada para que o conteúdo possa ser exibido dentro disto. 

 OnRenderFCTS = [];
cena = nova três.scene ();

10. Acenda

Para poder ver o conteúdo na cena, assim como no mundo real, as luzes são necessárias. Uma é uma luz cinza ambiente, enquanto a luz direcional é uma cor azul silenciada apenas para dar um leve tint para o conteúdo 3D em exibição na cena.

Experiment with the lighting colours to give some different tints

Experimente as cores de iluminação para dar alguns tons diferentes 
 var ambiente = novos três.amentlight (0x666666);
cena.add (ambiente);
var directionallight = novo três.DirectionLight (0x4e5ba0);
directionallight.position.set (-1, 1, 1) .Normalal ();
cena.add (direcionais de direção);

Próximo: Termine o seu marcador AR

  • 1.
  • 2.

Pagina atual: Página 1

Como - Artigos mais populares

44 dos melhores atalhos de ipad e gestos para iPados 2020

Como Feb 5, 2026

(Crédito da imagem: futuro) PULE PARA: Atalhos básicos At..

Como fazer um logotipo no Photoshop

Como Feb 5, 2026

Antes de começar com como fazer um logotipo no Photoshop, devemos abordar o elefante na sala - Photoshop cc. não..

Como desenhar um personagem em caneta e tinta

Como Feb 5, 2026

Como artista em um estúdio de jogo, esqueci a maioria dos meios tradicionais, mas a tinta sempre chama de volta para mim. Depois..

Como digitalizar uma pessoa em menos de cinco minutos

Como Feb 5, 2026

Não tem acesso a uma matriz de câmera de fotogrametria para realizar um Scan 3D ? Não há problema, essas dicas..

Como usar fontes da Web

Como Feb 5, 2026

O seguinte é um trecho retirado do manual do WebFont de Bram Stein. Compre aqui . ..

Como adicionar drama às suas obras de arte pastel

Como Feb 5, 2026

Grandes artistas como Rembrandt e Caravaggio injetam suas obras de arte com um pouco de drama e intensidade, criando peças remin..

Como esculpir os olhos convincentes no Zbrush

Como Feb 5, 2026

Ao esculpir um olho humano 3D realista para adicionar à sua biblioteca de ativos prontos para uso, lembre-se de que nenhum dois ..

Como usar Fotografia de Stock Criativamente dentro de seu trabalho de design

Como Feb 5, 2026

Em vez de ser um último recurso, as imagens de estoque podem e devem formar uma parte essencial do seu arsenal criativo. De íco..

Categorias