欢迎光临
我的个人博客网站

photo-sphere-viewer.js实现全景图

photo-sphere-viewer.js是一个基于three.js的全景插件

1、能添加热点;
2、能调用陀螺仪;
3、操作简单,提供一张全景图片即可(大多数手机都可以拍摄)

 

官网:https://photo-sphere-viewer.js.org/

使用方法很简单,直接去官网参考example和api使用文档,github上下载源码即可。

建议不要找网上的,版本太老,api用法都不太一样了,功能也没有新版的完善。

 

1、直接访问全景图(移动端自动调用陀螺仪)

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>全景图基础版-自动调用陀螺仪/title>          <link rel="stylesheet" href="libs/photo-sphere-viewer.min.css"/>     <script src="libs/three.min.js"></script>     <script src="libs/browser.min.js"></script>     <script src="libs/photo-sphere-viewer.min.js"></script>     <script src="libs/gyroscope.js"></script>          <div id="viewer"></div>          <style>       /* the viewer container must have a defined size */       *{           margin:0;           padding:0;       }       #viewer {         width: 100vw;         height: 100vh;       }     </style>          <script>var viewer = new PhotoSphereViewer.Viewer({             container: document.querySelector('#viewer'),             panorama: 'budi.jpg',             plugins: [                 PhotoSphereViewer.GyroscopePlugin,             ],             lang: {                 gyroscope : 'Gyroscope',             },         });                // 如果是移动端         if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {             viewer.once('ready', function(){                 document.querySelector('.psv-gyroscope-button').click();             });         }     </script> </body>  </html>

 注意:Photo Sphere Viewer的陀螺仪必须在https下才能开启,否则无效!!!

 

2、使用iframe访问全景图

这种情况下存在跨域iframe问题,需要使用post message进行父子组件通信

(1)【父组件】iframe.html

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>全景图跨域iframe版-子组件</title>          <style>         *{             margin:0;             padding:0;         }         html,body,iframe {             width: 100%;             height: 100%;         }     </style> </head>  <body>     <iframe id="iframe" frameborder="no" border="0" marginwidth="0" marginheight="0" src="https://xxx.xxx.com/vr.html" scrolling="no"  allowTransparency="true"></iframe>      <script>          if (window.DeviceOrientationEvent) {         window.addEventListener("deviceorientation", handleOrientation, false); // 组件iframe层  -- VR iframe层     } else {         alert("您的浏览器不支持HTML5 DeviceOrientation接口");     }      function handleOrientation(orientData){         var absolute = orientData.absolute;         var alpha = orientData.alpha;         var beta = orientData.beta;         var gamma = orientData.gamma;          // Do stuff with the new orientation data         var val = {             "act": "gyroscope",             "val": {                 alpha: alpha,                 beta: beta,                 gamma: gamma             }         };         //获取iframe         var ifr = document.querySelector('#iframe');          //iframe的路径         var url = 'https://xxx.xxx.com/vr.html';         ifr.contentWindow.postMessage(JSON.stringify(val), url);     }     </script> </body>  </html>

 

 

(2)【子组件】vr.html

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>全景图跨域iframe版-子组件</title>          <link rel="stylesheet" href="libs/photo-sphere-viewer.min.css"/>     <script src="libs/three.min.js"></script>     <script src="libs/browser.min.js"></script>     <script src="libs/photo-sphere-viewer.min.js"></script>     <script src="libs/gyroscope.js"></script>          <div id="viewer"></div>          <style>       /* the viewer container must have a defined size */       *{           margin:0;           padding:0;       }       #viewer {         width: 100vw;         height: 100vh;       }     </style>          <script>         // 接收消息         if(top !== self) {             window.parent.postMessage("gyroscope", '*');         }                  window.onmessage = function(event) {             var data = eval('(' + event.data + ')');             if (data.act === 'gyroscope') {                 window.deviceOrientation = data.val;             }         }                  var viewer = new PhotoSphereViewer.Viewer({             container: document.querySelector('#viewer'),             panorama: 'budi.jpg',             plugins: [                 PhotoSphereViewer.GyroscopePlugin,             ],             lang: {                 gyroscope : 'Gyroscope',             },         });                // 如果是移动端         if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {             viewer.once('ready', function(){                 document.querySelector('.psv-gyroscope-button').click();             });         }     </script> </body>  </html>

 

(3) 修改gyroscope.js (跟我需求一样的小伙伴直接复制替换即可)

/*! * Photo Sphere Viewer 4.1.0 * @copyright 2014-2015 Jérémy Heleine * @copyright 2015-2021 Damien "Mistic" Sorel * @licence MIT (https://opensource.org/licenses/MIT) */ (function (global, factory) {   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('photo-sphere-viewer'), require('three')) :   typeof define === 'function' && define.amd ? define(['photo-sphere-viewer', 'three'], factory) :   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.PhotoSphereViewer = global.PhotoSphereViewer || {}, global.PhotoSphereViewer.GyroscopePlugin = factory(global.PhotoSphereViewer, global.THREE))); }(this, (function (photoSphereViewer, THREE) { 'use strict';    function _extends() {     _extends = Object.assign || function (target) {       for (var i = 1; i < arguments.length; i++) {         var source = arguments[i];          for (var key in source) {           if (Object.prototype.hasOwnProperty.call(source, key)) {             target[key] = source[key];           }         }       }        return target;     };      return _extends.apply(this, arguments);   }    function _inheritsLoose(subClass, superClass) {     subClass.prototype = Object.create(superClass.prototype);     subClass.prototype.constructor = subClass;     subClass.__proto__ = superClass;   }    function _assertThisInitialized(self) {     if (self === void 0) {       throw new ReferenceError("this hasn't been initialised - super() hasn't been called");     }      return self;   }    /**    * W3C Device Orientation control (http://w3c.github.io/deviceorientation/spec-source-orientation.html)    */    var DeviceOrientationControls = function DeviceOrientationControls(object) {     var scope = this;     var changeEvent = {       type: 'change'     };     var EPS = 0.000001;     this.object = object;     this.object.rotation.reorder('YXZ');     this.enabled = true;     this.deviceOrientation = {};     this.screenOrientation = 0;     this.alphaOffset = 0; // radians      var onDeviceOrientationChangeEvent = function onDeviceOrientationChangeEvent(event) {       scope.deviceOrientation = event;     };      var onScreenOrientationChangeEvent = function onScreenOrientationChangeEvent() {       scope.screenOrientation = window.orientation || 0;     }; // The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''       var setObjectQuaternion = function () {       var zee = new THREE.Vector3(0, 0, 1);       var euler = new THREE.Euler();       var q0 = new THREE.Quaternion();       var q1 = new THREE.Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)); // - PI/2 around the x-axis        return function (quaternion, alpha, beta, gamma, orient) {         euler.set(beta, alpha, -gamma, 'YXZ'); // 'ZXY' for the device, but 'YXZ' for us          quaternion.setFromEuler(euler); // orient the device          quaternion.multiply(q1); // camera looks out the back of the device, not the top          quaternion.multiply(q0.setFromAxisAngle(zee, -orient)); // adjust for screen orientation       };     }();      this.connect = function () {       onScreenOrientationChangeEvent(); // run once on load     //   onDeviceOrientationChangeEvent();       // iOS 13+      //   if (window.DeviceOrientationEvent !== undefined && typeof window.DeviceOrientationEvent.requestPermission === 'function') {     //     window.DeviceOrientationEvent.requestPermission().then(function (response) {     //       if (response == 'granted') {     //         window.addEventListener('orientationchange', onScreenOrientationChangeEvent, false);     //         window.addEventListener('deviceorientation', onDeviceOrientationChangeEvent, false);     //       }     //     }).catch(function (error) {     //       console.error('THREE.DeviceOrientationControls: Unable to use DeviceOrientation API:', error);     //     });     //   } else {     //     //   window.addEventListener('orientationchange', onScreenOrientationChangeEvent, false);     //     //   window.addEventListener('deviceorientation', onDeviceOrientationChangeEvent, false);                //       if (top === self) {     //           window.addEventListener('orientationchange', onScreenOrientationChangeEvent, false);     //           window.addEventListener('deviceorientation', onDeviceOrientationChangeEvent, false);     //       }else{                    //       }     //   }              window.addEventListener('orientationchange', onScreenOrientationChangeEvent, false);       window.addEventListener('deviceorientation', onDeviceOrientationChangeEvent, false);        scope.enabled = true;     };      this.disconnect = function () {       window.removeEventListener('orientationchange', onScreenOrientationChangeEvent, false);       window.removeEventListener('deviceorientation', onDeviceOrientationChangeEvent, false);       scope.enabled = false;     };      this.update = function () {       var lastQuaternion = new THREE.Quaternion();       return function () {         if (scope.enabled === false) return;                  var device = scope.deviceOrientation;                  if (top !== self) {             device = window.deviceOrientation;         }                  if (device) {           var alpha = device.alpha ? THREE.MathUtils.degToRad(device.alpha) + scope.alphaOffset : 0; // Z            var beta = device.beta ? THREE.MathUtils.degToRad(device.beta) : 0; // X'            var gamma = device.gamma ? THREE.MathUtils.degToRad(device.gamma) : 0; // Y''            var orient = scope.screenOrientation ? THREE.MathUtils.degToRad(scope.screenOrientation) : 0; // O            setObjectQuaternion(scope.object.quaternion, alpha, beta, gamma, orient);            if (8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS) {             lastQuaternion.copy(scope.object.quaternion);             scope.dispatchEvent(changeEvent);           }         }       };     }();      this.dispose = function () {       scope.disconnect();     };      this.connect();   };    DeviceOrientationControls.prototype = Object.create(THREE.EventDispatcher.prototype);   DeviceOrientationControls.prototype.constructor = DeviceOrientationControls;    var compass = "<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="currentColor" d="M50 0a50 50 0 1 0 0 100A50 50 0 0 0 50 0zm0 88.81a38.86 38.86 0 0 1-38.81-38.8 38.86 38.86 0 0 1 38.8-38.82A38.86 38.86 0 0 1 88.82 50 38.87 38.87 0 0 1 50 88.81z"/><path d="M72.07 25.9L40.25 41.06 27.92 74.12l31.82-15.18v-.01l12.32-33.03zM57.84 54.4L44.9 42.58l21.1-10.06-8.17 21.9z"/><!--Created by iconoci from the Noun Project--></svg>n";    /**    * @summary Navigation bar gyroscope button class    * @extends PSV.buttons.AbstractButton    * @memberof PSV.buttons    */    var GyroscopeButton = /*#__PURE__*/function (_AbstractButton) {     _inheritsLoose(GyroscopeButton, _AbstractButton);      /**      * @param {PSV.components.Navbar} navbar      */     function GyroscopeButton(navbar) {       var _this;        _this = _AbstractButton.call(this, navbar, 'psv-button--hover-scale psv-gyroscope-button', true) || this;       /**        * @type {PSV.plugins.GyroscopePlugin}        * @readonly        * @private        */        _this.plugin = _this.psv.getPlugin(GyroscopePlugin.id);        if (_this.plugin) {         _this.plugin.on(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, _assertThisInitialized(_this));       }        return _this;     }     /**      * @override      */       var _proto = GyroscopeButton.prototype;      _proto.destroy = function destroy() {       if (this.plugin) {         this.plugin.off(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, this);       }        delete this.plugin;        _AbstractButton.prototype.destroy.call(this);     }     /**      * @override      */     ;      _proto.isSupported = function isSupported() {       return !this.plugin ? false : {         initial: false,         promise: this.plugin.prop.isSupported       };     }     /**      * @summary Handles events      * @param {Event} e      * @private      */     ;      _proto.handleEvent = function handleEvent(e) {       if (e.type === GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED) {         this.toggleActive(e.args[0]);       }     }     /**      * @override      * @description Toggles gyroscope control      */     ;      _proto.onClick = function onClick() {       this.plugin.toggle();     };      return GyroscopeButton;   }(photoSphereViewer.AbstractButton);   GyroscopeButton.id = 'gyroscope';   GyroscopeButton.icon = compass;    /**    * @typedef {Object} external:THREE.DeviceOrientationControls    * @summary {@link https://github.com/mrdoob/three.js/blob/dev/examples/jsm/controls/DeviceOrientationControls.js}    */    /**    * @typedef {Object} PSV.plugins.GyroscopePlugin.Options    * @property {boolean} [touchmove=true] - allows to pan horizontally when the gyroscope is enabled (requires global `mousemove=true`)    * @property {boolean} [absolutePosition=false] - when true the view will ignore the current direction when enabling gyroscope control    */   // add gyroscope button    photoSphereViewer.DEFAULTS.navbar.splice(-1, 0, GyroscopeButton.id);   photoSphereViewer.DEFAULTS.lang[GyroscopeButton.id] = 'Gyroscope';   photoSphereViewer.registerButton(GyroscopeButton);   /**    * @summary Adds gyroscope controls on mobile devices    * @extends PSV.plugins.AbstractPlugin    * @memberof PSV.plugins    */    var GyroscopePlugin = /*#__PURE__*/function (_AbstractPlugin) {     _inheritsLoose(GyroscopePlugin, _AbstractPlugin);      /**      * @summary Available events      * @enum {string}      * @memberof PSV.plugins.GyroscopePlugin      * @constant      */      /**      * @param {PSV.Viewer} psv      * @param {PSV.plugins.GyroscopePlugin.Options} options      */     function GyroscopePlugin(psv, options) {       var _this;        _this = _AbstractPlugin.call(this, psv) || this;       /**        * @member {Object}        * @private        * @property {Promise<boolean>} isSupported - indicates of the gyroscope API is available        * @property {number} alphaOffset - current alpha offset for gyroscope controls        * @property {Function} orientationCb - update callback of the device orientation        * @property {boolean} config_moveInertia - original config "moveInertia"        */        _this.prop = {         isSupported: _this.__checkSupport(),         alphaOffset: 0,         orientationCb: null,         config_moveInertia: true       };       /**        * @member {PSV.plugins.GyroscopePlugin.Options}        * @private        */        _this.config = _extends({         touchmove: true,         absolutePosition: false       }, options);       /**        * @member {external:THREE.DeviceOrientationControls}        * @private        */        _this.controls = null;        _this.psv.on(photoSphereViewer.CONSTANTS.EVENTS.STOP_ALL, _assertThisInitialized(_this));        _this.psv.on(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_ROTATE, _assertThisInitialized(_this));        return _this;     }     /**      * @package      */       var _proto = GyroscopePlugin.prototype;      _proto.destroy = function destroy() {       this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.STOP_ALL, this);       this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_ROTATE, this);       this.stop();       delete this.controls;       delete this.prop;        _AbstractPlugin.prototype.destroy.call(this);     }     /**      * @private      */     ;      _proto.handleEvent = function handleEvent(e) {       switch (e.type) {         case photoSphereViewer.CONSTANTS.EVENTS.STOP_ALL:           this.stop();           break;          case photoSphereViewer.CONSTANTS.EVENTS.BEFORE_ROTATE:           this.__onRotate(e);            break;       }     }     /**      * @summary Checks if the gyroscope is enabled      * @returns {boolean}      */     ;      _proto.isEnabled = function isEnabled() {       return !!this.prop.orientationCb;     }     /**      * @summary Enables the gyroscope navigation if available      * @returns {Promise}      * @fires PSV.plugins.GyroscopePlugin.gyroscope-updated      * @throws {PSV.PSVError} if the gyroscope API is not available/granted      */     ;      _proto.start = function start() {       var _this2 = this;        return this.prop.isSupported.then(function (supported) {         if (supported) {           return _this2.__requestPermission();         } else {           photoSphereViewer.utils.logWarn('gyroscope not available');           return Promise.reject();         }       }).then(function (granted) {         if (granted) {           return Promise.resolve();         } else {           photoSphereViewer.utils.logWarn('gyroscope not allowed');           return Promise.reject();         }       }).then(function () {         _this2.psv.__stopAll(); // disable inertia           _this2.prop.config_moveInertia = _this2.psv.config.moveInertia;         _this2.psv.config.moveInertia = false;          _this2.__configure();         /**          * @event gyroscope-updated          * @memberof PSV.plugins.GyroscopePlugin          * @summary Triggered when the gyroscope mode is enabled/disabled          * @param {boolean} enabled          */           _this2.trigger(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, true);       });     }     /**      * @summary Disables the gyroscope navigation      * @fires PSV.plugins.GyroscopePlugin.gyroscope-updated      */     ;      _proto.stop = function stop() {       if (this.isEnabled()) {         this.controls.disconnect();         this.psv.off(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_RENDER, this.prop.orientationCb);         this.prop.orientationCb = null;         this.psv.config.moveInertia = this.prop.config_moveInertia;         this.trigger(GyroscopePlugin.EVENTS.GYROSCOPE_UPDATED, false);       }     }     /**      * @summary Enables or disables the gyroscope navigation      */     ;      _proto.toggle = function toggle() {       if (this.isEnabled()) {         this.stop();       } else {         this.start();       }     }     /**      * @summary Attaches the {@link external:THREE.DeviceOrientationControls} to the camera      * @private      */     ;      _proto.__configure = function __configure() {       var _this3 = this;        if (!this.controls) {         this.controls = new DeviceOrientationControls(this.psv.renderer.camera);       } else {         this.controls.connect();       } // force reset         this.controls.deviceOrientation = null;       this.controls.screenOrientation = 0;       this.controls.alphaOffset = 0;       this.prop.alphaOffset = this.config.absolutePosition ? 0 : null;        this.prop.orientationCb = function () {         if (!_this3.controls.deviceOrientation) {           return;         } // on first run compute the offset depending on the current viewer position and device orientation           if (_this3.prop.alphaOffset === null) {           _this3.controls.update();            var direction = new THREE.Vector3();            _this3.psv.renderer.camera.getWorldDirection(direction);            var sphericalCoords = _this3.psv.dataHelper.vector3ToSphericalCoords(direction);            _this3.prop.alphaOffset = sphericalCoords.longitude - _this3.psv.prop.position.longitude;         } else {           _this3.controls.alphaOffset = _this3.prop.alphaOffset;            _this3.controls.update();            _this3.psv.renderer.camera.getWorldDirection(_this3.psv.prop.direction);            _this3.psv.prop.direction.multiplyScalar(photoSphereViewer.CONSTANTS.SPHERE_RADIUS);            var _sphericalCoords = _this3.psv.dataHelper.vector3ToSphericalCoords(_this3.psv.prop.direction);            _this3.psv.prop.position.longitude = _sphericalCoords.longitude;           _this3.psv.prop.position.latitude = _sphericalCoords.latitude;            _this3.psv.needsUpdate();         }       };        this.psv.on(photoSphereViewer.CONSTANTS.EVENTS.BEFORE_RENDER, this.prop.orientationCb);     }     /**      * @summary Intercepts moves and offsets the alpha angle      * @param {external:uEvent.Event} e      * @private      */     ;      _proto.__onRotate = function __onRotate(e) {       if (this.isEnabled()) {         e.preventDefault();          if (this.config.touchmove) {           this.prop.alphaOffset -= e.args[0].longitude - this.psv.prop.position.longitude;         }       }     }     /**      * @summary Detects if device orientation is supported      * @returns {Promise<boolean>}      * @private      */     ;      _proto.__checkSupport = function __checkSupport() {       if ('DeviceMotionEvent' in window && typeof DeviceMotionEvent.requestPermission === 'function') {         return Promise.resolve(true);       } else if ('DeviceOrientationEvent' in window) {         return new Promise(function (resolve) {           var listener = function listener(e) {             resolve(e && e.alpha !== null && !isNaN(e.alpha));             window.removeEventListener('deviceorientation', listener);           };            window.addEventListener('deviceorientation', listener, false); // after 2 secs, auto-reject the promise            setTimeout(listener, 2000);         });       } else {         return Promise.resolve(false);       }     }     /**      * @summary Request permission to the motion API      * @returns {Promise<boolean>}      * @private      */     ;      _proto.__requestPermission = function __requestPermission() {       if ('DeviceMotionEvent' in window && typeof DeviceMotionEvent.requestPermission === 'function') {         return DeviceOrientationEvent.requestPermission().then(function (response) {           return response === 'granted';         }).catch(function () {           return false;         });       } else {         return Promise.resolve(true);       }     };      return GyroscopePlugin;   }(photoSphereViewer.AbstractPlugin);    GyroscopePlugin.id = 'gyroscope';   GyroscopePlugin.EVENTS = {     GYROSCOPE_UPDATED: 'gyroscope-updated'   };    return GyroscopePlugin;  }))); //# sourceMappingURL=gyroscope.js.map

 因为我的项目需要开启自动陀螺仪,所以我删掉了有关是否允许设备开启陀螺仪的判断

赞(0) 打赏
未经允许不得转载:张拓的天空 » photo-sphere-viewer.js实现全景图
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏