Como codificar um marcador de realidade aumentada

Sep 12, 2025
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

Comece com Grav GMS

Como Sep 12, 2025

(Crédito da imagem: futuro) Grave é um sistema de gerenciamento de conteúdo (CMS) com uma diferença. Os sistemas ..

Jump Start reagir nativo com a Expo

Como Sep 12, 2025

Reagir nativo é uma plataforma que permite construir aplicativos móveis nativos usando o JavaScript. Como o nome in..

Domine a ciência da otimização da taxa de conversão

Como Sep 12, 2025

Otimização da taxa de conversão (CRO) é o processo de maximizar as conversões do tráfego existente. Por exemplo, se você r..

Como enfatizar o ponto focal de uma imagem

Como Sep 12, 2025

Usando elementos do seu Lápis underdrawing. é uma ótima maneira de capturar a atenção do espectador dentro de..

Como trabalhar com o vídeo HTML

Como Sep 12, 2025

Mova-se sobre o YouTube ... com o & lt; video & gt; elemento e um pouco Javascript. , você pode começar ..

Como desenvolver criaturas míticas

Como Sep 12, 2025

Aqueles que procuram criar desenhos de criatura realistas usando uma mistura de software - Zbrush, designer maravilhoso, k..

Afie suas habilidades de pintura de vida ainda

Como Sep 12, 2025

Não há nada que eu ame melhor do que ser ao ar livre, pintando o mundo ao meu redor, mas foi definitivamente uma luta por mim quando comecei a usar o guache. Trabalhando com um meio de tint..

Como fazer um carro esportivo realista render

Como Sep 12, 2025

Nos últimos anos, tenho aprimorado minhas habilidades em iluminação e renderização, bem como algumas outras técnicas com v�..

Categorias