Páginas de aterrizaje (Landing pages)

Las páginas de aterrizaje son una evolución de nuestras populares páginas "Almost there".

¿Por qué utilizar páginas de aterrizaje?

Hemos transformado estas páginas para que se conviertan en potentes oportunidades de marca y marketing para usted y para sus clientes. Todas las plantillas de las páginas de aterrizaje están optimizadas para la marca y la educación con varios diseños, un diseño de código QR mejorado y compatibilidad con archivos multimedia clave.

Las páginas de aterrizaje garantizan que sus usuarios tengan una experiencia significativa, independientemente del dispositivo en el que se encuentren. - Aparecen en dispositivos en los que no está disponible o no son capaces de acceder directamente a la experiencia Web AR. También continúan nuestra misión de hacer accesible la RA ayudando a los usuarios a llegar al destino adecuado para interactuar con la RA.

Hemos diseñado las páginas de Aterrizaje de forma que sea extremadamente fácil para los desarrolladores personalizar la página. Queremos que se beneficie de una página de aterrizaje optimizada y que, al mismo tiempo, pueda dedicar su tiempo a construir su experiencia WebAR.

Las páginas de aterrizaje se adaptan de manera inteligente a su configuración

Utilizar páginas de aterrizaje en su proyecto

1. Abra su proyecto
2. Añada la siguiente etiqueta a head.html

<meta name="8thwall:package" content="@8thwall.landing-page">

Nota: para los proyectos autohospedado, debería añadir la siguiente etiqueta <script> a su página en su lugar:

<script src='https://cdn.8thwall.com/web/landing-page/landing-page.js'></script>

3. Elimine xrextras-almost-there de su proyecto A-Frame, o XRExtras.AlmostThere.pipelineModule() de su proyecto sin AFrame. (Las páginas de aterrizaje incluyen lógica "almost-there" además de las actualizaciones de la página del código QR).
4. De manera opcional, personalice los parámetros de su componente landing-page como se define a continuación. Para los proyectos sin AFrame, consulte la documentación de LandingPage.configure() .

Parámetros del componente AFrame (todos opcionales)

Parámetro	Tipo	Por defecto	Descripción
logoSrc	Cadena		Fuente de la imagen del logotipo de la marca.
logoAlt	Cadena	'Logo'	Texto alternativo para la imagen del logotipo de la marca.
promptPrefix	Cadena	'Scan or visit'	Establece la cadena de texto para la llamada a la acción antes de que se muestre la URL de la experiencia.
url	Cadena	enlace de 8th.io si está alojado en 8th Wall, o página actual	Establece la URL y el código QR mostrados.
promptSuffix	Cadena	'to continue'	Establece la cadena de texto para la llamada a la acción después de que se muestre la URL de la experiencia.
textColor	Color hexadecimal	#ffffff	Color de todo el texto de la página de destino.
font	Cadena	"'Nunito', sans-serif"	Fuente de todo el texto de la página de destino. Este parámetro acepta argumentos CSS válidos de font-family.
textShadow	Boolean	false	Establece la propiedad sombra de texto para todo el texto de la página de destino.
backgroundSrc	Cadena		Fuente de la imagen de fondo.
backgroundBlur	Number	0	Aplica un efecto de desenfoque al backgroundSrc si se especifica uno. (Los valores típicos están entre 0,00 y 1,00)
backgroundColor	Cadena	'linear-gradient(#464766,#2D2E43)'	Color de fondo de la página de destino. Este parámetro acepta argumentos válidos de color de fondo CSS. El color de fondo no se muestra si se establece un background-src o sceneEnvMap.
mediaSrc	Cadena	Imagen de portada de la aplicación, si existe	Fuente multimedia (modelo 3D, imagen o vídeo) para el contenido principal de la página de destino. Las fuentes de medios aceptadas incluyen un id de elemento-activo, o una URL estática.
mediaAlt	Cadena	'Preview'	Texto alternativo para el contenido de la imagen de la página de destino.
mediaAutoplay	Boolean	true	Si el mediaSrc es un vídeo, especifica si el vídeo debe reproducirse al cargarse con el sonido silenciado.
mediaAnimation	Cadena	Primer clip de animación del modelo, si existe	Si el mediaSrc es un modelo 3D, especifica si quieres reproducir un clip de animación específico asociado al modelo, o "none".
mediaControls	Cadena	'minimal'	Si mediaSrc es un vídeo, especifica los controles multimedia que se muestran al usuario. Elige entre "none", "mininal" o "browser" (navegador por defecto)
sceneEnvMap	Cadena	'field'	Fuente de imagen que apunta a una imagen equirectangular. O uno de los siguientes entornos preestablecidos: "field", "hill", "city", "pastel", o "space".
sceneOrbitIdle	Cadena	'spin'	Si mediaSrc es un modelo 3D, especifica si el modelo debe hacer "spin", o "none".
sceneOrbitInteraction	Cadena	'drag'	Si el mediaSrc es un modelo 3D, especifica si el usuario puede interactuar con los controles de la órbita, elige "drag" o "none".
sceneLightingIntensity	Number	1	Si mediaSrc es un modelo 3D, especifica la intensidad de la luz que ilumina el modo.
vrPromptPrefix	Cadena	'or visit'	Establece la cadena de texto para la llamada a la acción antes de que se muestre la URL de la experiencia en los cascos de RV.

Ejemplos

Disposición 3D con parámetros especificados por el usuario

Ejemplo de A-Frame con URL externa (captura de pantalla anterior)

<a-scene
  landing-page="
    mediaSrc: https://www.mydomain.com/helmet.glb;
    sceneEnvMap: hill"
  xrextras-loading
  xrextras-gesture-detector
  ...
  xrweb>

Ejemplo de AFrame con activo local

<a-scene
  xrextras-gesture-detector
  landing-page="mediaSrc: #myModel"
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement: true"
  xrweb>

  <!-- Aquí podemos definir los activos que se cargarán cuando se inicialice A-Frame -->
  <a-assets>
    <a-asset-item id="myModel" src="assets/my-model.glb"></a-asset-item>
  </a-assets>

Ejemplo sin AFrame (captura de pantalla anterior)

// Configured here
LandingPage.configure({
    mediaSrc: 'https://www.mydomain.com/bat.glb',
    sceneEnvMap: 'hill',
})
XR8.addCameraPipelineModules([
  XR8.GlTextureRenderer.pipelineModule(),
  XR8.Threejs.pipelineModule(),
  XR8.XrController.pipelineModule(),
  XRExtras.FullWindowCanvas.pipelineModule(),
  XRExtras.Loading.pipelineModule(),
  XRExtras.RuntimeError.pipelineModule(),
  // Added here
  LandingPage.pipelineModule(),
  ...
])