Avión sobrevolando el cielo de Medellín. Fotografía por Juan Carlos Morales S.

Insertar fotografía esférica 360 en tu web

¿Quieres mejorar la experiencia del usuario en tu sitio web o blog? Como ya lo he mencionado en este espacio, la principal preocupación de un generador de contenidos debe ser su audiencia. Ella es la que determina el éxito o fracaso de la estrategia.

Así pues, buscando mejorar estas experiencias, te comparto un tutorial sobre cómo insertar fotografías esféricas 360 (photosphere images) en una página web. Seguro este recurso mejorará -con creces- el impacto y la interacción de tus usuarios.

Por cierto, si lo que estás buscando es insertar una fotografía panorámica te recomiendo mi entrada “Insertar imagen 360 VR en tu web”. En ese texto te explico cómo capturar y publicar una imagen panorámica, utilizando Google CardBoard.

Qué es una fotografía esférica

Antes de iniciar el tutorial tengamos presente que una fotografía esférica es una imagen panorámica que captura todo lo que se encuentra alrededor del punto de captura, es decir, revela lo que está en todas las direcciones de la cámara: arriba, abajo y a los lados.

La fotografía panorámica tradicional solo permite desplazamientos horizontales (paneo) o verticales (tilt). Mientras que la esférica, agrupa todas las posibles direcciones.

Este tipo de imagen recibe ese nombre por la sensación que causa en el usuario – espectador: la fotografía parece ser una esfera, donde el usuario se ubica en el centro y las imágenes se proyectan es la superficie de esta.

Cómo capturar una foto esférica

Existen diferentes técnicas y dispositivos.

En Internet existen tutoriales sobre cómo lograr este tipo de recurso con una cámara réflex. La tarea no es sencilla, toda vez que se deben tomar más de 30 imágenes y luego unirlas con un programa de fotografía. El proceso es complejo y puede ser frustrante.

La otra opción está en aplicaciones móviles. Algunos teléfonos inteligentes (como el Nexus 5) traen una aplicación nativa que permite este tipo de fotos. También hay que tomar varias imágenes, pero el mismo dispositivo orienta la captura y se encarga de reunir las instantáneas en una imagen.

Y la última opción es adquirir una cámara 360, como es mi caso. Para este tutorial utilicé la Ricoh Theta S. Una cámara cómoda; fácil de transportar, y con un manejo y configuración bastante intuitivo.

Cómo publicar la imagen 360 en la web

Para este proceso es necesario tener conocimientos básicos en HTML y CSS. Aunque se van a insertar librerías JavaScript, no hace falta tener habilidades en este lenguaje de programación.

Lo primero entonces es insertar las siguientes líneas de código en el HEAD del documento:

<link href="https://cdn.rawgit.com/mistic100/Photo-Sphere-Viewer/3.1.0/dist/photo-sphere-viewer.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r70/three.min.js"> </script>
<script src="https://cdn.rawgit.com/mistic100/Photo-Sphere-Viewer/3.1.0/dist/photo-sphere-viewer.min.js"> </script>

La primera llama un recurso CSS, que se encarga de dar apariencia al visor. Las otras dos son librerías JS que se ocupan de la visualización e interacción del usuario.

Luego, en el mismo HEAD se debe anexar la siguiente línea de CSS:

<style>
  #photosphere { height:600px; width:100%; margin: 0 auto }
</style>

Esta declaración de estilos permite definir el tamaño del visor fotoesférico.

Luego se inserta la siguiente línea HTML en el BODY:

<div id=”photosphere”> </div>

Este DIV debe ir donde se quiere presentar el visor.

Por último, al final del BODY, se debe anexar el siguiente código JS:

<script>

  // 360 viewer
  var PSV = new PhotoSphereViewer({
    panorama: 'Aquí va la URL de la imagen',
    container: 'photosphere',
    loading_img: 'Aquí va la URL del icono',
    navbar: 'autorotate zoom download fullscreen',
    caption: 'texto'',
    default_fov: 65,
    mousewheel: false,
    size: {
      height: 400
    }
  });

</script>

¿Necesitas asesoría en comunicación digital?

Diseña y optimiza tus proyectos en comunicación digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.
Conversemos

En este código hay que hacer algunos cambios. Pero son sencillos.

En panorama se debe anotar la URL absoluta (desde http:// hasta la extensión de la imagen) de la imagen 360.

En loading_img se indica la URL absoluta de la imagen de precarga. Esto no es obligatoria, pero es una buena práctica.

En navbar se define las herramientas disponibles en el visor. En el código anterior están todas las posibles: reproducción automática, zoom, descarga y pantalla completa. En caso de querer eliminar alguna solo hace falta borrar su nombre del código.

En caption se puede escribir el pie de fotografía. Este puede llevar etiquetas de formato HTML, como negrita y cursiva.

Al final de este tutorial anexo un video donde se explica en detalle cada paso.

Lo último

Para que este código funcione en necesario llevar las imágenes y la página HTML a Internet, es decir, publicarlo en un servidor. Ten presente que este recurso no va a funcionar en local.

Y para facilitar el proceso, te comparto un video que está en mi canal YouTube y describe el paso a paso

En el canal YouTube «juancadotcom» puedes encontrar más videos sobre el tema.

¿Tienes una pregunta sobre el artículo? Cuéntame en los comentarios. Además, si quieres que escriba sobre algún tema, anótalo a continuación para agregarlo a la agenda de contenidos.

Logo NequiTu aporte permite crear contenidos. Envía un aporte Nequi

Logo PayPalHay más posibilidades. Apoya el blog desde PayPal.me

Logo YouTube¡Vamos por los 10.000 suscriptores en YouTube! Suscríbete

Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter

Licencia Creative Commons Insertar fotografía esférica 360 en tu web por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional. Basada en una obra en https://e-lexia.com/blog.

19 respuestas a «Insertar fotografía esférica 360 en tu web»

  1. Buenas tardes quisiera implementar esto en un componente de angular sin embargo no funciona no me muestra nada. pero si lo pongo directamente en el index del proyecto global si funciona. Usted depronto sabe como se puede implementar desde un componente?
    muchas gracias quedo atento.

  2. Buena tarde, antes que nada muy buen aporte, ya he aplicado en un proyecto web, pero tengo un problema espero y me puedas ayudar a solucionar.

    fíjate que la imagen 360 esta en … y la quiero poner en …
    pero por alguna razón no funciona si insepcciono el codigo, si se esta bien la ruta pero no se ve la 360 u me aparece un mensaje ‘Cannot load image’

    1. Hola, Erwin. Gracias por el mensaje.

      Antes que nada, te comento que eliminé las URL de ejemplo pues me estaban marcando spam. Sobre tu pregunta, creo que el problema está en el servidor, pero tendría que revisar -al menos- la página de ejemplo, para revisar qué puede estar pasando. ¿La tienes disponible en alguna parte?

      Quedo atento. Saludos.

    1. Hola, Ernesto. Gracias por tu pregunta.

      De momento, al menos con el código que presento, no hay posibilidades de agregar enlaces (zonas interactivas) a regiones de la imagen.

      Tocaría buscar otro JS que sí lo permita. Si me topo con algo seguro que haré la reseña en este blog.

      Saludos.

  3. Hola Juan gracias por los datos y el video en youtube!!! hice todo y sale todo bien menos el fullscreen. anda bien como html suelto pero estoy intentando meter el html en wix y el fullscreen no funciona. que podra ser

    1. Hola, Carina. Gracias por tu comentario. Sobre lo de Wix no sabría exactamente qué es, pues no utilizo esa plataforma. ¿Puedes compartirme la URL de la página donde estás intentan cargar el script, para revisar a detalle? Saludos.

  4. Hola. TEngo todo el contenido de una imagen en 360º que estaba alojada en google maps. Cómo podría colgarla en mi web sin tener que enlazarla a google.

    1. Hola, Julio. Espero que estés muy bien. Gracias por tu comentario.

      Te cuento que estuve revisando tu página y encontré dos novedades:

      La primera está en la línea 13 de tu código HTML. Al parecer estás utilizando doble comillas al definir el ID de la etiqueta DIV. Corrige esta novedad.

      La segunda es que tu imagen es muy pesada (55MB). La he editado a una escala 5376x2688px, además le he bajado un poco la resolución y todo funciona correctamente.

      Realiza estos ajustes y me comentas.

      Saludos


      Juan

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.