需求说明:


官网需要制作鱼眼图转3D全景图的模块,可让用户手动拖动转动模型360度看房,进入时自动旋转,自动展现。


效果展示   http://www.zibling.site/panorama/



过程:


通过各款全景插件比较,我选择了PhotoSphereViewer。

原因:

1.全景轮播图的资源为一张,模式限定。

2.此款插件基于Three.js并且无需上传至平台等低效操作。


它的模板功能所实现的效果是通过上传本地图片,进行动态初始化全景图。考虑到场景需要,我将它二次封装,使用方法为调用函数时传入图片地址,所需渲染的DOM节点,所需渲染的高度。





核心代码段:



// 创建全景图


function createPanorama(imgUrl,doc,imgHeight){

       var img=imgUrl;

       // var img = "http://qqmmsh.oss-cn-hangzhou.aliyuncs.com/apply/6113528861282912.jpg";

       // 图片地址转BASE64

       function getBase64Image(img) {

               var canvas = document.createElement("canvas");

               canvas.width = img.width;

               canvas.height = img.height;

               

               var ctx = canvas.getContext("2d");

               ctx.drawImage(img, 0, 0, img.width, img.height);

               var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();

               var dataURL = canvas.toDataURL("image/"+ext);

               return dataURL;

       }

       // 初始化全景图 核心代码段

       function initVR(doc,imgData){

               var renderDom=document.querySelector(doc);

               // var div = document.getElementById('your-pano');

               console.log(renderDom);

               var PSV = new PhotoSphereViewer({

                       // Panorama, given in base 64

                       panorama: imgData,

                       // Container

                       container: renderDom,

                       // Deactivate the animation

                       time_anim: false,

                       // Display the navigation bar

                       navbar: true,

                       // Resize the panorama

                       size: {

                               width: '100%',

                               height: imgHeight

                       },

                       time_anim:500

               });

       }


       // 获取图片地址并转码

       var image = new Image();

       image.crossOrigin = '';

       image.src = img;

       image.onload = function(){

               var base64 = getBase64Image(image);

               console.log(base64);

               initVR(doc,base64);

       }

}



注意点:


图片需要通过BASE64转码

image.onload事件存在加载延迟


初始化时可传的参数另外还有

* Represents a panorama viewer.

 * @class

 * @param {object} args - Settings to apply to the viewer

 * @param {string} args.panorama - Panorama URL or path (absolute or relative)

 * @param {HTMLElement} args.container - Panorama container (should be a `div` or equivalent)

 * @param {boolean} [args.autoload=true] - `true` to automatically load the panorama, `false` to load it later (with the {@link PhotoSphereViewer#load|`.load`} method)

 * @param {boolean} [args.usexmpdata=true] - `true` if Photo Sphere Viewer must read XMP data, `false` if it is not necessary

 * @param {object} [args.default_position] - Defines the default position (the first point seen by the user)

 * @param {number|string} [args.default_position.long=0] - Default longitude, in radians (or in degrees if indicated, e.g. `'45deg'`)

 * @param {number|string} [args.default_position.lat=0] - Default latitude, in radians (or in degrees if indicated, e.g. `'45deg'`)

 * @param {number} [args.min_fov=30] - The minimal field of view, in degrees, between 1 and 179

 * @param {number} [args.max_fov=90] - The maximal field of view, in degrees, between 1 and 179

 * @param {boolean} [args.allow_user_interactions=true] - If set to `false`, the user won't be able to interact with the panorama (navigation bar is then disabled)

 * @param {number|string} [args.tilt_up_max=π/2] - The maximal tilt up angle, in radians (or in degrees if indicated, e.g. `'30deg'`)

 * @param {number|string} [args.tilt_down_max=π/2] - The maximal tilt down angle, in radians (or in degrees if indicated, e.g. `'30deg'`)

 * @param {number} [args.zoom_level=0] - The default zoom level, between 0 and 100

 * @param {number} [args.long_offset=π/360] - The longitude to travel per pixel moved by mouse/touch

 * @param {number} [args.lat_offset=π/180] - The latitude to travel per pixel moved by mouse/touch

 * @param {integer} [args.time_anim=2000] - Delay before automatically animating the panorama in milliseconds, `false` to not animate

 * @param {integer} [args.theta_offset=1440] - (deprecated, use `anim_speed` instead) The π fraction to add to theta during the animation

 * @param {string} [args.anim_speed=2rpm] - Animation speed in radians/degrees/revolutions per second/minute

 * @param {boolean} [args.navbar=false] - Display the navigation bar if set to `true`

 * @param {object} [args.navbar_style] - Style of the navigation bar

 * @param {string} [args.navbar_style.backgroundColor=rgba(61, 61, 61, 0.5)] - Navigation bar background color

 * @param {string} [args.navbar_style.buttonsColor=rgba(255, 255, 255, 0.7)] - Buttons foreground color

 * @param {string} [args.navbar_style.buttonsBackgroundColor=transparent] - Buttons background color

 * @param {string} [args.navbar_style.activeButtonsBackgroundColor=rgba(255, 255, 255, 0.1)] - Active buttons background color

 * @param {number} [args.navbar_style.buttonsHeight=20] - Buttons height in pixels

 * @param {number} [args.navbar_style.autorotateThickness=1] - Autorotate icon thickness in pixels

 * @param {number} [args.navbar_style.zoomRangeWidth=50] - Zoom range width in pixels

 * @param {number} [args.navbar_style.zoomRangeThickness=1] - Zoom range thickness in pixels

 * @param {number} [args.navbar_style.zoomRangeDisk=7] - Zoom range disk diameter in pixels

 * @param {number} [args.navbar_style.fullscreenRatio=4/3] - Fullscreen icon ratio (width/height)

 * @param {number} [args.navbar_style.fullscreenThickness=2] - Fullscreen icon thickness in pixels

 * @param {string} [args.loading_msg=Loading…] - Loading message

 * @param {string} [args.loading_img=null] - Loading image URL or path (absolute or relative)

 * @param {object} [args.size] - Final size of the panorama container (e.g. {width: 500, height: 300})

 * @param {(number|string)} [args.size.width] - Final width in percentage (e.g. `'50%'`) or pixels (e.g. `500` or `'500px'`) ; default to current width

 * @param {(number|string)} [args.size.height] - Final height in percentage or pixels ; default to current height

 * @param {PhotoSphereViewer~onReady} [args.onready] - Function called once the panorama is ready and the first image is displayed



这是一个兼容性良好,功能全面,操作简洁的插件,强烈推荐

Created with the Personal Edition of HelpNDoc: iPhone web sites made easy