Making 360 degree panorama _javascript technique based on Three.js plug-in

This is a three.js based plugin, preview address: poke here

How to use:

1, the use of this plug-in is very simple, the introduction of the following 2 JS

<script src= "Js/three.min.js" ></script>
<script src= "Js/photo-sphere-viewer.min.js" ></ Script>

2, initialization, (the specific parameters of the configuration according to the situation depends)

var PSV = new Photosphereviewer ({
//Panorama full path
panorama: ' images/360img03.jpg ',//The
elements of the panorama are
container: Div
})

Configuration parameters

The following are all the available configuration parameters for the Panorama plug-in:

Panorama: Required parameters, the path to the panorama.
Container: Required parameters, the div element to place the panorama.
AutoLoad: Optional, the default is True,true to invoke Panorama automatically, and false to load the panorama at the back (through the. Load () method).
Usexmpdata: Optional, the default value is true, if photo Sphere viewer must read XMP data.
Default_position: Optional, the default is {}, define the default location, and the first point that the user sees, such as: {Long:Math.PI, LAT:MATH.PI/2}.
Min_fov: Optional, the default value is 30, the smallest area observed, unit degrees, between 1-179.
Max_fov: Optional, the default value is 90, the maximum area observed, the unit degrees, between 1-179.
Allow_user_interactions: Optional, default is true, set to False to prevent user and panorama interaction (navigation bar is not available).
Tilt_up_max: Optional, the default value is MATH.PI/2, tilt up the maximum angle, unit radians.
Tilt_down_max: Optional, the default value is MATH.PI/2, the maximum angle of downward tilt, unit radians.
Zoom_level: Optional, the default value is 0, the default zoom level, the value is between 0-100.
Long_offset: Optional, the default value is the longitude value that is passed per pixel when the Pi/360,mouse/touch is moved.
Lat_offset: Optional, the default value is the latitude value that is passed per pixel when the Pi/180,mouse/touch is moved.
Time_anim: Optional, the default value is 2000, Panorama is automatically animated after Time_anim milliseconds. (set to False to disable it)
Theta_offset: Obsolete options, optional, the default is 1440, the speed of the automatic animation in the horizontal direction.
Anim_speed: Optional, the default value is 2rpm, animation speed, per second/minute how much radians/degrees/revolutions.
NavBar: Optional value, default to False. Displays the navigation bar.
Navbar_style: Optional value, default to {}. The custom style of the navigation bar. The following is a list of available styles:
BackgroundColor: The background color of the navigation bar, the default value is Rgba (61, 61, 61, 0.5).
Buttonscolor: The foreground color of the button, and the default value is transparent.
Activebuttonsbackgroundcolor: The background color of the button activation state, the default value is Rgba (255, 255, 255, 0.1).
Buttonsheight: The height of the button, in pixels, the default value is 20.
The thickness of the autorotatethickness:autorotate icon, in pixels, and the default value is 1.
Zoomrangewidth: Zoom range, unit display, default value 50.
Zoomrangethickness: The thickness of the scaled range, unit pixel, default value 1.
Zoomrangedisk: The disk diameter of the zoom range, in pixels, and the default value is 7.
Fullscreenratio: The proportions of the full screen icon, the default value is 3/4.
Fullscreenthickness: The thickness of the full screen icon, in pixels, the default value is 2.
Loading_msg: Optional, the default value is loading ..., the prompt text when the picture is loaded.
LOADING_IMG: Optional, default value is null, the path of the picture displayed at load time.
Size: optional, default value NULL, Final dimension of the Panorama container. For example: {width:500, height:300}.
Onready: Optional value, the default value is null. callback function when Panorama is ready and the first picture is displayed.

3, the above demo code

<!
DOCTYPE html>  

At the same time, in the GitHub above, we search (Photo Sphere Viewer), can also find! At present this plugin feels not very perfect.

The above is a small set to introduce the Three.js 360-degree panorama, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!