Saltar al contenido principal

Primer proyecto

Crea y publica una pequeña escena de AR en unos diez minutos. Apuntas el móvil a una imagen, aparece un objeto 3D y, al tocarlo, se eleva.

Los proyectos más grandes se hacen con los mismos pasos.

1. Crea un proyecto​

Inicia sesión en arclip.design y crea un proyecto. Studio se abre con un espacio vacío y una escena.

2. Elige cuándo aparece la escena​

Cada escena tiene un disparador: lo que hace que aparezca.

  1. Abre Scenes en la barra lateral izquierda.
  2. Selecciona tu escena.
  3. Elige Image como disparador.
  4. Sube la imagen que vas a imprimir o mostrar en otra pantalla.
  5. Escribe el ancho real de la imagen. AR Clip lo usa para mostrar tu contenido al tamaño correcto.

Todos los disparadores que puedes elegir:

DisparadorLa escena aparece cuando
3Denseguida, sin AR; útil para hacer pruebas
Imagela cámara ve una imagen que has subido
QRse escanea un código QR
Surfaceel visitante la coloca en un suelo o una mesa
Facese detecta una cara
360°se abre un entorno panorámico

Para fijar contenido en un lugar real que escaneaste antes, usa Surface con Use VPS activado. Consulta Escenas VPS.

Usa una imagen con detalle

Las fotos se siguen bien. Un logo plano sobre fondo blanco no, porque la cámara no tiene dónde agarrarse. El contraste y los detalles irregulares importan más que la resolución.

3. Añade un objeto​

Abre Layers & assets y arrastra un modelo al lienzo. O pulsa + en la barra superior para añadir una forma básica, como un cubo.

Muévelo, gíralo y escálalo con la barra de herramientas que aparece junto al objeto seleccionado. La cuadrícula usa las unidades de tu proyecto, así que un cubo de un metro mide un metro al lado de la imagen real.

4. Dale un material​

  1. Con el objeto seleccionado, busca Material en el panel de la derecha.
  2. Haz clic en la ranura del material. Se abre el panel Edit material.
  3. Deja el tipo Standard. Elige un color y después la rugosidad.

La rugosidad es lo que más cambia el aspecto. Ponla alta para tela y piedra, y baja para metal pulido.

5. Haz que reaccione a un toque​

El objeto se elevará cuando alguien lo toque. Primero guarda la posición elevada como un estado y después cambia a ese estado desde un evento.

  1. Con el objeto aún seleccionado, añade un componente States. Su primer estado guarda el objeto tal como está ahora.
  2. Haz clic en add state. El nuevo estado queda seleccionado. Sube el objeto 0,2 m.
  3. Vuelve a hacer clic en el primer estado. El objeto vuelve a bajar.
  4. Añade un componente Events. Ya trae un evento con el disparador Press on the object.
  5. Haz clic en el evento para abrirlo. En On click or tap, haz clic en + add action y elige Set state.
  6. En State, elige el segundo estado. Pon Duration en 400 ms.

Ya tienes una interacción completa, sin código.

Añade un sonido

Los eventos no tienen ningún paso que reproduzca un sonido. Para que suene uno al tocar, usa un patch: su nodo Play sound reproduce un archivo de audio cada vez que se ejecuta → Editor de patches.

Mientras editas no se ejecuta nada

El editor muestra tu escena, pero no ejecuta su lógica, así las animaciones no te estorban. Pulsa Preview para probarla.

6. Vista previa​

Pulsa Preview para ver el proyecto tal como lo verán los visitantes. Comprueba el toque y el movimiento.

En una escena con imagen, prueba la vista previa en un móvil y apúntalo a la imagen impresa. En un ordenador no puedes ver si el seguimiento aguanta en ángulo, y eso suele ser lo que hay que ajustar.

7. Publica​

Pulsa Publish en la barra superior. Tu proyecto se convierte en un enlace que cualquiera puede abrir. Recibes una dirección lista para usar, y puedes conectar tu propio dominio en los ajustes del proyecto.

Vuelve a publicar después de cada cambio. Los visitantes ven la última versión publicada, no tu copia de trabajo.

Qué hacer ahora​

Quieres…Lee
Saber para qué sirve cada panelInterfaz
Organizar un proyecto más grandeEscenas y espacios
Planificar el movimiento en una línea de tiempoAnimation
Crear lógica con valores y condicionesPatch editor
Añadir botones y un marcador de puntosUI editor
Entender cómo se comporta el motorCreators Engine

Siguiente: Interfaz: para qué sirve cada panel, barra y botón de Studio.