3D Panorama browsing in the browser

If you have used the Web version of the Baidu map, you big 3D panorama browsing is a kind of cool experience: At a point can be 360 degrees to look around the buildings, scenery, of course, can also be moved around, like immersive.

Science

Panorama is divided into three types:

① Spherical panoramic view

Use a panorama to enclose a ball and position itself in the sphere. Since the picture is a rectangle, it is obvious that the top and bottom seams are visible.

Spherical panorama is the most close to the human eye of the construction model, if the use of multiple façade construction, splicing method cumbersome, high performance consumption.

As a result, this article describes a spherical panorama made up of a panoramic image.

② Cube Panorama

A cube with six faces, so it takes six pictures. Its position is in the middle of the cube. This is also the most common panorama building pattern.

③ column Panorama

This is a combination of the first two build patterns.

Get ready

In the browser to achieve 3D Panorama browsing development, first need a few things:

① support for WebGL and canvas browsers

②three.js

This plugin is not introduced here, so reading this article requires three.js simple base O (∩_∩) o~

: Https://github.com/mrdoob/three.js

③photo-sphere-viewer.js

This is a columnar panorama plugin based on three.js development.

: Https://github.com/JeremyHeleine/Photo-Sphere-Viewer

④ Panoramic view

Like that 360-degree panorama, preferably around can be perfect stitching, so look at the natural.

Now there are also tools to generate panoramas, which are not covered here.

Panorama footage site: http://www.tupian114.com/tupian/quanjing.html

Begin

Now start the code!!!

HTML section:

A LABEL element is required as a container for the panorama and introduces the required two plugins.

JS section:

Initializes the plug-in to create a Photosphereviewer object.

Among them, the first two options panorama and container are required, others are optional.

Then, the 3D panorama effect is realized, simple.

Then let's introduce the configuration parameters and methods.

Configuration Parameters Introduction

Panorama: (required) path to Panorama.

Container: (required) the container where the panorama is placed.

AutoLoad: (default is True) True to automatically load the panorama, false to load the panorama at a later point (through. Over Load method).

Usexmpdata: (The default value is true) whether the photo Sphere Viewer must read in the XMP data, false is not required.

Cors_anonymous: (The default value is True) true to not be able to access the user via cookies

Pano_size: (The default value is null) the size of the panorama, whether trimmed.

Default_position: (default = 0) defines the default location, the first point the user sees, for example: {Long:math.pi, LAT:MATH.PI/2}.

Min_fov: (The default value is 30) observe the smallest area, unit degrees, between 1-179.

Max_fov: (the default is 90) observe the maximum area, unit degrees, between 1-179.

Allow_user_interactions: (The default value is True) is set to False to prevent users from interacting with the panorama (the navigation bar is not available).

Allow_scroll_to_zoom: (The default value is True) if set to False, the user cannot zoom the picture by mouse scrolling.

Tilt_up_max: (The default value is MATH.PI/2) the maximum angle, in units radians, to tilt upward.

Tilt_down_max: (The default value is MATH.PI/2) the maximum angle, in units radians, that is tilted downward.

Min_longitude: (The default value is 0) the minimum longitude that can be displayed.

Max_longitude: (The default value is 2PI) the largest dimension that can be displayed.

Zoome_level: (default = 0) The default zoom level, the value is between 0-100.

Long_offset: (The default value is pi/360) the longitude value that passes through each pixel when the Mouse/touch is moved.

Lat_offset: (The default value is pi/180) the latitude value per pixel that is moved when Mouse/touch.

Time_anim (the default value is 2000) Panorama automatically animates after Time_anim milliseconds. (set to False to disable it)

Reverse_anim: (default = True) if the direction of the animation is reversed when the horizontal direction reaches the maximum/minimum longitude (only the full circle cannot be seen).

Anim_speed: (the default is 2rpm) how fast the animation is per second/minute.

Vertical_anim_speed: (the default is 2rpm) the speed of the animation in the vertical direction per second/minute.

Vertical_anim_target: (The default value is 0) when auto-rotates the dimension, the default is the equator.

NavBar: (default = False) displays the navigation bar.

Navbar_style: (The default value is False) the style of the navigation bar. Valid properties:

BackgroundColor: Navigation bar background color (default RGBA (61, 61, 61, 0.5));

Buttonscolor: Button foreground color (default RGBA (255, 255, 255, 0.7));

Buttonbackgroundcolor: Background color when button is activated (default RGBA (255, 255, 255, 0.1));

Buttonsheight: button height, unit px (default value 20);

Autorotatethickness: Automatically rotates the layer of the picture (default value 1);

Zoomrangewidth: The width of the scaling cursor, in PX (default value 50);

Zoomrangethickness: Scaling the layer of the cursor (default value 1);

Zoomrangedisk: Zoom cursor magnification, Unit px (default 7);

Fullscreenratio: The scale of the full screen icon (default value 4/3);

FULLSCREENTHICKNEEE: Layer of full screen image, Unit px (default value 2)

Loading_msg: (The default value is loading ... ) to load the information.

LOADING_IMG: (The default value is null) the path to the loading picture.

Loading_html: (The default value is null) the HTML loader (the element or string added to the container).

Size: (default = NULL) The final dimension of the Panorama container, for example {width:500, height:300}.

Onready: (default value is null) panorama is ready and the first picture is displayed after the callback function.

Method Introduction

Addaction ()

Fittocontainer ()

GetPosition ()

Getpositionindegrees ()

Getzoomlevel ()

Load ()

MoveTo ()

Rotate ()

Toggleautorotate ()

Toggledeviceorientation ()

Togglefullscreen ()

Togglestereo ()

Zoom ()

ZoomIn ()

Zoomout ()

3D Panorama browsing in the browser