Top 7: Los mejores plugins de JavaScript de visor de imágenes de 360° (equirectangular)

Top 7: Los mejores plugins de JavaScript de visor de imágenes de 360° (equirectangular)

Hoy en día, muchos dispositivos permiten al usuario crear imágenes panorámicas muy interesantes, pero no con solo 180 grados, sino 360. A diferencia de las vistas cilíndricas, los panoramas esféricos incorporan un ángulo de visión vertical de 180° y un ángulo de visión horizontal de 360°. Contienen datos de luz que se originan en todas las direcciones y, por lo tanto, se pueden visualizar como si comprendieran los puntos de una esfera. Este formato se ha vuelto popular en las redes sociales y el marketing y ha encontrado aplicación en programas de gráficos 3D, simulaciones de interiores, películas panorámicas envolventes y juegos de computadora y video. Un panorama equirrectangular consiste en una sola imagen rectangular cuyo ancho y alto se correlacionan como 2: 1.

Si estás dispuesto a mostrar ese tipo de imágenes en la web, necesitarás un código especial para que funcione. En este artículo, compartiremos contigo 7 bibliotecas que te permitirán incrustar imágenes equirectangulares en el navegador para que el usuario pueda interactuar con el tema fácilmente.

7. Three.js Equirectangular Demo

Github

A diferencia de Panolens.js que también se basa en Three.js, esta demostración básica contiene el código base para implementar tu propio visor de imágenes 360 con solo Three.js.

6. 360-image-viewer

Github

360-image-viewer es un visor de imágenes panorámicas WebGL independiente para computadoras de escritorio y dispositivos móviles. Esto usa regl como envoltorio de WebGL, y tiene un total de 140kb uglified o 46kb gzip. Esto es útil si necesitas un visor panorámico pero no deseas incrustar todo ThreeJS (que es alrededor de 500kb uglified).

5. Kaleidoscope

Github

Kaleidoscope es un visor de video / imágenes de 360º incrustable, ligero y sin dependencias. Los videos 360 no funcionan en Safari, IE 11, Microsoft Edge, Android e iOS si el video se entrega desde un dominio diferente, debido a algunos errores de implementación de CORS.

4. Panolens.js

Github

Panolens.js se basa en Three.JS (un marco 3D) con un área de interés específica en panorama, realidad virtual y realidad potencialmente aumentada. Para comenzar a usar panolens.js, descarga three.js minificados y panolens.js minificados e incluye estos dos archivos en su proyecto. Las características del complemento:

  1. Soporte de imagen equirectangular
  2. Imágenes de cubemap support
  3. Admite google streetview con panoId ( cómo obtener la identificación de panorama )
  4. Admite video 360 equirectangular (como video de youtube / facebook 360) incluso en iOS.
  5. Soporta anotaciones de texto / imagen / domElement (Infospot)
  6. Controles integrados de cámara Orbit / DeviceOrientation
  7. Widgets de control de video y pantalla completa integrados
  8. Convierta la imagen equirrectangular en un pequeño planeta (proyección estereográfica)

3. Panellum

Github

Pannellum es un visor de panorama ligero, gratuito y de código abierto para la web. Construido con HTML5, CSS3, JavaScript y WebGL, no tiene complementos. Pannellum está construido usando WebGL y JavaScript, con una pizca de HTML5 y CSS3. Puede ejecutarse de forma independiente o puede integrarse utilizando <iframe>una API de JavaScript o una. El método independiente, que se utiliza para incrustar <iframe>, es el más fácil y simple de usar, pero la API de JavaScript es más poderosa y proporciona una integración más estrecha. Internamente, el visor independiente analiza los parámetros de URL para crear una configuración basada en JSON y luego crea una instancia del visor mediante la API de JavaScript. El visor independiente acepta un subconjunto de parámetros de configuración como parámetros de URL; el resto de los parámetros se pueden configurar mediante un archivo de configuración JSON especificado mediante el parámetro URL de configuración especial. Las características adicionales de Pannellum incluyen puntos de acceso para mostrar información, vinculación de múltiples panoramas en recorridos virtuales y soporte de video. 

2. Photo Sphere Viewer

Github

Photo Sphere Viewer es una biblioteca de JavaScript que muestra tomas panorámicas de 360° con Photo Sphere, el nuevo modo de cámara de Android 4.2 Jelly Bean y superior. También es compatible con panoramas de cubos. Photo Sphere Viewer es JS puro y se basa en Three.js, lo que permite un muy buen rendimiento en los sistemas habilitados para WebGL (los navegadores más recientes) y un rendimiento razonablemente bueno en otros sistemas que admiten HTML Canvas. La biblioteca también funciona con pantallas táctiles.

1. Marzipano

Github

Marzipano es un visor multimedia de 360° para la web moderna que admite todos los principales navegadores de escritorio y dispositivos móviles. Adopta tecnologías web estándar y proporciona una potente API de JavaScript. La herramienta genera un recorrido virtual a partir de un conjunto de panoramas y te permite exportarlo como una aplicación web que puede implementarse tal cual o usarse como modelo estándar para proyectos más avanzados. Requiere Firefox o Chrome. Diseñado para trabajar con estándares web. Controla al espectador con una potente API de JavaScript y crea interfaces utilizando HTML y CSS estándar. Marzipano proporciona una API simple para los casos de uso más comunes, pero está diseñada para brindar al usuario mucho control sobre cómo funciona. Las demostraciones muestran algunas de las posibilidades que permite Marzipano y cómo implementarlas. Su código fuente está disponible en GitHub . 

La herramienta procesa sus panoramas en el navegador. Se admiten los formatos de esfera (equirrectangular) y de cara cúbica. Después del procesamiento, puede exportar una aplicación de recorrido virtual que se puede implementar en cualquier plataforma de alojamiento web. Esta aplicación también se puede utilizar como modelo para una mayor personalización utilizando JavaScript, HTML y CSS estándar. La herramienta Marzipano requiere la última versión de Firefox o Chrome.

Si conoces otra biblioteca impresionante basada en JavaScript para mostrar imágenes equirrectangulares (360 grados) en el navegador, compártela con la comunidad en el cuadro de comentarios.

<

Esto podria interesarte

Conviertete en un programador más sociable