360 × 180 grados Visor panorámico con tres. js-Photo Sphere Viewer

Vista prévia

Descripción

Photo Sphere Viewer es una biblioteca de JavaScript pura que se utiliza para incrustar imágenes panorámicas interactivas en su proyecto web utilizando tres. js.

¿Cómo funciona?

Cargue los tres. js necesarios y la biblioteca JavaScript de Photo Sphere Viewer en el documento.

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

Cree un contenedor para el Visor panorámico.

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

Cree un nuevo objeto PhotoSphereViewer y pase los parámetros al Visor panorámico.

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


panorama: 'sun.jpg',


container: div,


time_anim: 3000,


navbar: true,


navbar_style: {



backgroundColor: 'rgba(58, 67, 77, 0.7)'


}
});

Todos los parámetros predeterminados para personalizar el Visor panorámico.

• panorama : URL panorámica o ruta (absoluta o relativa)
• Container : contenedor panorámico (debe ser un ' div ' o equivalente), puede ser una cadena (el ID del elemento que se va a recuperar)
• Overlay : imagen para añadir sobre el panorama
• superposición. Image : URL de imagen o ruta
• superposición. Position = nulo: posición de imagen (por defecto en la esquina inferior izquierda)
• Overlay. position. x = null : posición de imagen horizontal (' Left ' o ' Right ')
• Overlay. position. y = null : posición vertical de la imagen (' Top ' o ' Bottom ')
• Overlay. Size = null : tamaño de la imagen (si necesita ser redimensionada)
• Overlay. tamaño. width = null : ancho de la imagen (en píxeles o un porcentaje, como ' 20% ')
• Overlay. size. Height = null : altura de la imagen (en píxeles o un porcentaje, como ' 20% ')
• segmentos = 100 : número de segmentos en la esfera
• anillos = 100 : número de anillos en la esfera
• autoload = true : ' true ' para cargar automáticamente el panorama, ' false ' para cargarlo más tarde (con el método {@link PhotoSphereViewer # Load | '. Load '})
• usexmpdata = true : ' true ' si Photo Sphere Viewer debe leer datos XMP, ' false ' si no es necesario
• cors_anonymous = true : ' true ' para desactivar el intercambio de credenciales de usuario a través de cookies, ' false ' de lo contrario
• pano_size = null : el tamaño del panorama, si se recorta (innecesario si se pueden leer los datos XMP)
• pano_size. full_width = null : el ancho panorámico completo, antes de recortar (el ancho de la imagen si es ' null ')
• pano_size. full_height = null : la altura panorámica completa, antes de recortar (la altura de la imagen si es ' null ')
• pano_size. cropped_width = null : el ancho panorámico recortado (el ancho de la imagen si es ' null ')
• pano_size. cropped_height = null : la altura panorámica recortada (la altura de la imagen si es ' null ')
• pano_size. cropped_x = null : el desplazamiento horizontal de panorama recortado en relación con el ancho completo (medio si ' null ')
• pano_size. cropped_y = null : el desplazamiento vertical de panorama recortado con respecto a la altura completa (medio si ' null ')
• captured_view = null : la vista capturada real, comparada con la teórica 360 Â ° Ã & #151; 180 Â ° posible vista
• captured_view. horizontal_fov = 360 : el campo de visión capturado horizontalmente en grados (por defecto a 360 Â °)
• captured_view. vertical_fov = 180 : el campo de vista vertical capturado en grados (por defecto a 180 Â °)
• default_position : define la posición por defecto (el primer punto visto por el usuario)
• default_position. Long = 0 : longitud por defecto, en radianes (o en grados si se indica, por ejemplo ' ' 45deg ' ')
• default_position. lat = 0 : latitud por defecto, en radianes (o en grados si se indica, por ejemplo ' ' 45deg ' ')
• min_fov = 30 : el campo de visión mínimo, en grados, entre 1 y 179
• max_fov = 90 : el campo de visión máximo, en grados, entre 1 y 179
• allow_user_interactions = true : si se establece en ' false ', el usuario no podrá interactuar con el panorama (la barra de navegación se desactiva)
• allow_scroll_to_zoom = true : se establece en ' false ', el usuario no será capaz de desplazarse con el ratón para hacer zoom
• zoom_speed = 1 : indique un número mayor que 1 para aumentar la velocidad del zoom
• tilt_up_max = Ï & #128;/2 : el ángulo máximo de inclinación hacia arriba, en radianes (o en grados si se indica, por ejemplo ' ' 30Deg ' ')
• tilt_down_max = Ï & #128;/2 : el ángulo máximo de inclinación hacia abajo, en radianes (o en grados si se indica, por ejemplo ' ' 30Deg ' ')
• min_longitude = 0 : la longitud mínima para mostrar
• max_longitude = 2 Ï & #128; : la longitud máxima para mostrar
• zoom_level = 0 : el nivel de zoom predeterminado, entre 0 y 100
• smooth_user_moves = true : si se establece en ' false ', los movimientos del usuario tienen una velocidad fijada por ' long_offset ' y ' lat_offset '
• long_offset = Ï & #128;/360 : la longitud de desplazamiento por píxel movido por el mouse/Touch
• lat_offset = Ï & #128;/180 : la latitud para viajar por píxel movido por Mouse/Touch
• keyboard_long_offset = Ï & #128;/60 : la longitud para viajar cuando el usuario golpea la flecha izquierda/derecha
• keyboard_lat_offset = Ï & #128;/120 : la latitud para viajar cuando el usuario golpea la flecha arriba/abajo
• time_anim = 2000 : retardo antes de animar automáticamente el panorama en milisegundos, ' false ' para no animar
• 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)
• anim_speed = 2rpm : velocidad de animación en radianes/grados/revoluciones por segundo/minuto
• vertical_anim_speed = 2rpm : velocidad de animación vertical en radianes/grados/revoluciones por segundo/minuto
• vertical_anim_target = 0 : latitud a destino durante la animación de autorotato, por defecto al Ecuador
• navbar = false : Mostrar la barra de navegación si se establece en ' true '
• navbar_style : estilo de la barra de navegación
• navbar_style. backgroundColor = rgba (61, 61, 61, 0,5) : color de fondo de la barra de navegación
• navbar_style. buttonsColor = rgba (255, 255, 255, 0,7) : botones color de primer plano
• navbar_style. buttonsBackgroundColor = Transparent : botones color de fondo
• navbar_style. activeButtonsBackgroundColor = rgba (255, 255, 255, 0,1) : color de fondo botones activos
• navbar_style. buttonsHeight = 20 : botones de altura en píxeles
• navbar_style. autorotateThickness = 1 : grosor del icono de Autorotato en píxeles
• navbar_style. zoomRangeWidth = 50 : ancho de rango de zoom en píxeles
• navbar_style. zoomRangeThickness = 1 : grosor del rango de zoom en píxeles
• navbar_style. zoomRangeDisk = 7 : diámetro del disco de rango de zoom en píxeles
• navbar_style. fullscreenRatio = 4/3 : relación de icono de pantalla completa (ancho/alto)
• navbar_style. fullscreenThickness = 2 : espesor de icono de pantalla completa en píxeles
• eyes_offset = 5 : desplazamiento de ojos en modo VR
• loading_msg = cargando â & #128; ¦ : cargando mensaje
• loading_img = null : cargando URL de imagen o vía de acceso (absoluta o relativa)
• loading_html = null : un cargador HTML (elemento que se va a anexar al contenedor o cadena que representa el código HTML)
• tamaño : tamaño final del contenedor panorámico (p. ej. {width: 500, height: 300})
• tamaño. width : ancho final en porcentaje (por ejemplo, ' ' 50% ' ') o píxeles (por ejemplo, ' 500 ' o ' ' 500px ' '); valor predeterminado a la anchura actual
• tamaño. Height : altura final en porcentaje o píxeles; por defecto a la altura actual
• OnReady : función llamada una vez que el panorama está listo y la primera imagen se visualiza

Registro de cambios

v2.9 (07/11/2018)

• actualizar