html文件
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>photoShereViewer</title><link rel="stylesheet" href="/npm/@photo-sphere-viewer/core/index.min.css" /><link rel="stylesheet" href="/npm/@photo-sphere-viewer/markers-plugin/index.min.css" /><link rel="stylesheet" href="/npm/@photo-sphere-viewer/gallery-plugin/index.min.css" /><style></style></head><body><div id="viewer" style="width: 98vw; height: 98vh;"></div></body></html><script src="/npm/three/build/three.min.js"></script><script src="/npm/@photo-sphere-viewer/core/index.min.js"></script><script src="/npm/@photo-sphere-viewer/markers-plugin/index.min.js"></script><script src="/npm/@photo-sphere-viewer/autorotate-plugin/index.min.js"></script><script src="/npm/@photo-sphere-viewer/gallery-plugin/index.min.js"></script><script src="js/data.js"></script><script></script><script src="js/index.js"></script>
index.js
//动画参数const animatedValues = {pitch: {start: -Math.PI / 2,end: 0.2},yaw: {start: Math.PI,end: 0},zoom: {start: 0,end: 50},fisheye: {start: 2,end: 0},};var currIndex = 0;var panoramaUrl = "";//初始化实例const viewer = new PhotoSphereViewer.Viewer({container: 'viewer',panorama: photos[0].panorama || 'images/1.jpg',caption: '江西憶源多媒体科技有限公司',loadingImg: 'images/loader.gif',touchmoveTwoFingers: true,mousewheelCtrlKey: false,defaultPitch: animatedValues.pitch.start,defaultYaw: animatedValues.yaw.start,defaultZoomLvl: animatedValues.zoom.start,fisheye: animatedValues.fisheye.start,navbar: ['autorotate','zoom','move','download','gallery',{title: 'Change points',content: '🔄',onClick: randomPoints,},'caption','fullscreen',],plugins: [[PhotoSphereViewer.GalleryPlugin, {/*图库*/visibleOnLoad: true,hideOnClick: false}],[PhotoSphereViewer.AutorotatePlugin, {/**自动旋转*/autostartDelay: 0,autorotatePitch: animatedValues.pitch.end,autostartOnIdle: false,}],[PhotoSphereViewer.MarkersPlugin, {/* 标记 */markers: []}],],});/*****图片标记******/const markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);markersPlugin.addEventListener('select-marker', ({marker}) => {if (marker.id == "new-marker1") {currIndex = 1;}if (marker.id == "new-marker2") {currIndex = 2;}if (marker.id == "new-marker3") {markersPlugin.updateMarker({id:marker.id,image:"images/bao.png"});} else {panoramaUrl = photos[currIndex].panorama;handelChangeViewer();}});function addMarker() { //增加标记点markersPlugin.addMarker({id: 'new-marker7',position: {yaw: '-171deg',pitch: '26deg'},image: 'images/local.png',size: {width: 35,height: 35},});}function setMarkers() { //设置标记点markersPlugin.setMarkers(markers);}//图库列表当前展示active更新function handelGalleryActive() {const galleryBox = document.getElementsByClassName("psv-gallery-container")[0];const galleryItemEle =document.getElementsByClassName("psv-gallery-item")[this.currIndex];galleryBox.childNodes.forEach((item) => {item.className = "psv-gallery-item";});galleryItemEle.classList.add("psv-gallery-item--active");}//图库列表切换场景document.addEventListener("click", function (e) {var element = document.elementFromPoint(e.clientX, e.clientY);var flag = false;var _sindex="";if (element && element.dataset && element.dataset.psvGalleryItem) {const id = element.dataset.psvGalleryItem;_sindex = photos.findIndex((data) => {return data.id == id;});flag = true;} else {if (element&&element.className == "psv-gallery-item-thumb") {const eleId =element.parentElement.parentElement.dataset.psvGalleryItem;_sindex = photos.findIndex((data) => {return data.id == eleId;});flag = true;}}if (flag) {if (currIndex == _sindex) {console.log("点击未切换");} else {currIndex = _sindex;panoramaUrl = photos[_sindex].panorama;handelChangeViewer("gallery");}}});function handelChangeViewer(type) {if (viewer) {clearMarker();viewer.setPanorama(panoramaUrl).then(() => {markersPlugin.setMarkers(photos[currIndex].markers);});if (type != "gallery") {handelGalleryActive();}}}function clearMarker() {markersPlugin.clearMarkers();}//全景图点击事件viewer.addEventListener('click', ({data}) => {if (!data.rightclick) {markersPlugin.addMarker({id: '#' + Math.random(),position: {yaw: data.yaw,pitch: data.pitch},image: 'images/local.png',size: {width: 32,height: 32},anchor: 'bottom center',tooltip: '新增标记',data: {generated: true,},});}})/**图库列表***/const gallery = viewer.getPlugin(PhotoSphereViewer.GalleryPlugin);gallery.setItems(photos);/*****navbar 自定义图标（展示new-marker3的Tooltip）******/function randomPoints() {markersPlugin.showMarkerTooltip('new-marker3');markersPlugin.toggleMarker();}//页面加载const autorotate = viewer.getPlugin(PhotoSphereViewer.AutorotatePlugin);viewer.addEventListener('ready', onloadFunction, {once: true});function onloadFunction() {autorotate.stop();new PhotoSphereViewer.utils.Animation({properties: animatedValues,duration: 2500,easing: 'inOutQuad',onTick: (properties) => {viewer.setOption('fisheye', properties.fisheye);viewer.rotate({yaw: properties.yaw,pitch: properties.pitch});viewer.zoom(properties.zoom);},}).then(() => {autorotate.start();});//添加标记setMarkers();addMarker();}
比Vue版本的多了个入场动画效果
function onloadFunction() {autorotate.stop();new PhotoSphereViewer.utils.Animation({properties: animatedValues,duration: 2500,easing: 'inOutQuad',onTick: (properties) => {viewer.setOption('fisheye', properties.fisheye);viewer.rotate({yaw: properties.yaw,pitch: properties.pitch});viewer.zoom(properties.zoom);},}).then(() => {autorotate.start();});//添加标记setMarkers();addMarker();}
模拟数据参考vue版本：/Holly31/article/details/129010808
