Visor de imágenes 360 grados panorama con Photo Sphere Viewer

Vista prévia

Descripción

Photo Sphere Viewer es una biblioteca de JavaScript que hace uso de la biblioteca 3D de tres. js para crear un visor de imágenes panorámicas de 360 Â ° 3D con un montón de opciones de personalización.

¿Cómo funciona?

Cargue los tres. js y Photo-Sphere-Viewer. min. js necesarios en la página HTML.

<script src="three.min.js"></script>
<script src="photo-sphere-viewer.min.js"></script>

Cree un elemento contenedor para el Visor panorámico.

<div id="container"></div>

Cree un nuevo visor de foto esfera y especifique la imagen que desea presentar.

var div = document.getElementById('container');
var PSV = new PhotoSphereViewer({


panorama: 'image.jpg',


container: div
});

Opciones de personalización.

• {Object} args – configuración para aplicar al visor
• {string} args. panorama – URL panorámica o ruta (absoluta o relativa)
• {HTMLElement | string} args. Container – contenedor panorámico (debe ser un ' div ' o equivalente), puede ser una cadena (el identificador del elemento que se va a recuperar)
• {Boolean} [args. autoload = True] – ' true ' para cargar automáticamente el panorama, ' false ' para cargarlo más tarde (con el método {@link PhotoSphereViewer # Load | '. Load '})
• {Boolean} [args. usexmpdata = True] – ' true ' si Photo Sphere Viewer debe leer datos XMP, ' false ' si no es necesario
• {Boolean} [args. cors_anonymous = True] – ' true ' para deshabilitar el intercambio de credenciales de usuario a través de cookies, ' false ' de lo contrario
• {Object} [args. pano_size = null] – el tamaño de panorama, si se recorta (innecesario si se pueden leer datos XMP)
• {Number} [args. pano_size. full_width = null] – el ancho de panorama completo, antes de recortar (el ancho de la imagen si es ' null ')
• {Number} [args. pano_size. full_height = null] – la altura panorámica completa, antes de recortar (la altura de la imagen si es ' null ')
• {Number} [args. pano_size. cropped_width = null] – el ancho de panorama recortado (el ancho de la imagen si es ' null ')
• {Number} [args. pano_size. cropped_height = null] – la altura de panorámica recortada (la altura de la imagen si es ' null ')
• {Number} [args. pano_size. cropped_x = null] – el desplazamiento horizontal de panorama recortado en relación con el ancho completo (medio si es ' null ')
• {Number} [args. pano_size. cropped_y = null] – el desplazamiento vertical de panorama recortado con respecto a la altura completa (medio si es ' null ')
• {Object} [args. default_position] – define la posición predeterminada (el primer punto visto por el usuario)
• {Number | String} [args. default_position. Long = 0] – longitud por defecto, en radianes (o en grados si se indica, por ejemplo ' ' 45deg ' ')
• {Number | String} [args. default_position. lat = 0] – latitud predeterminada, en radianes (o en grados si se indica, por ejemplo, ' ' 45deg ' ')
• {Number} [args. min _ FOV = 30] – el campo de visión mínimo, en grados, entre 1 y 179
• {Number} [args. Max _ FOV = 90] – el campo de visión máximo, en grados, entre 1 y 179
• {Boolean} [args. allow_user_interactions = True] – si se establece en ' false ', el usuario no podrá interactuar con el panorama (la barra de navegación se desactiva)
• {Boolean} [args. allow_scroll_to_zoom = True] – se establece en ' false ', el usuario no podrá desplazarse con el ratón para hacer zoom
• {Number | String} [args. tilt_up_max = Ï & #128;/2] – el ángulo máximo de inclinación, en radianes (o en grados si se indica, por ejemplo, ' ' 30Deg ' ')
• {Number | String} [args. tilt_down_max = Ï & #128;/2] – el ángulo máximo de inclinación, en radianes (o en grados si se indica, por ejemplo ' ' 30Deg ' ')
• {Number | String} [args. min _ longitude = 0] – la longitud mínima para mostrar
• {Number | String} [args. Max _ longitude = 2 Ï & #128;] – la longitud máxima para mostrar
• {Number} [args. zoom_level = 0] – el nivel de zoom predeterminado, entre 0 y 100
• {Number} [args. long_offset = Ï & #128;/360] – la longitud de desplazamiento por píxel movido por el mouse/Touch
• {Number} [args. lat _ offset = Ï & #128;/180] – la latitud para viajar por píxel movido por Mouse/Touch
• {Integer} [args. time_anim = 2000] – retardo antes de animar automáticamente el panorama en milisegundos, ' false ' para no animar
• {Boolean} [args. reverse_anim = True] – ' true ' si la animación horizontal debe invertirse cuando se alcanza la longitud min/max (sólo si no se describe el círculo entero)
• {String} [args. anim_speed = 2rpm] – velocidad de animación en radianes/grados/revoluciones por segundo/minuto
• {String} [args. vertical_anim_speed = 2rpm] – velocidad de animación vertical en radianes/grados/revoluciones por segundo/minuto
• {Number | String} [args. vertical_anim_target = 0] – latitud al destino durante la animación de Autorotate, por defecto al Ecuador
• {Boolean} [args. navbar = false] – Mostrar la barra de navegación si se establece en ' true '
• {Object} [args. navbar_style] estilo – de la barra de navegación
• {String} [args. navbar_style. backgroundColor = rgba (61, 61, 61, 0,5)] – color de fondo de la barra de navegación
• {String} [args. navbar_style. buttonsColor = rgba (255, 255, 255, 0,7)] – botones color de primer plano
• {String} [args. navbar_style. buttonsBackgroundColor = Transparent] – botones color de fondo
• {String} [args. navbar_style. activeButtonsBackgroundColor = rgba (255, 255, 255, 0,1)] – color de fondo de los botones activos
• {número} [args. navbar_style. buttonsHeight = 20] – botones de altura en píxeles
• {número} [args. navbar_style. autorotateThickness = 1] – grosor de icono de Autorotato en píxeles
• {número} [args. navbar_style. zoomRangeWidth = 50] – ancho de rango de zoom en píxeles
• {número} [args. navbar_style. zoomRangeThickness = 1] – grosor del rango de zoom en píxeles
• {Number} [args. navbar_style. zoomRangeDisk = 7] – diámetro de disco del rango de zoom en píxeles
• {Number} [args. navbar_style. fullscreenRatio = 4/3] – relación de icono de pantalla completa (ancho/alto)
• {número} [args. navbar_style. fullscreenThickness = 2] – grosor de icono de pantalla completa en píxeles
• {Number} [args. eyes_offset = 5] – desplazamiento de ojos en modo VR
• {String} [args. loading_msg = cargando â & #128; ¦] – cargando mensaje
• {String} [args. loading_img = null] – cargar la URL o la ruta de la imagen (absoluta o relativa)
• {HTMLElement | String} [args. loading_html = null] – un cargador HTML (elemento que se va a anexar al contenedor o a la cadena que representa el código HTML)
• {objeto} [args. size] – tamaño final del contenedor panorámico (p. ej. {width: 500, height: 300})
• {(número | String)} [args. size. width] – ancho final en porcentaje (p. ej. ' ' 50% ' ') o píxeles (p. ej., ' 500 ' o ' ' 500px ' '); valor predeterminado a la anchura actual
• {(número | String)} [args. size. height] – altura final en porcentaje o píxeles; por defecto a la altura actual
• {PhotoSphereViewer ~ onReady} [args. OnReady] – función llamada una vez que el panorama está listo y se muestra la primera imagen