vr-react
Version:
react VR全景图组件 超简单实用
1 lines • 5.84 kB
JavaScript
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n="object"==typeof exports?t(require("react")):t(e.React);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(window,(function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n.n(r);function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,a=[],i=!0,c=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){c=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(c)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return l(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return l(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var s=function(){var e,t;e="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css",(t=document.createElement("link")).rel="stylesheet",t.type="text/css",t.href=e,document.getElementsByTagName("head")[0].appendChild(t);return function(e){var t=document.createElement("style");t.type="text/css";try{t.appendChild(document.createTextNode(e))}catch(n){t.textContent=e}document.getElementsByTagName("head")[0].appendChild(t)}("\n .panorama {\n width: 100%;\n height: 100%;\n position: relative;\n }\n .pnlm-about-msg {\n display: none !important;\n }\n .pnlm-load-box {\n display: none !important;\n }\n .pnlm-container {\n background: transparent !important;\n }\n .pnlm-hotspot:hover {\n background-color: transparent !important;\n }\n .pnlm-pointer {\n cursor: default !important;\n }\n "),function(e){return new Promise((function(t,n){var r=document.createElement("script");r.type="text/javascript",r.src=e,document.body.appendChild(r),r.onload=function(e){t("success")}}))}("https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js")};var f=function(e){var t=e.config,n=void 0===t?{}:t,a=e.scenes,c=void 0===a?{}:a,l=e.width,f=e.height,p=e.firstSceneId,d=void 0===p?"":p,m=e.setViewer,y=e.hotSpots,b=void 0===y?[]:y,v=e.delayTime,h=void 0===v?0:v,g=u(Object(r.useState)(null),2),j=g[0],O=g[1],w=Object(r.useRef)(""),S=Object(r.useRef)([]),x=Object(r.useRef)(0);Object(r.useEffect)((function(){S.current=b.map((function(e){var t=i({},e);if(t.type="info",Array.isArray(t.cssClass)||(t.cssClass=[]),!t.id){var n=Math.random().toString(36).slice(-6);t.id=n}return t.cssClass=t.cssClass.join(" "),t}))}),[b]),Object(r.useEffect)((function(){s().then((function(){1!==x.current&&(x.current+=1,P())}))}),[]),Object(r.useEffect)((function(){if(j)return C(),j.on("load",C),function(){j.off("load",C)}}),[j]);var P=function(){var e=d;e||(e=Object.keys(c)[0]||"");var t=i({firstScene:e,orientationOnByDefault:!1,autoLoad:!0,autoRotate:2,autoRotateInactivityDelay:2e3,fallback:"",friction:.15,showFullscreenCtrl:!0,showZoomCtrl:!0,mouseZoom:!0,draggable:!0,disableKeyboardCtrl:!1,touchPanSpeedCoeffFactor:1,yaw:-10,minYaw:-180,maxYaw:180,pitch:0,minPitch:-180,maxPitch:180,hfov:100,minHfov:50,maxHfov:120,compass:!0,northOffset:0,preview:"",horizonPitch:0,horizonRoll:0,escapeHTML:!0,crossOrigin:"anonymous",sceneFadeDuration:1e3,hotSpotDebug:!1,backgroundColor:[0,0,0],avoidShowingBackground:!1},n),r=window.pannellum.viewer("panorama",{default:t,scenes:c});m&&m(r),O(r)};function C(){var e=j.getScene();S.current.forEach((function(t){if(t.sId===w.current&&j.removeHotSpot(t.id,t.sId),t.sId===e)var n=setTimeout((function(){j.addHotSpot(t,t.sId),clearTimeout(n)}),h)})),w.current=e}return o.a.createElement("div",{id:"panorama",className:"panorama",style:{width:l,height:f}})};t.default=f}]).default}));