360x180 Panorama Preview plugin based on three.jstime 2015-08-12 10:01:10 HTML5 China Original http://www.html5cn.org/article-8621-1.html ThemeThree.jsA short tutorial Photo Sphere Viewer is a three.js-based 360x180 Panorama preview JS plugin. The JS plug-in can be rotated 360 degrees to view the panorama, or you can view the picture up and down 180 degrees. The only requirement for using the plugin is that the browser supports canvas or WebGL.
View Demo Download Plugin
How to use
The three.min.js and photo-sphere-viewer.min.js files are introduced when using the Panorama plug-in.
- <script src= "Js/three.min.js" ></script>
- <script src= "Js/photo-sphere-viewer.min.js" ></script>
Copy Code
HTML structure
You can create an empty <div> to place a panorama and set its size by using CSS.
- <div id= "Container" ></div>
Copy Code
Initializing plug-ins
To initialize the Panorama plug-in, you can create a new Photosphereviewer object, and then insert a parameter object into the object, with two parameters that must be set:
- var PSV = new Photosphereviewer ({
- Path to the Panorama
- Panorama: ' 1.jpg ',
- Container
- Container:div
- });
Copy Code
Configuration parameters
Here are all the available configuration parameters for the Panorama plug-in:
- Panorama: Required parameter, the path of the panorama.
- Container: Required parameter, place the div element of the panorama.
- AutoLoad: Optional, the default value is true,true to automatically call Panorama, false to load the panorama later (through the. Load () method).
- US empdata: Optional, the default value is True, true if the photo Sphere Viewer must read in XMP data.
- Default_position: Optional, default = {}, defines the default location, and the first point the user sees, for example: {Long:Math.PI, LAT:MATH.PI/2}.
- Min_fov: Optional, default value is 30, observed minimum area, unit degrees, between 1-179.
- Max_fov: Optional, default value is 90, maximum area observed, unit degrees, between 1-179.
- Allow_user_interactions: Optional, the default value is True, and set to false prevents users from interacting with the panorama (the navigation bar is not available).
- Tilt_up_max: Optional, default value is MATH.PI/2, tilt up maximum angle, unit radians.
- Tilt_down_max: Optional, default value is MATH.PI/2, tilt down maximum angle, unit radians.
- Zoom_level: Optional, default value is 0, default zoom level, value is between 0-100.
- Long_offset: Optional, the default value is the longitude value that passes per pixel when Pi/360,mouse/touch is moved.
- Lat_offset: Optional, the default value is the latitude value that passes per pixel when Pi/180,mouse/touch is moved.
- Time_anim: Optional, the default value is 2000, and Panorama automatically animates after Time_anim milliseconds. (set to False to disable it)
- Theta_offset: Obsolete option, optional, default value of 1440, automatic animation when horizontal direction speed.
- Anim_speed: Optional, default value is 2rpm, animation speed, how many radians/degrees/revolutions per second/minute.
- NavBar: Optional value, default = False. Displays the navigation bar.
- Navbar_style: Optional Value, default = {}. The custom style of the navigation bar. Here 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, 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.
- Autorotatethickness:autorotate the thickness of the icon, in pixels, the default value is 1.
- Zoomrangewidth: Scaled range, unit display, default value 50.
- Zoomrangethickness: The thickness of the scaled range, per pixel, default value 1.
- Zoomrangedisk: The disk diameter of the zoom range, in pixels, the default value is 7.
- Fullscreenratio: The scale 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 text of the prompt when the picture is loaded.
- LOADING_IMG: Optional, default value is null, the path of the picture that is displayed at load time.
- Size: optional, default value NULL, the final size of the Panorama container. For example: {width:500, height:300}.
- Onready: Optional value, default value is null. callback function when Panorama is ready and the first picture is displayed.
If you like this plugin, then you may also like:
360x180 Panorama Preview Plug-in based on Three.js
