Cómo codificar un marcador de realidad aumentada

Sep 13, 2025
Cómo
[dieciséis]

La realidad aumentada ha existido por un tiempo, pero con el apoyo de WEBRTC (comunicación en tiempo real), es posible que los usuarios en Android y los dispositivos de escritorio accedan a la cámara del teléfono.

En la actualidad, iOS no puede apoyar esto, ya que no se ha implementado en el navegador de Webkit que alimenta Safari, pero está en desarrollo y puede verificar el estado aquí . Si tiene un dispositivo iOS, no tiene que perderse, ya que aún puede usar la webcam en su computadora de escritorio.

Nota: Para obtener este trabajo en el navegador móvil de Chrome, el contenido debe ser atendido por una capa de socket segura (es decir, a través de HTTPS en lugar de HTTP estándar). El escritorio actualmente trabaja con HTTP regular.

  • Para descargar los archivos que necesita para este tutorial, vaya a Filesilo , seleccione cosas gratis y contenido gratis junto al tutorial.

En este tutorial, le mostraré cómo colocar un marcador de realidad aumentada frente a una cámara telefónica. Esto será recogido por el navegador y Ar.js , y el contenido se asignará sobre la parte superior en 3D, pegado al marcador AR.

Hay muchos usos posibles para esta técnica. Por ejemplo, es posible que desee crear un 3D simple. currículum creativo , y luego el marcador AR podría imprimirse en su tarjeta de presentación. Debido a que puede caminar alrededor del marcador, esto es ideal para el contenido que quizás desee ver desde diferentes ángulos, ¡piense en un determinado fabricante de muebles suecos que le brinda pasos animados que se pueden ver desde cualquier ángulo! Hay tantas posibilidades para que esto pueda ser útil.

01. Añadir las bibliotecas

Start by linking up your project libraries

[dieciséis] Comience por vinculando sus bibliotecas de proyecto

Una vez que hayas descargados los archivos tutoriales Vaya a la carpeta del proyecto, abra la carpeta de inicio en su editor de código y luego abra la index.html Archivo para editar. En esta etapa, las bibliotecas deben estar vinculadas, ¡y hay bastantes para este proyecto! Las bibliotecas se encuentran en tres secciones: Three.js, Jsartoolkit y la extensión Three.js para ArtOolkit y Marker. 

 & lt; script src = 'js / three.js' & gt; & lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "vendor / jsartoolkit5 / build / artoolkit.min.js" & gt; / lt; / script & gt;
& lt; script src = "vendor / jsartoolkit5 / js / artoolkit.api.js & gt; / lt; / script & gt;
& lt; script src = "threitx-artoolkitsource.js" & gt; / lt; / script & gt;
& lt; script src = "threitx-artoolkitcontext.js" & gt; / lt; / script & gt;
& lt; script src = "threitx-armarcomercontrols.js" & gt; / lt; / script & gt;
& lt; script & gt; threitx.artoolkitcontext.baseurl = '/' & lt; / script & gt;

02. Cuida el estilo CSS.

En el cabeza sección de la página, agregue algunos texto Etiquetas y caídas en las reglas de estilo para el cuerpo y el lienzo elemento. Esto asegura que se colocan correctamente en la página sin los márgenes predeterminados agregados por el navegador. 

 Cuerpo {
  Margen: 0px;
  Desbordamiento: oculto;
}
lienzo {
  Posición: Absoluto;
  TOP: 0;
  izquierda: 0;
}

03. Añadir variables globales

En el cuerpo sección de la página, agregue algunos texto Etiquetas donde se irá el código JavaScript restante para este tutorial. Hay una serie de variables necesarias: la primera línea es para tres.js, la segunda para el AR.JS, el tercero para el modelo y luego una variable para cargar el modelo. 

 Var Render, escena, cámara;
var artoolkitcontext, onrenderfcts, arteolkitsource, markerroot, arteoolkitmarker, lasttimemsec;
var modelo, tube1, tube2, medio, detalles, pulso;
var cargador = nuevo tres.colladaloader ();

04. Cargar el modelo

Antes de configurar la escena, se cargará el modelo para que se pueda mostrar cuando se detecten marcadores. Esto se reduce por 10 para que se ajuste exactamente al marcador AR. El modelo es de 10 cm para el ancho y la altura, por lo que el marcador es 1 cm que se traduce en 1 incremento en tres.js. 

cargador.load ('model / scene.dae', función (colada) {
  modelo = colada.scene;
  model.scale.x = model.scale.y = model.scale.z = 0.1;
  Detalles = modelo.getObjectbyName ("Detalles", VERDADERO);

05. Fije algunos problemas de visualización

Aún dentro del código de carga de la colada, una vez que se carga el modelo, habrá un par de tubos que giran para que se encuentren en la escena de la colada. Se encuentra el primer tubo y su material se agarra. Aquí, el material está configurado para simplemente rendirlo en el interior del modelo, no el exterior. 

 TUBE1 = Model.GetObjectbyName ("Tube1", VERDADERO);
var a = tube1.children 
 .material;
A.Transparent = verdadero;
a.side = tres ["trasero"];
a.Blending = Tres ["" aditivo "];
A.OPACION = 0.9;

06. Repita la corrección

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!

[dieciséis] Si la transparencia y la mezcla aditiva no están habilitadas, el modelo se ve así cuando se carga y se muestra en la parte superior del marcador AR, ¡no es muy emocionante y apenas visible!

Como en el último paso, este mismo principio se repite para el segundo tubo y el modo de mezcla, similar a las que se encuentran en After Effects y Photoshop, se establece para ser una mezcla aditiva. Esto permite que el exterior de los píxeles tenga una transición más suave a la imagen de la cámara. 

 Tube2 = Model.getObjectbyName ("Tube2", VERDADERO);
c = tube2.children 
 .material;
C.Transparent = verdadero;
C.Side = Tres ["trasero"];
C.Blending = Three ["" aditivo "];
c.opacidad = 0.9;

07. FIX FINAL

El último modelo es un círculo giratorio justo en el centro del diseño. Esto sigue las mismas reglas que antes, pero no representa la parte posterior del objeto, solo el frente. La opacidad de cada uno de estos materiales se ha establecido en un 90% solo para que sea un poco más suave. Una vez que se carga el modelo, se llama la función init. 

 Mid = Model.getObjectbyName ("MID", VERDADERO);
  b = Mid.children 
 .material;
  B.Transparent = verdadero;
  b.Blending = Tres ["" aditivo "];
 b.opacidad = 0.9;
  en eso();
});

08. Inicializar la escena.

La función INIT está configurada y dentro de aquí se crean la configuración del renderizador. El Renderer está utilizando WebGL para dar la velocidad de render más rápida al contenido, y el valor alfa de fondo se establece en transparente para que la imagen de la cámara se pueda ver detrás de esto. 

 FUNCIÓN INIT () {
  Renderer = NUEVO TRES.WEBGLRENDERER ({
  alfa: cierto
  });
  render.setClearColor (nuevo tres.color ('lightgrey'), 0);
  render.setsize (Window.Innerwidth, Window.InnerHeight);
  document.body.appendchild (Render.Melement);

09. Crea la pantalla de la escena.

El Renderer está hecho para ser del mismo tamaño que la ventana del navegador y se agrega al modelo de objeto de documento de la página. Ahora se crea una matriz vacía que almacenará los objetos que deben ser representados. Se crea una nueva escena para que el contenido se pueda mostrar dentro de esto. 

 ONRENDERFCTS = [];
escena = nuevo tres.scene ();

10. iluminar

Para poder ver el contenido en la escena, al igual que en el mundo real, se necesitan luces. Una es una luz gris ambiente, mientras que la luz direccional es un color azul silenciado, solo para dar un ligero tinte al contenido 3D en la escena.

Experiment with the lighting colours to give some different tints

[dieciséis] Experimenta con los colores de iluminación para dar algunos tintes diferentes. 
 VAR ambient = NUEVO TRES.AMBIETRIGHT (0x666666);
escena.add (ambiente);
var dirioallight = nuevo tres.directionallight (0x4e5ba0);
direccionaltight.position.set (-1, 1, 1) .normalizar ();
escena.add (Directionallight);

Siguiente: Termina tu marcador AR

  • 1
  • 2

Página actual: Página 1

Cómo - Artículos más populares

Cómo crear una aplicación con vue.js

Cómo Sep 13, 2025

[dieciséis] El ecosistema JavaScript ha estado cambiando durante más de una década, lo que significa que los desarrolladores delante..

Cambio de color de Photoshop: 2 herramientas que necesita saber

Cómo Sep 13, 2025

[dieciséis] SALTA A: La herramienta de reemplazo de color. El comando de rango de color..

Cómo crear un hombre lobo en 3D en un motor irreal

Cómo Sep 13, 2025

El concepto, modelo, textura y configuración de material para esta feroz imagen de un hombre lobo, que se creó para Kunoichi, un juego orientado al sigilo en un mundo de fantasía, se compl..

Comienza con WebVR

Cómo Sep 13, 2025

[dieciséis] SALTA A: Recursos webvr WebVR es una API de JavaScript par..

Cómo preparar gráficos ilustradores para después de los efectos

Cómo Sep 13, 2025

[dieciséis] No puedo empezar a decirte cuántos Ilustrador Adobe Los archivos me han pasado para animación que claramente ..

Cómo desarrollar criaturas míticas

Cómo Sep 13, 2025

[dieciséis] Aquellos que buscan crear diseños de criatura realistas utilizando una mezcla de software. ZBrush, Marvelous Designe..

Pinte un retrato de mascota peludo

Cómo Sep 13, 2025

Nuestro retrato de gato terminado [dieciséis] Pintura mascotas y dibujando animales Puede ..

Documentar sus sistemas de diseño con Fractal

Cómo Sep 13, 2025

[dieciséis] ¿Te apetece aprender más sobre los sistemas de diseño? Entonces no te pierdas el ingeniero de UI Senior ..

Categorías