Cómo construir una aplicación AR

Sep 11, 2025

Cómo

[dieciséis]

Página 1 de 3:

Construir una aplicación AR: Pasos 01-10

Construir una aplicación AR: Pasos 01-10
Construir una aplicación AR: Pasos 11-20
Cómo crear un marcador AR personalizado

En los últimos dos años, ha habido una explosión en intereses que rodean las tecnologías VR y AR. La última cosa grande en diseño experimental , AR también ha llegado a la web, pero con esta nueva tecnología viene nuevas habilidades, y en este momento se siente como el Wild West sin que los estándares.

La capacidad de mostrar 3D en la web no es nada nuevo, pero si lo ha estado evitando, entonces necesita saltar a las tecnologías como Three.js o A-Frame (eche un vistazo a nuestro rodeo de AR herramientas para probar para una lista completa).

Cualquiera que sea el nivel de habilidad en la que esté, no hará mucha diferencia si no tiene un contenido decente. Piense en los casos de uso apropiados para AR antes de saltar. En este artículo, le mostraremos cómo crear una experiencia multi-marcador AR.

¿Siento que tu nivel de habilidad no está a la altura? A Creador de sitios web Crea un sitio para ti sin el alboroto. O si está buceando con un sitio complejo, consigue el Alojamiento web derecho.

Al utilizar múltiples marcadores, es posible mostrar diferentes etapas de un proceso o cualquier contenido único basado en ese marcador. En este ejemplo, nuestra aplicación explorará el ciclo del agua. Salta a la página 3 para aprender a crear un marcador AR personalizado.

01. Comienza

Abre el comienzo Carpeta en su IDE y dentro de la index.html Página Encuentra las etiquetas de script. Todo el código en el tutorial irá dentro de estos. Para probar la aplicación, deberá tener un servidor y, si desea probar en un teléfono, deberá alojar los archivos en un servidor HTTPS. Agregue las variables iniciales en las etiquetas de script:

 var modelo1, modelo2, modelo3, cuenta = 0,
  partículas, particlecount, partículas de partículas;
  var cargador = nuevo tres.colladaloader ();

02. Cargar el modelo

Para hacer el trabajo de escena AR, se cargará un modelo. Verá que una vez cargado se almacena en la variable. modelo1 . Esto se escala y se clone se clona dos veces para los tres pasos. En lugar de cargar tres modelos diferentes, todos los ajustes a un modelo se realizarán en código para que se cargue rápidamente en el móvil.

 Carger.load ('landscape1.dae', función (colada) {
  modelo1 = colada.scene;
  modelo1.scale.x = model1.scale.y = model1.scale.z = 0.015;
  modelo2 = modelo1.clone ();
  modelo3 = modelo1.clone ();

03. Configurar el penezamiento

En el primer modelo, la nube se encontrará en la escena y esto se interpondrá en una nueva posición para que la nube salga del mar. Esto se establece para repetir para siempre y tomará ocho segundos para que los Tween anime y muestren una nube.

 var cloud1 = modelo1.getobjectbyname ("Cloud", VERDADERO);
  Cloud1 = Cloud1.Children ;
  Nuevo Tween.Toen (Cloud1.Position) .to ({
  x: 0,
  Y: 30,
  z: -15
  }, 8000) .Repeat (infinito). Teasing (tween.esing.Quadratic.inout) .start ();

04. Escala

La nube se reduce a ser casi invisible. Otro Tween se agrega a la nube y esta escala la nube hasta su tamaño normal. Con el movimiento y la escala, le dará la ilusión de que la nube se está elevando y formando fuera del mar como el primer paso en el proceso del ciclo del agua.

 cloud1.scale.x = cloud1.scale.y = cloud1.scale.z = 0.0;
  Nuevo Tween.Toen (Cloud1.Scale) .to ({
  x: 1,
  Y: 1,
  z: 1
  }, 8000) .Repeat (infinito). Teasing (tween.esing.Quadratic.inout) .start ();

05. Configurar la segunda nube.

La siguiente nube del segundo modelo debe colocarse donde la primera nube terminó su animación como una nube formada en el cielo. Esto se le da un ejercido movimiento para posicionarse sobre la tierra, levantándose ligeramente por encima de la montaña. Esto tomará 12 segundos para animar, ya que es un movimiento más grande.

 var cloud2 = modelo2.getObjectbyName ("Cloud", VERDADERO);
  Cloud2 = Cloud2.Children ;
  cloud2.position.set (0, 30, -15);
  Nuevo Tween.Toen (Cloud2.Position) .to ({
  x: 0,
  Y: 50,
  z: -145
  }, 12000) .Repeat (infinito). Teasing (tween.Easing.Quadratic.inout) .start ();

06. Hazlo lluvia.

La clave para hacer que este trabajo de ilusión está permitiendo que la nube lloviera. El ciclo del agua tiene la lluvia de la nube a medida que se mueve más alto sobre la tierra. Para obtener el efecto, se utilizará un sistema de partículas. Aquí se crea la cantidad de partículas y el material de partículas, utilizando una imagen de gota de lluvia.

 var textureader = nuevo tres.TexturEader ();
particlecount = 1500;
partículas = nuevo tres.geometría ();
var pmaterial = nuevo tres.pointsmaterial ({
  Color: 0x3A4E5D,
  Tamaño: 0.05,
  Mapa: textureloader.load ("img / rain.png"),
  Phatest: 0.3,
  Opacidad: 0.9,
  transparente: verdadero});

07. Crea gotas de lluvia

Usando A para lazo, se pueden crear 1500 gotas de lluvia con una posición RANDOM X, Y, Z que estará entre la nube y el suelo. Cada gota de lluvia se le da su propia velocidad aleatoria para que la lluvia se vea más natural. La partícula se empuja hacia el vértice correcto de la geometría.

 para (var i = 0; i & lt; particlecount; i ++) {
  var px = math.random () * 60 - 30,
  py = math.random () * -10,
  pz = matemath.random () * 20 - 10;
  var partícula = nuevo tres.vector3 (px, py, pz);
  partícula.velocity = new three.vector3 (0, - (matemath.random () * 0.9), 0);
  partículas.vertices.push (partícula); }

08. Trabajar en el sistema de partículas.

Ahora el sistema de partículas se crea fuera de la geometría y el material. Las partículas se establecen para ordenarse para que el orden Z sea correcto y luego las partículas de lluvia se conviertan en un hijo de la segunda nube. En cualquier lugar, la nube se interprete, la lluvia también sigue, ¡así que no es necesario animar la lluvia después de la nube!

 Partículos Sistema = Nuevo Tres. Puntos (Partículas, PMateriales);
particionesystem.sortparticles = verdadero;
cloud2.add (partículas);

09. Establecer las posiciones del modelo final.

En el modelo final, la nube se reposiciona al punto final del segundo ciclo de animación en la nube. Esta nueva nube solo va a sentarse en el cielo y no animar. En cambio, el río va a animar, por lo que el modelo del río se almacena en una variable, listo para agregarla.

 var cloud3 = modelo3.getobjectbyname ("Cloud", VERDADERO);
  Cloud3 = Cloud3.Children ;
  cloud3.position.set (0, 50, -145);
  var río = modelo3.getObjectbyName ("River", VERDADERO);
  River = River.Children ;

10. Llene el río

En el tercer paso del ciclo de agua, el agua sale de las colinas, llenando ríos y lagos mientras regresa al mar. Este es el movimiento más sutil, ya que solo implicará mover la altura del río para que parezca llenarse. Todo está precargado ahora, por lo que el en eso Se llama la función.

 Nuevo Tween.Toen (River.Position) .to ({
  y: 3
  }, 8000) .Repeat (infinito). Teasing (tween.asing.quadratic.inout) .start ();
  en eso();
});

¿Tienes archivos de diseño para ahorrar? Echa un vistazo a nuestra guía para almacenamiento en la nube .

Página siguiente: Añadir Funcionalidad y marcadores AR

Página actual: Construir una aplicación AR: Pasos 01-10

Siguiente página Construir una aplicación AR: Pasos 11-20

Cómo construir una aplicación AR

01. Comienza

02. Cargar el modelo

03. Configurar el penezamiento

04. Escala

05. Configurar la segunda nube.

06. Hazlo lluvia.

07. Crea gotas de lluvia

08. Trabajar en el sistema de partículas.

09. Establecer las posiciones del modelo final.

10. Llene el río

Cómo - Artículos más populares

Comienza con pintor de llama

Tipografía de marca: una guía completa

8 Características de la CSS de última generación (y cómo usarlas)

Cómo crear un efecto de paralaje en capas en su sitio

Trabaja inteligente con tu ZBrush ui

Cómo dibujar a una persona

Cómo crear una criatura de fantasía súper realista

Cómo crear un fallo de texto y efectos de imagen en CSS

Categorías